c# - 在 StackPanel 中旋转控件

Question

我正在尝试在我的第一个 WPF 项目中创建自己的可展开/可折叠菜单(创造性地称为 ExpandingMenu)。我已经有一个由 2 行 Grid 组成的用户控件(第 1 行是用于折叠和展开控件的按钮，第 2 行是用于旋转 的 StackPanel ToggleButtons，这是我目前陷入困境的地方)。对于我的旋转按钮，我刚刚决定将它们也设为自己的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. 将转换转移到整个用户控件。您或许可以直接在 XAML 中指定。

示例:

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