WPF UI 元素在其他元素折叠时不增长

Question

我希望元素在其他元素折叠时采用新的可用 space（例如宽度）。在我的示例中，当我折叠复选框时，第一个按钮没有变宽。我在这里做错了什么？谢谢！

XAML:

<Window x:Class="WpfApp3.MainWindow"
        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"
        mc:Ignorable="d" Width="250" Height="150"
        Title="MainWindow">
    <StackPanel Width="200" Height="80">
        <StackPanel Orientation="Horizontal">
            <Button Height="25" Margin="5" Content="Button 1"/>
            <CheckBox Content="Checkbox" VerticalAlignment="Center" Visibility="{Binding CheckBoxVisibility}"/>
        </StackPanel>
        <Button Height="25" Margin="5" Content="Change visibility" Click="Button_Click"/>
    </StackPanel>
</Window>

后面的代码：

using System.Windows;

namespace WpfApp3
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainViewModel();
        }

        private MainViewModel _viewModel => DataContext as MainViewModel;

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (_viewModel.CheckBoxVisibility == Visibility.Visible)
            {
                _viewModel.CheckBoxVisibility = Visibility.Collapsed;
            }
            else if (_viewModel.CheckBoxVisibility == Visibility.Collapsed)
            {
                _viewModel.CheckBoxVisibility = Visibility.Hidden;
            }
            else
            {
                _viewModel.CheckBoxVisibility = Visibility.Visible;
            }
        }
    }
}

视图模型：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace WpfApp3
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public MainViewModel()
        {
            CheckBoxVisibility = Visibility.Hidden;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private Visibility _checkBoxVisibility;
        public Visibility CheckBoxVisibility
        {
            get => _checkBoxVisibility;
            set
            {
                _checkBoxVisibility = value;
                OnPropertyChanged();
            }
        }

        private void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Answer 1

水平 StackPanel 中的元素不会水平拉伸，它们需要最小的宽度。

<StackPanel Orientation="Horizontal">
    <Button Height="25" Margin="5" Content="Button 1"/>
    <CheckBox Content="Checkbox" VerticalAlignment="Center" Visibility="{Binding CheckBoxVisibility}"/>
</StackPanel>

用网格替换 StackPanel

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Button Height="25" Margin="5" Content="Button 1" Grid.Column="0"/>
    <CheckBox Content="Checkbox" Grid.Column="1" 
              VerticalAlignment="Center" 
              Visibility="{Binding CheckBoxVisibility}"/>
</Grid>

WPF UI 元素在其他元素折叠时不增长

WPF UI element not growing when other element gets collapsed

wpf

rendering

visibility