Question

看起来儿童silverlight控件的宽度总是被容器的宽度限制。即使儿童控制旋转了。

XAML的第一个“块”将呈现一个对于堆栈面板而言太大而且被剪裁的Button，这是有道理的。

<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°，则将RenderTransformOrigin设置为0.5,0.5。

这会导致旋转以Button为中心发生，即Button中心的位置不会改变。

代码中指定的.0,1的RenderTransformOrigin将围绕圆的圆周旋转Button，圆的中心是Button的左下角。这意味着Button的中心将会改变。

Answer 3

您应该使用Button.RenderTransform而不是Button.LayoutTransform。有关详细信息，请参阅：http://msdn.microsoft.com/en-us/library/ms750596.aspx

在Silverlight控件中的旋转变换后，按钮渲染不正确

3 个答案: