WPF布局-面板类（三）

Canvas面板，是一个很普通的面板，普通的没有布局，即随意布局在上面的标签保留在初始布局的地方。这种随意是因为它会帮助子标签创建两个属性。其实有四个属性，它们分别是Canvas.Left="10" Canvas.Right="20" Canvas.Bottom="30" Canvas.Top="40"，这个属性很特别，如果有Canvas.Left时，Canvas.Right就不起作用，如果有Canvas.Top，Canvas.Bottom就不起作用。并且这四个属性是相对的，即不管Canvas变成多大或多小，控件的相对位置都是固定的。代码如下：

<Canvas Height="Auto" Name="canvas1" ;Auto" Background="#FFF51919">

<Button Canvas.Left="10" Canvas.Top="41" Content="Button1" Height="23" Name="button1" ;75" />

<Button Canvas.Right="32" Canvas.Bottom="10" Content="Button2" Height="23" Name="button2" ;75" />

</Canvas>

如果用代码来添加Canvas子字符串，代码如下：

Button button = new Button();

button.Height = 30;

button.Width = 80;

button.Content = "确定";

Canvas.SetTop(sender as Button, 10);

Canvas.SetLeft(sender as Button, 20);

canvas1.Children.Add(button);

Grid是一个比较精细的布局面板，有行和列，通过行列的准备定位，可以合整个界面准确细致。Grid有两个子标签：Grid.ColumnDefintions和Grid.RowDefiniftions，用这两个子标签可以方便的定义出Gird有几行几列，定位后，就可以放子标签了，如Button，TextBox，就需要给这些子标签增加Grid.Column属性和Grid.Row属性，同时，子标签下还有两个属性Grid.ColumnSpan和Grid.RowSpan。如下例：

<Grid name="grid1" ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition ></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Button Grid.Column="1" Grid.Row="1" Height="30" ;40" HorizontalAlignment="Left" VerticalAlignment="Bottom">

</Button>

< &lt;TextBox Background="AntiqueWhite" Grid.RowSpan="2" Grid.Column="2" Grid.Row="1" />

</Grid>

同样，也可以用c#来实现：

ColumnDefinition cd1 = new ColumnDefinition();

ColumnDefinition cd2 = new ColumnDefinition();

ColumnDefinition cd3 = new ColumnDefinition();

grid1.ColumnDefinitions.Add(cd1);

grid1.ColumnDefinitions.Add(cd2);

grid1.ColumnDefinitions.Add(cd3);

RowDefinition rd1 = new RowDefinition();

RowDefinition rd2 = new RowDefinition();

RowDefinition rd3 = new RowDefinition();

grid1.RowDefinitions.Add(rd1);

grid1.RowDefinitions.Add(rd2);

grid1.RowDefinitions.Add(rd3);

TextBox tb = new TextBox();

tb.Text = "Demo";

tb.Height = 30;

Grid.SetColumn(tb, 1);

Grid.SetColumnSpan(tb, 2);//跨越两列

Grid.SetRow(tb, 1);

grid1.Children.Add(tb);

Grid行与列中的子元素的布局方式还是以照原来的布，比如对齐方式，所不一样的是，不是以窗体作为参照物了，而是以所在表格作为参照片来对齐。