在 StackPanel 中旋转控件

Question

我正在尝试在我的第一个 WPF 项目中创建自己的可扩展/可折叠菜单（创造性地称为ExpandingMenu）。我已经有一个由 2 行 Grid 组成的用户控件（第 1 行是折叠和展开控件的按钮，第 2 行是用于旋转 ToggleButtons 的 StackPanel，这是我目前卡住的地方） .对于我的旋转按钮，我刚刚决定也将它们设为自己的UserControls。

按钮（我称它们为 ExpandingMenuButtons）只不过是 1x1 Grid 中的 ToggleButton（我正在考虑这样做，因为我可能想添加一些额外的自定义逻辑这些按钮在我整理出标准行为后）。我可以成功地将它们添加到我的菜单控件中，我什至可以通过Grid 上的RenderTransform 让它们旋转。

但是，正如您可能知道的那样，它们在旋转时会向上摆动。这导致它们不仅太高，而且还可能延伸到很远的地方。

这是我目前拥有的，在尝试旋转之前，它的行为符合预期。

这就是我想要完成的（使用绘画的魔力进行编辑）。我可以在我的菜单控件（棕褐色区域）中获得这种正确的行为，但同时出于测试目的我已经破坏了扩展/收缩事件...

当我旋转 1 个按钮时我能做什么（就像我之前提到的，为了测试目的，我已经修改了一些行为，所以每个按钮都设置为在点击时旋转，而不是像你期望的那样一次旋转）。如您所见，此按钮已从原来的位置向外摆动。较高的按钮将部分/完全摆动到视野之外。相反，我希望它们旋转到正确的位置。一旦我让一个工作正常，我认为让其他人以同样的方式工作会很简单，这就是我为什么要这样尝试的原因..

我的按钮代码如下：

<UserControl x:Class="App.Controls.ExpandingMenuButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:App.Controls"
         mc:Ignorable="d" 
         d:DesignHeight="30" d:DesignWidth="100">
    <Grid Name="ButtonGrid" Height="30">
        <ToggleButton Name="MenuButton" Background="Aqua" BorderThickness="0 0 0 1" Click="MenuButton_Click" Content="TEST"></ToggleButton>
    </Grid>
</UserControl>

到目前为止，ExpandingMenuButton.xaml.cs 中唯一的“真实”代码：

private void MenuButton_Click(object sender, RoutedEventArgs e)
{
    //I know this is not practical, it is used for quick testing.
    ButtonGrid.RenderTransform = new RotateTransform(-90);
}

到目前为止我的菜单代码：

<UserControl x:Class="App.Controls.ExpandingMenu"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:App.Controls"
         mc:Ignorable="d"
         Name="ucExpandingMenu"
         MinWidth="32"
         d:DesignHeight="300" d:DesignWidth="100">
<UserControl.Resources>
    <SolidColorBrush x:Key="BackColor" Color="PeachPuff"/>
    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect. http://stackoverflow.com/a/4182205/2957232 -->
    <Style x:Key="ExpandButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0 0 0 1"
                        BorderBrush="Black"
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel Name="MenuPanel" Width="100" HorizontalAlignment="Left" Background="{DynamicResource BackColor}" Grid.Row="1">
        <!--Contents will go here-->
    </StackPanel>
    <Button Style="{StaticResource ExpandButtonStyle}" Width="100" Height="32" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Stretch" Panel.ZIndex="1" Background="{DynamicResource BackColor}" BorderThickness="0" Click="Button_Click" Content="&#187;"></Button>
    <Button Name="DummyFocus" Panel.ZIndex="0" Height="0" Width="0"></Button>
</Grid>
</UserControl>

同样，到目前为止，这个类中唯一的“真实”代码：

private void Button_Click(object sender, RoutedEventArgs e)
{
    MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM"));
}

请原谅我缺乏 WPF 知识，我正试图来自 Winforms 的世界，即使在那里我对这类事情也缺乏知识。我知道代码看起来有点有趣，但希望这些图像能显示我在这里所追求的。到目前为止，我只是在一个只有一个网格且 Horizo​​ntalAlignment 设置为“Left”的虚拟窗口中对此进行测试。没什么特别的。

Answer 1

1. 使用LayoutTransform。使用RenderTransform 不会影响其他控件（包括父控件）的呈现/布局方式； LayoutTransform 会。
2. 将转换转移到整个 UserControl。您可以改为直接在 XAML 中指定。

例子：

<UserControl.LayoutTransform>
    <RotateTransform Angle="-90" />
</UserControl.LayoutTransform>