Question

我正在尝试为我的个人项目创建可扩展/可折叠菜单。我拥有几乎所有我想要的东西（无论如何都表现得如预期的那样）。当我折叠菜单时，我希望按钮旋转到垂直位置并且不调整大小（或者至少调整大小以适合文本）。此刻，按钮旋转，然后垂直收缩（宽度是什么）和父控件一起收缩，从而切断了大部分内容。我可以看出为什么会发生这种情况，但我无法想出一种似乎对我而言的方法。

以下是我看到的行为：
之前：之后：

正如您所看到的，按钮沿着它们现在的垂直宽度缩小（我认为是封闭的StackPanel的宽度）。

以下是我正在使用的代码：

ExpaningMenu.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>

ExpandingMenu.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
}

ExpandingMenuButton.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; } }的宽度时，您还包含按钮的高度，因为您应用了变换。

以下是解决此问题的一种方法：

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

XAML：

{{1}}

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

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

1 个答案: