CODEWITHSUNDEEP
wpf
Prakash Chandra
Prakash Chandra

Reputation: 317

How to arrange stack panels in a stack panel?

I am facing issue while arranging Stack panel as mention in the screenshots. I am new to the WPF and I need to design a layout that look something like as mention in the image.

Upvotes: 0

Views: 2676

Answers (2)

Mark Travis
Mark Travis

Reputation: 1099

Zahorak is correct. There are a number of ways to create this layout, the best being a grid or a DockPanel. I prefer a DockPanel. A DockPanel allows you to position child controls around the edge of the DockPanel, filling the rest of the DockPanel (if you don't specify otherwise) with the last child control. For example, to achieve the result you are after, the xaml would be

    <DockPanel>
        <StackPanel DockPanel.Dock="Top">
            <TextBlock Text="Stack Panel 2" />
        </StackPanel>
        <StackPanel DockPanel.Dock="Left">
            <TextBlock Text="Stack Panel 3" />
        </StackPanel>
        <StackPanel DockPanel.Dock="Bottom">
            <TextBlock Text="Stack Panel 5" />
        </StackPanel>
        <StackPanel>
            <TextBlock Text="Stack Panel 4" />
        </StackPanel>
    </DockPanel>

A Grid layout requires a little more work.

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

        <StackPanel Grid.ColumnSpan="2">
            <TextBlock Text="Stack Panel 2" />
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.RowSpan="2">
            <TextBlock Text="Stack Panel 3" />
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1">
            <TextBlock Text="Stack Panel 4" />
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.Column="1">
            <TextBlock Text="Stack Panel 5" />
        </StackPanel>
    </Grid>

Note that a missing Grid.Row or Grid.Column means a value of 0 (the first row or first column).

I hope this helps.

Upvotes: 2

jimSampica
jimSampica

Reputation: 12420

Here is a way with pure stackpanels. You would have to set a width for the tall, narrow one (Stackpanel 3) in the second row

<StackPanel Orientation="Vertical" Name="StackPanel1">
    <StackPanel Orientation="Horizontal" Name="StackPanel2">

    <StackPanel>
    <StackPanel Orientation="Horizontal">
        <StackPanel Orientation="Vertical" Name="StackPanel3">

        <StackPanel>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal" Name="StackPanel4">

            <StackPanel>
            <StackPanel Orientation="Horizontal" Name="StackPanel5">

            <StackPanel>
        <StackPanel>
    <StackPanel>
<StackPanel>

Upvotes: 0

Related Questions