首页 文章

在StackPanel内旋转控件

提问于
浏览
0

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

按钮(我称之为 ExpandingMenuButtons )只不过是1x1 Grid 中的 ToggleButton (我正在考虑这样做,因为我可能希望在我获得标准行为排序后为这些按钮添加一些额外的自定义逻辑出) . 我可以成功地将它们添加到我的菜单控件中,我甚至可以通过 Grid 上的 RenderTransform 来旋转它们 .

但是,正如你可能知道的那样,它们在旋转时会向上摆动 . 这导致它们不仅太高,而且它们也可能延伸到很远 .

这是我目前所拥有的,在尝试旋转之前,它的行为符合预期 .
This is what I currently have, before attempting rotations, it is behaving as expected.

这就是我在此期间为了测试目的而破坏扩展/ Contract 事件的原因......

what I'm trying to accomplish

当我旋转1个按钮时我能做什么(就像我之前提到的那样,我've mangled some behavior for my testing purposed, so each button is set to rotate on click, not all at once like you may expect). As you can see, this button has swung out from where it originally was. buttons higher up will swing partially/completely out of view. Instead, I would like them to rotate into the proper place. once I get one to work right, I assume it will be simple to get the rest behaving the same way, which I why I' m这样做的事情......

What I can do when I rotate 1 button

我的按钮代码如下:

<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的世界,即使在那里,我还缺乏知识,当涉及到这类事情时 . 我知道这些代码看起来很有趣,但希望图像显示我在这里的内容 . 到目前为止,我只是在一个虚拟窗口中测试它,只有一个网格,HorizontalAlignment设置为“Left” . 没有什么花哨 .

1 回答

  • 3
    • 使用 LayoutTransform . 使用 RenderTransform 不会影响其他控件(包括父级)的呈现/布局方式; LayoutTransform .

    • 将变换移动到整个UserControl . 您可以直接在XAML中指定 .

    例:

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

相关问题