Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to: Choose Between StackPanel and DockPanel

 

This example shows how to choose between using a StackPanel or a DockPanel when you stack content in a Panel.

Although you can use either DockPanel or StackPanel to stack child elements, the two controls do not always produce the same results. For example, the order that you place child elements can affect the size of child elements in a DockPanel but not in a StackPanel. This different behavior occurs because StackPanel measures in the direction of stacking at Double.PositiveInfinity; however, DockPanel measures only the available size.

The following example demonstrates this key difference between DockPanel and StackPanel.


            'Add root Grid
            Dim myGrid As New Grid
            myGrid.Width = 175
            myGrid.Height = 150
            Dim myRowDef1 As New RowDefinition
            Dim myRowDef2 As New RowDefinition
            myGrid.RowDefinitions.Add(myRowDef1)
            myGrid.RowDefinitions.Add(myRowDef2)

            'Define the DockPanel
            Dim myDockPanel As New DockPanel
            Grid.SetRow(myDockPanel, 0)

            'Define an Image and Source.
            Dim myImage As New Image
            Dim bi As New BitmapImage
            bi.BeginInit()
            bi.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi.EndInit()
            myImage.Source = bi

            Dim myImage2 As New Image
            Dim bi2 As New BitmapImage
            bi2.BeginInit()
            bi2.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi2.EndInit()
            myImage2.Source = bi2

            Dim myImage3 As New Image
            Dim bi3 As New BitmapImage
            bi3.BeginInit()
            bi3.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
            bi3.EndInit()
            myImage3.Stretch = Stretch.Fill
            myImage3.Source = bi3

            'Add the images to the parent DockPanel.
            myDockPanel.Children.Add(myImage)
            myDockPanel.Children.Add(myImage2)
            myDockPanel.Children.Add(myImage3)

            'Define a StackPanel.
            Dim myStackPanel As New StackPanel
            myStackPanel.Orientation = Orientation.Horizontal
            Grid.SetRow(myStackPanel, 1)

            Dim myImage4 As New Image
            Dim bi4 As New BitmapImage
            bi4.BeginInit()
            bi4.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi4.EndInit()
            myImage4.Source = bi4

            Dim myImage5 As New Image
            Dim bi5 As New BitmapImage
            bi5.BeginInit()
            bi5.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi5.EndInit()
            myImage5.Source = bi5

            Dim myImage6 As New Image
            Dim bi6 As New BitmapImage
            bi6.BeginInit()
            bi6.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
            bi6.EndInit()
            myImage6.Stretch = Stretch.Fill
            myImage6.Source = bi6

            'Add the images to the parent StackPanel.
            myStackPanel.Children.Add(myImage4)
            myStackPanel.Children.Add(myImage5)
            myStackPanel.Children.Add(myImage6)

            'Add the layout panels as children of the Grid
            myGrid.Children.Add(myDockPanel)
            myGrid.Children.Add(myStackPanel)

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      WindowTitle="StackPanel vs. DockPanel">
  <Grid Width="175" Height="150">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    
    <DockPanel Grid.Column="0" Grid.Row="0">
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" Stretch="Fill"/>
    </DockPanel>

    <StackPanel Grid.Column="0" Grid.Row="1"  Orientation="Horizontal">
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" Stretch="Fill"/>
    </StackPanel>
    </Grid>
</Page>

StackPanel
DockPanel
Panels Overview

Show:
© 2017 Microsoft