WP7 WP8 Windows8 教程 公共基础篇 二 布局
布局
Grid
就是设计表格，将控件放在表格的单元格中，以这种方式来布局
<!--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>
Canvas
利用坐标来布局，游戏中使用比较多
可以使用SetValue（）对Margin或者Canvas进行设置。
通过SetValue（）获取控件的依赖属性。
例如：
myButton.SetValue(Canvas.LeftProperty, myPoint.X);
这里myButton在xaml中是一个按钮控件，myPoint是Point类型变量。
<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>
StackPanel排列布局控件
将子元素排列成一行（可沿水平或垂直方向）
<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>
Border
边框，我一般使用border来控制样式，制作自定义的控件。常用的属性 padding，margin，圆角设置等。
在blend中 常用的操作：
右键单击一个控件，然后 点击 group into ，然后选择grid，border等控件。
<UserControl x:Class="Silverlight20.Control.Border"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left">
<!--
BorderThickness - 边框的宽度（像素值：上下左右；左右,上下；左,上,右,下）
BorderBrush - 边框的颜色
CornerRadius - 边框角的半径
-->
<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Width="120" Margin="5">
<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />
</Border>
<!--
Border.BorderBrush - 继承自 System.Windows.Media.Brush 的对象
-->
<Border BorderThickness="3" CornerRadius="10" Width="120" Margin="5">
<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />
<Border.BorderBrush>
<ImageBrush ImageSource="http://silverlight.net/Themes/silverlight/images/logo.jpg" />
</Border.BorderBrush>
</Border>
</StackPanel>
</UserControl>
