Search code examples
.netwpfxamlstackpaneldockpanel

Item alignments changed when using stackpanel instead of dockpanel

I am working on an implementation where I want to display some items in a window as shown below

---------------------
|                   |
|                   |   
|                   |
|                   |
|                   |
|                   |
|                   |
| xx xx       xx xx |
|--------------------

The attached scrrenn shot also displays the same . However I need to somehow implement this using a stack panel instead of a dock panel

eve though I can get it to work as required from a dock panel when using stack panel is messes up all the alignments .

Here is a ss of the required way it should look enter image description here

this is what it looks like in a stack panel enter image description here

below is my code , can anyone help me with this ?

<Grid>

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

        <StackPanel Grid.Row="2" Margin="0,10,0,0">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                <TextBlock>  Text01  </TextBlock>

                <TextBlock>  Text02  </TextBlock>


            </StackPanel>

            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" >

                <TextBlock>  Text03  </TextBlock>

                <TextBlock>  Text04  </TextBlock>


            </StackPanel>
        </StackPanel>

    </Grid>
Solution

  • There is no reason to force StackPanel to do what it doesn't support. Try Grid:

    <Grid Grid.Row="2" Margin="0,10,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Text="Text 01"/>
    <TextBlock Grid.Column="1" Text="Text 02"/>

    <TextBlock Grid.Column="3" Text="Text 03"/>
    <TextBlock Grid.Column="4" Text="Text 04"/>
</Grid>