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.