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

Question

我想要将按钮旋转90度，但由于它是绕着(0,0)旋转的，所以会被截断。如果我不知道它的像素宽度（它是许多按钮的模板），如何使它围绕中心旋转？

- Poma

---

你是在使用RenderTransform还是LayoutTransform？对我来说，90度的LayoutTransform似乎可以正常工作，即使没有指定原点。 - grantnz

我正在使用LayoutTransform，按钮位于设置为自动列宽的“Grid”中。由于网格将列宽设置为按钮的宽度而不是高度，因此正确的旋转无论如何都无法正常工作。 - Poma

太大无法在评论中发布。已上传至http://www.text-upload.com/read.php?id=22752&c=9980825 - Poma

你的 XAML 里有很多东西！你确定 LayoutTransform 是问题所在吗？GridSplitter 上的按钮是用来做/展示什么的？ - grantnz

这个按钮应该折叠GridSplitter的一侧。尝试将列宽从“自动”设置为“28”，并使用“LayoutTransform”进行操作。 - Poma

Answer 1

你需要将控件的RenderTransformOrigin设置为0.5, 0.5。

例如:

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

- Francesco De Vittori

---

这个对我有用，虽然被接受的答案不行。也许RenderTransform和LayoutTransform之间有差别？ - TheSHEEEP

是的，这对我也有效，但不是被接受的答案。 - Paw Baltzersen

LayoutTransform会改变我想旋转的元素周围的所有内容。设置RenderTransformOrigin并使用RenderTransform效果很好，谢谢！ - Chris Lees

我对这个解决方案有问题，因为它旋转但保持原始布局间距。LayoutTransform解决方案（被接受的解决方案）正确计算了元素的空间。 - Michael Repucci

这是答案。请作者进行评审！ - Jeb

这对于UWP应用程序有效，而被接受的答案则无效。 - Hong

Answer 2

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

- Andy

---

这个在Windows Phone 8上的.NET 4.5 C# XAML应用程序中对我没有起作用。但是@FrancescoDeVittori的那个可以用。 - mishan

这只是将按钮向右和向下移动0.5，似乎不是正确的答案（VS17 .Net 6.4.1）。 - Kaspatoo

Answer 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>

- grantnz