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行與列中的子元素的佈局方式仍是以照原來的布，好比對齊方式，所不同的是，不是以窗體做爲參照物了，而是以所在表格做爲參照片來對齊。