Windows8 Metro应用开发之C#（2） 布局控件Grid,Canvas,StackPanel（延续Silverlight）

介绍：

在Metro中从Silverlight中保留下来了一些布局控件及一些新增的布局控件。

本节主要讲解从Silverlight中延续下来的布局控件Grid、Canvas及StackPanel，如果你有Silvelright或WPF基础可以跳过本节。

 Grid网格布局控件

 定义由行和列组成的网格区域。

Grid.xaml

 1 <UserControl
 2     x:Class="BlankApplication.Grid"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:BlankApplication"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     d:DesignHeight="300"
     d:DesignWidth="400">
     
   <!--Grid表格布局
     Grid.RowDefinitions：定义Grid中的行
     Grid.ColumnDefinitions ：定义Grid的列
     
     -->
         <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">
             <Grid.RowDefinitions>
                 <!--定义三行及每行高度-->
                 <RowDefinition Height="30*"/>
                 <RowDefinition Height="32*"/>
                 <RowDefinition Height="43*"/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <!--定义四列及每列宽度-->
                 <ColumnDefinition Width="58*" />
                 <ColumnDefinition Width="61*"/>
                 <ColumnDefinition Width="123*"/>
                 <ColumnDefinition Width="63*"/>
             </Grid.ColumnDefinitions>
             <!--Grid第一列-->
             <Rectangle Fill="#FFF4F4F5"/>
             <Rectangle Fill="#FF0B0BEE" Grid.Row="1"  />
             <Rectangle Fill="#FFEECF0B" Grid.Row="2"   />
             <!--Grid第二列-->
             <Rectangle Fill="#FF34EE0B" Grid.Row="2" Grid.Column="1"  />
             <Rectangle Fill="#FFFF9A09" Grid.Row="0" Grid.Column="1"  />
             <Rectangle Fill="#FF08B7D3" Grid.Row="1" Grid.Column="1"  />
             <!--Grid第三列-->
             <Rectangle Fill="#FFD30889" Grid.Row="0" Grid.Column="2"  />
             <Rectangle Fill="#FFB708D3" Grid.Row="1" Grid.Column="2"  />
             <Rectangle Fill="#FF4B484B" Grid.Row="2" Grid.Column="2"  />
             <!--Grid第四列-->
             <Rectangle Fill="#FF661F4D" Grid.Row="0" Grid.Column="3"  />
             <Rectangle Fill="#FF0DF0BC" Grid.Row="1" Grid.Column="3"  />
             <Rectangle Fill="#FF0FAA4E" Grid.Row="2" Grid.Column="3"  />
         </Grid>
 
    </UserControl> 

 Canvas画布布局控件

定义一个区域，在该区域中可以使用相对于该区域的坐标显式定位子元素。 

 canvas.xaml

 1 <UserControl
 2     x:Class="BlankApplication.Canvas"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:BlankApplication"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     d:DesignHeight="300"
     d:DesignWidth="400">
     
     <Grid>
         <Canvas HorizontalAlignment="Center" Height="144" Margin="0" VerticalAlignment="Center" Width="276" Background="#FFAA6C6C">
             <!--Canvas里子元素通过调整Canvas区域的绝对位置来定位
             Canvas.Left - 以左上角为原点，Canvas X轴的距离
             Canvas.Top - 以左上角为原点，Canvas Y轴的距离
              -->
             <Ellipse Fill="#FF0B0BC5" Height="51" Canvas.Left="30" Stroke="Black" Canvas.Top="52" Width="53"/>
             <Rectangle Fill="#FF32FD12" Height="56" Canvas.Left="119" Stroke="Black" Canvas.Top="38" Width="84"/>
         </Canvas>
 
     </Grid>23 </UserControl> 

StackPanel排列布局控件 

 将子元素排列成一行（可沿水平或垂直方向） 

stackpanel.xaml

 1 <UserControl

 2     x:Class="BlankApplication.StackPanel"

 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 5     xmlns:local="using:BlankApplication"

 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 8     mc:Ignorable="d"

 9     d:DesignHeight="300"

     d:DesignWidth="400">

     <StackPanel>

         <StackPanel Orientation="Horizontal" x:Name="stackpanel">

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

     </StackPanel>

         <Button Width="100" Height="80" Margin="10" Click="Button_Click_1">变换方向</Button>

     </StackPanel>

 </UserControl> 

 stackpanel.xaml.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.IO;
 4 using System.Linq;
 5 using Windows.Foundation;
 6 using Windows.Foundation.Collections;
 7 using Windows.UI.Xaml;
 8 using Windows.UI.Xaml.Controls;
 9 using Windows.UI.Xaml.Controls.Primitives;
10 using Windows.UI.Xaml.Data;
11 using Windows.UI.Xaml.Input;
12 using Windows.UI.Xaml.Media;
13 using Windows.UI.Xaml.Navigation;
14 
15 
16 
17 namespace BlankApplication
18 {
19     public sealed partial class StackPanel : UserControl
20     {
21         public StackPanel()
22         {
23             this.InitializeComponent();
24         }
25 
26         private void Button_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e)
27         {
28             ///更改Stackpanel控件的内部排列方式
29             if(stackpanel.Orientation==Orientation.Horizontal)
30             stackpanel.Orientation = Orientation.Vertical;
31             else
32                 stackpanel.Orientation = Orientation.Horizontal;
33         }
34     }
35 }

 ok.Demo源码下载