CODEWITHSUNDEEP
wpfvisual-studio-2010xaml
prosseek
prosseek

Reputation: 191179

Putting Stack Panels side by side

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?

enter image description here

Upvotes: 4

Views: 14390

Answers (3)

Zmaster
Zmaster

Reputation: 1135

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.

Upvotes: 5

Mark Pearl
Mark Pearl

Reputation: 7673

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.

Upvotes: 7

Bathineni
Bathineni

Reputation: 3496

Try this..... just replaced your grid with stackpanel 

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

or try this

<Grid>
 <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>
        <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" Grid.Row="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>

Upvotes: 3

Related Questions