StackPanel控件也是用于布局的，可以使多个子控件按横向或者纵向排列，并且可以根据自身大  小拉伸子控件。

 StackPanel默认情况下为纵向排列，当Orientation设置为Horizontal时，横向排列。

 

 StackPanel-堆放容器 将子元素排列成一行（可沿水平或垂直方向）。

 StackPanel的规则是：根据附加属性，我要么让元素横着排列，要么竖着排列。

 StackPanel 为启用布局的 Panel 元素之一。在特定情形下，例如，要将一组对象排列在竖直或  水平列表（例如，项的水平或竖直菜单）中，StackPanel 很有用。设置 Orientation 属性可确  定列表的方向。Orientation 属性的默认值为 Vertical。

 StackPanel 中内容的 HorizontalAlignment 和 VerticalAlignment 默认值均为 Stretch。

 

 附上代码：

 
  
  1. <!--LayoutRoot 是包含所有页面内容的根网格--> 
  2.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  3.         <StackPanel Orientation="Vertical"> 
  4.             <Button Content="元素1" ></Button> 
  5.             <Button Content="元素2" ></Button> 
  6.             <Button Content="元素3" ></Button> 
  7.         </StackPanel> 
  8.     </Grid> 
 
  
 效果为：
 
  
 
 
  
 附上代码：
 
  
 
  
  1. <!--LayoutRoot 是包含所有页面内容的根网格--> 
  2.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  3.         <StackPanel Orientation="Horizontal"> 
  4.             <Button Content="元素1" ></Button> 
  5.             <Button Content="元素2" ></Button> 
  6.             <Button Content="元素3" ></Button> 
  7.         </StackPanel> 
  8.     </Grid> 
 
  
 效果为： 
 
  
 
 
  
 示例二：
 
  
 
  
  1. <!--LayoutRoot contains the root grid where all other page content is placed--> 
  2.    <Grid x:Name="LayoutRoot" Background="Transparent"> 
  3.        <Grid.RowDefinitions> 
  4.            <RowDefinition Height="Auto"/> 
  5.            <RowDefinition Height="*"/> 
  6.        </Grid.RowDefinitions> 
  7.  
  8.        <!--TitlePanel contains the name of the application and page title--> 
  9.        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  10.            <TextBlock x:Name="ApplicationTitle" Text="STACKPANEL WITH FOUR ELEMENTS" Style="{StaticResource PhoneTextNormalStyle}"/> 
  11.        </StackPanel> 
  12.  
  13.        <!--ContentPanel - place additional content here--> 
  14.        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  15.            <StackPanel Name="stackPanel" Orientation="Vertical"> 
  16.                <TextBlock Text="TextBlock aligned at right bottom" 
  17.                           HorizontalAlignment="Right" 
  18.                           VerticalAlignment="Bottom" /> 
  19.                <Image Name="p_w_picpath1" Source="/PhoneApp2;component/Images/1-12101Q43P9.jpg" /> 
  20.                <Ellipse Stroke="{StaticResource PhoneAccentBrush}" 
  21.                         StrokeThickness="12" /> 
  22.                <TextBlock Text="TextBlock aligned at left top" 
  23.                           HorizontalAlignment="Left" 
  24.                           VerticalAlignment="Top" /> 
  25.            </StackPanel> 
  26.        </Grid> 
  27.    </Grid> 
 
  
 效果图为：