C# StackPanel中的旋转控件

我试图在我的第一个WPF项目中创建我自己的可扩展/可折叠菜单（创造性地称为

ExpandingMenu

）。我已经有一个用户控件，它由两行

网格组成（第1行是折叠和展开控件的按钮，第2行是旋转
切换按钮的
堆叠面板
，这是我当前卡住的地方）。对于我的旋转按钮，我刚刚决定让它们也成为自己的
UserControls

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

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

这就是我目前所拥有的，在尝试旋转之前，它的行为和预期的一样。

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


当我旋转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>

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

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的世界，即使在那里，我也缺乏这方面的知识。我知道代码看起来有点滑稽，但希望图片能显示我在这里想要什么。到目前为止，我只是在一个虚拟窗口中测试它，只有一个网格，水平对齐设置为“左”。没什么特别的

使用
布局转换
。使用
RenderTransform
不会影响其他控件（包括父控件）的呈现/布局方式<代码>布局转换执行
将转换转移到整个UserControl。您可以直接在XAML中指定
例如：

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


您可以尝试使用
选项卡控件
，并根据需要对其进行自定义。它具有
TabStripPlacement
属性。如果您决定坚持使用
StackPanel
，我建议旋转整个
StackPanel
（设置为水平方向），而不是每个单独的元素。如果你需要特别的帮助，请提供一个很好的例子，清楚地展示你到目前为止所得到的。太棒了！非常感谢。我可以发誓我在某个时候尝试过布局转换。。。在我无法使用它并使用了
RenderTransform
：/I我不知道为什么我甚至没有想到要转换整个网格本身后，我一定是迷路了。。。