Неправильный рендеринг кнопок после преобразования вращения в элементе управления Silverlight

Question

Похоже, что ширина дочернего элемента управления silverlight всегда ограничена шириной контейнера. Даже если дочерний элемент управления повернут.

Этот первый «кусок» XAML отобразит кнопку, которая слишком велика для панели стека и обрезана, это имеет смысл.

<StackPanel Width="20">
    <Button Width="100" Content="Foo" />
</StackPanel>

Этот второй кусок XAML поворачивает кнопку на 90 градусов. Я ожидаю увидеть полную кнопку, поскольку она теперь вертикальная.

<StackPanel Width="20">
    <Button Width="100" Content="Foo" >
        <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
        </TransformGroup>
            </Button.RenderTransform>
    </Button>
</StackPanel>

Во втором фрагменте XAML кажется, что кнопка обрезана в той же точке, что и в горизонтальном положении, я ожидаю увидеть полную кнопку.

Это, очевидно, стандартное поведение, но есть ли способ обойти это?

Answer 1

Если элемент в вертикальной StackPanel шире, чем ширина StackPanel, он будет обрезан по ширине StackPanel. Если вы удалите свою TransformGroup, вы увидите, что вы получили такое же отсечение, только не повернутое. Отсечение происходит до поворота, поэтому даже если вы сделаете его достаточно высоким, чтобы отобразить результат, оно все равно будет отсечено, поскольку контейнер до поворота был недостаточно большим. Одним из способов решения этой проблемы является вставка Canvas между ними, потому что элементы Canvas не обрезаются, и поэтому он должен работать как положено. Лучший способ не получить другие побочные эффекты - это сделать ваш Canvas того же размера, что и содержащиеся в нем элементы, в противном случае вы можете получить странное поведение при настройке размеров из вашей StackPanel.

Итак, ваш код будет выглядеть так:

   <StackPanel Width="20">
        <Canvas Width="100" Height="20">                
            <Button Width="100" Content="Foo" >
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>
        </Canvas>
    </StackPanel>

Answer 2

Возможно, проверьте правильность значения RenderTransformOrigin?

Обычно, если вы просто хотите повернуть элемент на 90 & deg; Вы должны установить RenderTransformOrigin равным 0,5,0,5.

Это может привести к вращению по центру кнопки, т.е. расположение центра кнопки не изменится.

Указанный в вашем коде RenderTransformOrigin со значением .0,1 будет вращать кнопку по окружности круга, центр которого является нижним левым углом кнопки. Это означает, что центр кнопки изменится.

Answer 3

Вместо использования Button.RenderTransform, вы должны использовать Button.LayoutTransform. Для получения дополнительной информации см .: http://msdn.microsoft.com/en-us/library/ms750596.aspx