如何在XAML中围绕控件的中心旋转


75

我想将按钮旋转到90度,但由于它旋转(0,0)而被裁剪。如果我不知道它的宽度(以像素为单位)(这是许多按钮的模板),如何使其绕中心旋转


1
您正在使用RenderTransform还是LayoutTransform?即使没有指定原点,90度的LayoutTransform似乎也可以正常工作。
Grantnz

我正在使用LayoutTransform,并且按钮的Grid列宽设置为auto。无论如何,正确的旋转都不起作用,因为似乎网格将列的宽度设置为等于按钮的宽度(包括高度)。
波马

太大而无法发表评论。上传到text-upload.com/read.php?id=22752&c=9980825
波马

XAML中发生了很多事情!您确定LayoutTransform是问题吗?拆分器上应该执行/显示的按钮是什么?
Grantnz

该按钮应该会使的一侧折叠GridSplitter。只需尝试设置从auto到的列宽即可28使用LayoutTransform
Poma 2010年

Answers:


55
<Button ...>
  <Button.LayoutTransform>
    <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
  </Button.LayoutTransform>
</Button>

12
在Windows Phone 8 .NET 4.5 C#XAML应用程序中,这一功能对我不起作用。@FrancescoDeVittori的那个工作了。
mishan 2014年

这只会将按钮向右和向右移动每个按钮0.5个,这似乎不是正确的答案(VS17 .Net 6.4.1)
Kaspatoo

131

您必须将控件的RenderTransformOrigin设置为0.5、0.5。

例如:

<Button RenderTransformOrigin="0.5, 0.5">
    <RepeatButton.RenderTransform>
        <RotateTransform Angle="90"/>
    </RepeatButton.RenderTransform>
</RepeatButton>

7
这对我有用,尽管公认的答案不行。RenderTransform和LayoutTransform之间可能有区别吗?
TheSHEEEP 2013年

1
是的,这对我也有效,没有被接受的答案。
Paw Baltzersen 2014年

1
接受的答案中的LayoutTransform更改了我尝试旋转的元素周围的所有内容。设置RenderTransformOrigin并使用RenderTransform效果很好,谢谢!
克里斯·李斯

2
我对这个解决方案有疑问,因为它可以旋转但保持原始布局间距。LayoutTransform解决方案(可接受的解决方案)正确计算了元素的空间。
Michael Repucci 2015年

3
这适用于UWP应用,而接受的答案则无效。

3

我的理解是,原点与LayoutTransform无关。

MSDN说:

设置变换可提供强大的缩放和旋转功能。但是,LayoutTransform会忽略TranslateTransform操作。这是因为FrameworkElement的子元素的布局系统行为会自动更正缩放或旋转元素到父元素的布局和坐标系中位置的所有偏移。

然后以下“正确”旋转按钮。

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="1" Grid.Column="1">Excessively Long Button Still Ok
        <Button.LayoutTransform>
            <RotateTransform Angle="90" />
        </Button.LayoutTransform>
    </Button>
</Grid>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.