Skip to content

Latest commit

 

History

History
47 lines (39 loc) · 2.76 KB

how-to-create-a-stackpanel.md

File metadata and controls

47 lines (39 loc) · 2.76 KB
Raw
title description ms.date helpviewer_keywords ms.assetid
How to: Create a StackPanel
Learn how to create a StackPanel, which allows you to stack elements in a specified direction, via the included example in XAML.
03/30/2017
StackPanel control [WPF], creating
e7ce65cb-720a-4bb6-95b6-286b74488a58

How to: Create a StackPanel

This example shows how to create a xref:System.Windows.Controls.StackPanel.

Example

A xref:System.Windows.Controls.StackPanel allows you to stack elements in a specified direction. By using properties that are defined on xref:System.Windows.Controls.StackPanel, content can flow both vertically, which is the default setting, or horizontally.

The following example vertically stacks five xref:System.Windows.Controls.TextBlock controls, each with a different xref:System.Windows.Controls.Border and xref:System.Windows.Controls.Border.Background%2A, by using xref:System.Windows.Controls.StackPanel. The child elements that have no specified xref:System.Windows.FrameworkElement.Width%2A stretch to fill the parent window; however, the child elements that have a specified xref:System.Windows.FrameworkElement.Width%2A, are centered within the window.

The default stack direction in a xref:System.Windows.Controls.StackPanel is vertical. To control content flow in a xref:System.Windows.Controls.StackPanel, use the xref:System.Windows.Controls.StackPanel.Orientation%2A property. You can control horizontal alignment by using the xref:System.Windows.FrameworkElement.HorizontalAlignment%2A property.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="StackPanel Sample">  
  <StackPanel>  
    <Border Background="SkyBlue" BorderBrush="Black" BorderThickness="1">  
      <TextBlock Foreground="Black" FontSize="12">Stacked Item #1</TextBlock>  
    </Border>  
    <Border Width="400" Background="CadetBlue" BorderBrush="Black" BorderThickness="1">  
      <TextBlock Foreground="Black" FontSize="14">Stacked Item #2</TextBlock>  
    </Border>  
    <Border Background="LightGoldenRodYellow" BorderBrush="Black" BorderThickness="1">  
      <TextBlock Foreground="Black" FontSize="16">Stacked Item #3</TextBlock>  
    </Border>  
    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1">  
      <TextBlock Foreground="Black" FontSize="18">Stacked Item #4</TextBlock>  
    </Border>  
    <Border Background="White" BorderBrush="Black" BorderThickness="1">  
      <TextBlock Foreground="Black" FontSize="20">Stacked Item #5</TextBlock>  
    </Border>  
  </StackPanel>  
</Page>

See also