在StackPanel中旋转控件

Question

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

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

但是，您可能会说，它们旋转时会摆动。 这不仅使它们过高，而且还可能延伸到远处。

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

这就是我要完成的工作（使用绘画的魔术进行编辑）。 我可以在菜单控件（棕褐色区域）中得到这种正确的行为，但是出于测试目的，我同时修改了expand / contract事件。

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