Putting Stack Panels side by side

Question

I need to put controls grouped and put them side by side. And I came up with this code to use multiple StackPanel to do that.

<Window x:Class="xamlTests.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="310" Width="525">
    <Grid>

        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>

        <StackPanel x:Name="_ribbonRadioButtonPanel2">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

However, I got StackPanels overapped. What's wrong with the XAML? What layout panels are used for aligning multiple components?

Answer 1

You could do the following...

        <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical" Grid.Column="0">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>
        <StackPanel x:Name="_ribbonRadioButtonPanel2" Grid.Column="1">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </Grid>

This will put the controls into separate columns so that they do not overlap. Another approach is to put the stack panels into a stackpanel that has its orientation set to horizontal like the following...

        <StackPanel Orientation="Horizontal">
        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical" Grid.Column="0">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>
        <StackPanel x:Name="_ribbonRadioButtonPanel2" Grid.Column="1">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>

There are probably numerous other ways of doing this as well to get the desired result.

Answer 2

The problem is that the Grid is a container that can hold many elements and by default they are put in Grid=0,Column=0.

Since you have not defined rows or columns and not specified where the stackpanels should be placed using Grid.Row and Grid.Column attached properties, they appear in the same place.

And in Grids multiple elements in the same cell are overlayed as you can see.

You can find the examples on other answers, i wanted to explain why this is happening.