Question

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

按钮（我称之为ExpandingMenuButtons）在1x1 ToggleButton中不超过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>

唯一的＆＃34;真实＆＃34;到目前为止，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>

再次，唯一的＆＃34;真实＆＃34;到目前为止这个类中的代码：

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

请原谅我缺乏WPF知识，我试图来自Winforms的世界，即使在那里，我也缺乏这方面的知识。我知道这些代码看起来很有趣，但希望这些图像能够显示我在此之后所做的事情。到目前为止，我只是在虚拟窗口中测试它，只有一个网格，而HorizontalAlignment设置为＆＃34; Left＆＃34;。没什么好看的。

Answer 1

使用LayoutTransform。使用RenderTransform不会影响其他控件（包括父级）的呈现/布局方式; LayoutTransform确实如此。
将转换移至整个UserControl。您可以直接在XAML中指定。

示例：

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

StackPanel中的旋转控件

1 个答案: