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行与列中的子元素的布局方式仍是以照原来的布，好比对齐方式，所不同的是，不是以窗体做为参照物了，而是以所在表格做为参照片来对齐。