Unexpected auto grid column width

Question

the code below is a small snippet of a big wpf Window I am using in my Project. It produces the linked wpf Window.

I am wondering why my last grid column is so wide. I am expecting that the width of the last column depends on the width of the button, because the column width is set to "Auto". If I remove the columnspan of the StackPanel the column width will be correct but then the CheckBoxes are not aligned to right side.

I hope you have understood my problem. My aim is, that the last column is as small as possible, the checkboxes are at the right side and the rest stays at it is.

Because this snippet is part of a bigger wpf window I cannot remove any grid rows or columns.

Thank you very much for your help.

Best regards.

WPF Window

<Window x:Class="TestProject.Window1"
         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" 
         d:DesignHeight="152.429" d:DesignWidth="403">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" 
             Grid.Row="0"
             Margin="5"
             Grid.ColumnSpan="2"/>

    <Button Grid.Column="2" 
            Grid.Row="0"
            Margin="5"
            Width="40"/>

    <ComboBox Grid.Column="0"
              Grid.Row="1"
              Margin="5"
              Grid.ColumnSpan="3"/>

    <Image Grid.Column="0"
           Grid.Row="2"/>

    <StackPanel Grid.Column="1"
                Grid.Row="2"
                Grid.ColumnSpan="2">

        <CheckBox Margin="5"
                  Content="checkbox content 1"/>

        <CheckBox Margin="5,0,5,5"
                  Content="checkbox content 2"/>
    </StackPanel>
</Grid>

Answer 1

You can put a grid inside another grid.

Here is the code that will help you achieve your goal.

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

        <TextBox Grid.Column="0" 
             Grid.Row="0"
             Margin="5"
             Grid.ColumnSpan="2"/>

        <Button Grid.Column="2" 
            Grid.Row="0"
            Margin="5"
            Width="40"/>

        <ComboBox Grid.Column="0"
              Grid.Row="1"
              Margin="5"
              Grid.ColumnSpan="3"/>

        <Grid Name="GridInsideAGrid"
                Grid.Column="0"
                Grid.Row="2"
                Grid.ColumnSpan="3">

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

            <Image Grid.Column="0" />
            <StackPanel Grid.Column="1">
                <CheckBox Margin="5"
                  Content="checkbox content 1"/>

                <CheckBox Margin="5,0,5,5"
                  Content="checkbox content 2"/>
            </StackPanel>
        </Grid>
    </Grid>