在 StackPanel 中旋转控件

Question

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

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

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

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

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

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