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

Posted 2023-04-12

【中文标题】如何在 XAML 中围绕控件中心进行旋转

【英文标题】：How to do rotation around control's center in XAML

【发布时间】：2011-05-07 03:23:17

【问题描述】：

我想将按钮旋转到 90 度，但它被剪裁了，因为它围绕 (0,0) 旋转。如果我不知道它的宽度（它是许多按钮的模板），如何使它围绕中心旋转（它是许多按钮的模板）

【问题讨论】：

您使用的是 RenderTransform 还是 LayoutTransform？即使不指定原点，90 度的 LayoutTransform 对我来说似乎也可以。

我正在使用 LayoutTransform，按钮位于 Grid 中，列宽设置为自动。正确的旋转无论如何都不起作用，因为网格似乎将列宽设置为按钮的宽度而不是高度。

太大，无法在评论中发布。上传到text-upload.com/read.php?id=22752&c=9980825

XAML 中发生了很多事情！你确定 LayoutTransform 是问题吗？ gridsplitter 上的按钮应该做什么/显示什么？

这个按钮应该折叠GridSplitter的一侧。只需尝试将列宽从auto 设置为28 并使用LayoutTransform

【参考方案1】：

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

例如：

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

【讨论】：

这个对我有用，虽然接受的答案没有。也许这里 RenderTransform 和 LayoutTransform 有区别？

是的，这也适用于我，不接受答案。

已接受答案中的 LayoutTransform 改变了我试图旋转的元素周围的一切。设置 RenderTransformOrigin 和使用 RenderTransform 效果很好，谢谢！

我遇到了这个解决方案的问题，因为它旋转但保留了原始布局间距。 LayoutTransform 解决方案（已接受的解决方案）正确计算了元素的空间。

这适用于 UWP 应用，而接受的答案不适用。

【参考方案2】：

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

【讨论】：

这个在 windows phone 8 .NET 4.5 C# XAML 应用程序中对我不起作用。 @FrancescoDeVittori 的那个虽然有效。

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

【参考方案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>