WPF教程（三十二）使用Grid：一個聯繫人表格

在前面幾章，我們學習了很多理論知識，用到了很多理論上的例子。在這一章，將把我們在前面所學到的東西運用到一個實際的例子當中：一個簡單的聯繫人表格。

這個聯繫人表格的好處是它只是普遍使用的一個對話框，你可以將用到的技術用到幾乎任何你想要創建的對話框裏。

第一個要測試的東西非常簡單，是一個基本的聯繫人表格。總共使用三行，兩行自動高度，最後一行使用*號高度，它佔據剩餘的可用空間。

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                </Grid.RowDefinitions>          
                <TextBox>Name</TextBox>
                <TextBox Grid.Row="1">E-mail</TextBox>
                <TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>            
        </Grid>
</Window>

如上所示，最後一個TextBox佔據了剩餘空間，前兩個只佔據它們所需要的空間。嘗試拖拉窗口，你會發現comment文本框會跟隨窗口改變。

上面這個簡單的例子裏，並沒有指定每個文本框用來幹什麼。相反，文本框裏顯示了一些說明性的文字，這並不是一個Windows對話框該有的樣子。我們嘗試來改善外觀和實用性：

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
        <Grid Margin="10">
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label>Name: </Label>
                <TextBox Grid.Column="1" Margin="0,0,0,10" />
                <Label Grid.Row="1">E-mail: </Label>
                <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
                <Label Grid.Row="2">Comment: </Label>
                <TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
        </Grid>
</Window>

但是，說明字段有時候是很明顯的，無需再加說明兩個字。那麼我們跳過標籤，而使用ColumnSpan來得到更多的說明文本框空間：

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

以上展示了Grid面板強大的功能。希望你在設計對話框的時候能用上這裏所學的全部技術。