WPF UI element not growing when other element gets collapsed

Question

I expected elements to take the new available space (e.g. the width) when other elements get collapsed. In my example the first button is not getting wider when I collapse the checkbox. What am I doing wrong here? Thanks!

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>

Code behind:

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

ViewModel:

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

elements in horizontal StackPanel do not strecth horizontally, they take minimal required Width.

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

Replace StackPanel with Grid

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