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>