WPF 面板 - Grid

Grid是很常見的容器(container), 它可以用來作UI layout, 它的功能類似HTML中的Table,可定義表格的直行與橫列.

如果你想要製定一個3x3的表格(三直行+三橫列), 寫法如下面程式碼(XAML檔和C#)所示:

XAML:

<Grid ShowGridLines="True" Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>

C#

public GridWindow()
{
InitializeComponent();

Grid grid1 = new Grid();
grid1.ShowGridLines = true;

for (int i = 0; i < 3; i++)
{
ColumnDefinition colDef = new ColumnDefinition();
RowDefinition rowDef = new RowDefinition();

grid1.ColumnDefinitions.Add(colDef);
grid1.RowDefinitions.Add(rowDef);
}

this.AddChild(grid1);
}

在此範例中, 我們可以讓ShowGridLines = true以顯示格子之間的線, 方便作Debug用.

[圖 1] 3X3 Grid


GridUnitType可用來設定尺寸單位的類型, 你可以搭配GridLength()來指定指定行和列的大小,其成員如下:

• Pixel - 固定大小

example:
RowDefinition rowDef = new RowDefinition();
rowDef.Height = new GridLength(50, GridUnitType.Pixel)

• Auto - 根據Content(內容)來設定大小

example:
RowDefinition rowDef = new RowDefinition();
rowDef.Height = GridLength.Auto;

• Star - 分攤剩下的空間

example:
RowDefinition rowDef = new RowDefinition();
rowDef.Height = new GridLength(33, GridUnitType.Star) ;

如果你想要把控制項塞到Grid裡面, 可以使用SetRow和SetColumn方法, 指定row和column的index(從0開始), 來表式控制項擺放的位置.

example:
Grid.SetRow(control, 1);
Grid.SetColumn(control, 2);

你也可以使用SetRowSpan和SetColumn的方法, 指定要跨列和行的個數.

example:
Grid.SetRowSpan(control, 3);
Grid.SetColumnSpan(control, 3);


下面的範例, 我們將示範如何將控制項放入3X3的Grid 中, 然後適當調整Grid行和列的大小, 畫面如下所示:


[圖 2] Number Grid

在Grid的第一列中, 我們會放一個內容為"Number Grid"的TextBox, 此TextBox會橫跨3行, 列的高度會設為Auto.

然後, 我們在Grid其他的cell中各填入一個數字Button, 其程式碼如下所示:


XAML

<Grid Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<TextBox Name="txbBox"
FontSize="25"
Background="BurlyWood"
Foreground="DarkGreen"
Text="Number Grid"

HorizontalContentAlignment
="Center"

Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3">
</TextBox>

<Button
FontSize="30"
Name="button1"
Grid.Row="1"
Grid.Column="0">1
</Button>

<Button
FontSize="30"
Name="button2"
Grid.Row="1"
Grid.Column="1">2
</Button>

<Button
FontSize="30"
Name="button3"
Grid.Row="1"
Grid.Column="2">3
</Button>

<Button
FontSize="30"
Name="button4"
Grid.Row="2"
Grid.Column="0">4
</Button>

<Button
FontSize="30"
Name="button5"
Grid.Row="2"
Grid.Column="1">5
</Button>

<Button
FontSize="30"
Name="button6"
Grid.Row="2"
Grid.Column="2">6
</Button>
</Grid>

C#

public GridWindow()
{
InitializeComponent();

Grid grid1 = new Grid();

for (int i = 0; i < 3; i++)
{                 
RowDefinition rowDef =
new RowDefinition();

ColumnDefinition colDef =
new ColumnDefinition();

if( i == 0)
rowDef.Height = GridLength.Auto;
else
rowDef.Height =
new GridLength(1, GridUnitType.Star);

grid1.ColumnDefinitions.Add(colDef);
grid1.RowDefinitions.Add(rowDef);
}

this.AddChild(grid1);


// Add a TexBox
TextBox txbBox = new TextBox();
txbBox.FontSize = 25;
txbBox.Background = Brushes.BurlyWood;
txbBox.Foreground = Brushes.DarkGreen;
txbBox.Text = "Number Grid";

txbBox.HorizontalContentAlignment =
HorizontalAlignment.Center;

grid1.Children.Add(txbBox);
Grid.SetRow(txbBox, 0);
Grid.SetColumn(txbBox , 0);
Grid.SetColumnSpan(txbBox, 3);

// Add button1
Button button1 = new Button();
button1.FontSize = 30;
button1.Content = "1";
grid1.Children.Add(button1);
Grid.SetRow(button1, 1);
Grid.SetColumn(button1, 0);

// Add button2
Button button2 = new Button();
button2.FontSize = 30;
button2.Content = "2";
grid1.Children.Add(button2);
Grid.SetRow(button2, 1);
Grid.SetColumn(button2, 1);

// Add button3
Button button3 = new Button();
button3.FontSize = 30;
button3.Content = "3";
grid1.Children.Add(button3);
Grid.SetRow(button3, 1);
Grid.SetColumn(button3, 2);


// Add button4
Button button4 = new Button();
button4.FontSize = 30;
button4.Content = "4";
grid1.Children.Add(button4);
Grid.SetRow(button4, 2);
Grid.SetColumn(button4, 0);

// Add button5
Button button5 = new Button();
button5.FontSize = 30;
button5.Content = "5";
grid1.Children.Add(button5);
Grid.SetRow(button5, 2);
Grid.SetColumn(button5, 1);

// Add button6
Button button6 = new Button();
button6.FontSize = 30;
button6.Content = "6";
grid1.Children.Add(button6);
Grid.SetRow(button6, 2);
Grid.SetColumn(button6, 2);
}

參考資料:
MSDN- Grid 類別
WPF Tutorial - Grid