c# - 转换后不需要的按钮调整大小

Question

我正在尝试为我的个人项目创建一个可展开/可折叠的菜单。我几乎拥有我想要的一切(无论如何它都按预期运行)。当我折叠我的菜单时，我希望按钮旋转到垂直位置并且不调整大小(或者至少调整到仍然适合文本的大小)。目前，按钮旋转，然后与父控件一起垂直收缩(宽度是多少)，这会切断大部分内容。我明白为什么会发生这种情况，但我想不出一种对我来说似乎正确的解决方法。

这是我看到的行为:
之前:之后:

如您所见，按钮正在沿着它们现在的垂直宽度缩小(我假设是封闭的 StackPanel 的宽度)。

这是我使用的代码:

扩展菜单.xaml

<UserControl x:Class="Budgety.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:Budgety.Controls"
         mc:Ignorable="d"
         Name="MainExpandingMenu"
         MinWidth="32"
         d:DesignHeight="300" d:DesignWidth="100"> 
<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 Name="StateToggle" Width="100" Height="32" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Stretch" Panel.ZIndex="1" Background="{DynamicResource BackColor}" BorderThickness="0" Click="Button_Click" Content="&#171;"></Button>
</Grid>
</UserControl>

扩展菜单.xaml.cs

public partial class ExpandingMenu : UserControl
{
    public ExpandingMenu()
    {
        InitializeComponent();

        //For testing purposes.
        MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 1"));
        MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 2"));
        MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 3"));
        MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 4"));
        MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 5xxx"));

        foreach (UIElement element in MenuPanel.Children)
        {
            (element as ExpandingMenuButton).HorizontalAlignment = HorizontalAlignment.Left;
        }
    }

    #region Events
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (MenuPanel.Width == 100) //Need to collapse
        {
            StateToggle.Width = MenuPanel.Width = 32;

            (sender as Button).Content = "\u00BB";

            //Flip all children of this control (so far, assuming only ExpandingMenuButtons)
            foreach (UIElement element in MenuPanel.Children)
            {
                (element as ExpandingMenuButton).LayoutTransform = new RotateTransform(-90);

                //This works to resize to 100 tall (not ideal...)
                //(element as ExpandingMenuButton).Width = 100;
                //This does not seem to size to auto, which SHOULD make each button as long as the text requires... (this behavior is far less than ideal...)
                //(element as ExpandingMenuButton).Width = Double.NaN;
            }
        }
        else //Need to expand
        {
            StateToggle.Width = MenuPanel.Width = 100;
            (sender as Button).Content = "\u00AB";

            //Flip all children of this control (so far, assuming only ExpandingMenuButtons)
            foreach (UIElement element in MenuPanel.Children)
            {
                (element as ExpandingMenuButton).LayoutTransform = new RotateTransform(0);
            }
        }
    }
    #endregion
}  

扩展菜单按钮.xaml

<UserControl x:Class="Budgety.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:Budgety.Controls"
         mc:Ignorable="d" 
         d:DesignHeight="30" d:DesignWidth="100"
         Height="30"
         Name="ButtonControl">
<Grid Name="ButtonGrid" Height="30">
    <ToggleButton Name="MenuButton" Background="Aqua" BorderThickness="1" Content="TEST"></ToggleButton>
</Grid>
</UserControl>  

ExpandingMenuButton.xaml.cs

public partial class ExpandingMenuButton : UserControl
{
    //Will definitely want custom functionalty here. TBD. Nothing special so far.

    #region Constructors
    public ExpandingMenuButton()
    {
        InitializeComponent();
    }

    public ExpandingMenuButton(string sText)
    {
        InitializeComponent();

        MenuButton.Content = sText;
    }
    #endregion
}  

如果您想测试代码，它应该像我一样放置在普通网格中(上面提到的我制作的 UserControls 位于项目中的 Controls 文件夹中):

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Budgety"
    xmlns:Controls="clr-namespace:Budgety.Controls" x:Class="Budgety.MainTest"
    mc:Ignorable="d"
    Title="MainTest" Height="600" Width="800">
<Grid>
    <Controls:ExpandingMenu x:Name="ExpandingMenu" HorizontalAlignment="Left"/>
</Grid>
</Window>  

说完一切后，这是我想要的行为/外观(通知按钮未缩短)

Answer 1

您看到的布局的原因是您在 ExpandingMenuButton 中设置的固定高度约束: Height="30"在 UserControl 上和 Grid元素。您可以将其更改为 MinHeight .

此外，当您设置 MenuPanel 的宽度时，您还包含按钮的高度，因为您应用了转换。

这是解决此问题的一种方法:

private void Button_Click(object sender, RoutedEventArgs e)
{
    if (StateToggle.IsChecked == true)
    {
        StateToggle.Content = "\u00BB";
        foreach (FrameworkElement element in MenuPanel.Children)
            element.LayoutTransform = new RotateTransform(-90);
    }
    else
    {
        StateToggle.Content = "\u00AB";
        foreach (FrameworkElement element in MenuPanel.Children)
            element.LayoutTransform = null;
    }
}

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel Name="MenuPanel"
                HorizontalAlignment="Left"
                Background="{DynamicResource BackColor}"
                Grid.Row="1">
        <!--Contents will go here-->
    </StackPanel>
    <ToggleButton Name="StateToggle"
                  FontSize="18"
                  VerticalAlignment="Center"
                  HorizontalAlignment="Stretch"
                  Panel.ZIndex="1"
                  Background="{DynamicResource BackColor}"
                  BorderThickness="0"
                  Click="Button_Click"
                  Content="&#171;" />
</Grid>

作为一般规则，不要在 WPF 中指定宽度和高度 - 让布局系统根据内容为您进行测量。