Xamarin.Forms 網格線教學課程

在嘗試此教學課程之前，您應該已成功完成：

建置您的第一個 Xamarin.Forms 應用程式快速入門。

在本教學課程中，您會了解如何：

在 XAML 中建立 Xamarin.FormsGrid 。
指定 Grid 的資料行和資料列。
橫跨 Grid 中多個資料行或多個資料列的內容。

您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何在 Grid 內配置控制項的簡單應用程式。下列螢幕擷取畫面顯示的是最終的應用程式：

您也會使用 XAML 熱重新載入 Xamarin.Forms 來查看 UI 變更，而不需重建應用程式。

建立方格

剩餘 8 分鐘

Grid 是一種配置，可將其子系組織成有相稱或絕對大小的資料列和資料行。根據預設，一個 Grid 包含一個資料列和一個資料行。

Visual Studio
Visual Studio for Mac

若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。

啟動 Visual Studio，並建立名為 GridTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段，要求將解決方案命名為 GridTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [方案總管] 的 GridTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 Grid 中的 Label。根據預設，Grid 會將其子檢視放在單一位置中。因此，包含多個子系的 Grid 應該指定資料行和資料列，下一個練習會有相關說明。此外，Margin 屬性會指出 ContentPage 在 Grid 之中的呈現位置。

注意

除了 Margin 屬性之外，Padding 屬性也可在 Grid 上設定。 Padding 屬性值會指定 Grid 界限及其子系之間的距離。如需詳細資訊，請參閱邊界和邊框距離。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 遠端模擬器或 Android 模擬器內的應用程式：

如需的詳細資訊 Grid，請參閱 Xamarin.Forms 方格。

若要完成本教學課程，您應該具備 Visual Studio for Mac (最新版本)，並已安裝 iOS 和 Android 平台支援。此外，您還需要 Xcode (最新版本)。如需安裝 Xamarin 平台的詳細資訊，請參閱安裝 Xamarin。

啟動 Visual Studio for Mac，並建立名為 GridTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段，要求將解決方案命名為 GridTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [Solution Pad] 的 GridTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 Grid 中的 Label。根據預設，Grid 會將其子檢視放在單一位置中。因此，包含多個子系的 Grid 應該指定資料行和資料列，下一個練習會有相關說明。此外，Margin 屬性會指出 ContentPage 在 Grid 之中的呈現位置。

注意

除了 Margin 屬性之外，Padding 屬性也可在 Grid 上設定。 Padding 屬性值會在 Grid 中指定檢視之間的距離。如需詳細資訊，請參閱邊界和邊框距離。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

如需的詳細資訊 Grid，請參閱 Xamarin.Forms 方格。

指定資料行和資料列

剩餘 6 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，修改 Grid 宣告以定義資料行和資料列，並在資料行和資料列中放置內容：
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
此程式碼會定義 Grid 的資料行和資料列，並將 Label 執行個體放置到特定資料行和資料列中。資料行和資料列資料會儲存在 ColumnDefinitions 和 RowDefinitions 屬性中，其分別是 ColumnDefinition 和 RowDefinition 物件的集合。每個 ColumnDefinition 的寬度都是由 ColumnDefinition.Width 屬性設定，而每個 RowDefinition 的高度則是由 RowDefinition.Height 屬性設定。有效的寬度和高度值為：
- Auto，可將資料行或資料列的大小調整為適合內容。
- 比例值，可將資料行和資料列的大小調整為剩餘空間的比例。比例值會以結尾是 * 來表示。
- 絕對值，可以特定的固定值調整資料行或資料列的大小。
因此在上述程式碼中，每個資料行的寬度都是 Grid 的一半，而每個資料列的高度均為 50 個裝置獨立單位。

Grid 中每個 Label 的位置都是以 Grid.Column 和 Grid.Row 附加屬性指定，並使用以零為起始的索引。因此，第一個資料行是資料行 0，而第一個資料列是資料列 0。第一個 Label 缺少這些附加屬性，因為未設定這些屬性的所有子檢視都會自動呈現於資料行 0、資料列 0。

注意

您可使用 ColumnSpacing 和 RowSpacing 屬性設定 Grid 中資料行與資料列之間的間距。如需詳細資訊，請參閱網格線指南中的Xamarin.Forms間距。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：

在 MainPage.xaml 中，修改 Grid 宣告以定義資料行和資料列，並在資料行和資料列中放置內容：
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
此程式碼會定義 Grid 的資料行和資料列，並將 Label 執行個體放置到特定資料行和資料列中。資料行和資料列資料會儲存在 ColumnDefinitions 和 RowDefinitions 屬性中，其分別是 ColumnDefinition 和 RowDefinition 物件的集合。每個 ColumnDefinition 的寬度都是由 ColumnDefinition.Width 屬性設定，而每個 RowDefinition 的高度則是由 RowDefinition.Height 屬性設定。有效的寬度和高度值為：
- Auto，可將資料行或資料列的大小調整為適合內容。
- 比例值，可將資料行和資料列的大小調整為剩餘空間的比例。比例值會以結尾是 * 來表示。
- 絕對值，可以特定的固定值調整資料行或資料列的大小。
因此在上述程式碼中，每個資料行的寬度都是 Grid 的一半，而每個資料列的高度均為 50 個裝置獨立單位。

Grid 中每個 Label 的位置都是以 Grid.Column 和 Grid.Row 附加屬性指定，並使用以零為起始的索引。因此，第一個資料行是資料行 0，而第一個資料列是資料列 0。第一個 Label 缺少這些附加屬性，因為未設定這些屬性的所有子檢視都會自動呈現於資料行 0、資料列 0。

注意

您可使用 ColumnSpacing 和 RowSpacing 屬性設定 Grid 中資料行與資料列之間的間距。如需詳細資訊，請參閱網格線指南中的Xamarin.Forms間距。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

橫跨多個資料行或資料列

剩餘 2 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Grid 宣告，以定義資料行和資料列，並放置跨越資料行和資料列的內容：

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

此程式碼會定義 Grid 的資料行和資料列，並將 Label 執行個體放置到特定資料行和資料列中。第一個 Label 會設定 ColumnSpan 附加屬性，使其文字跨越多個資料行。 ColumnSpan 屬性會設定為 2，這表示 Label 將會跨越的資料行數目。第二個 Label 會設定 RowSpan 附加屬性，使其文字跨越多個資料列。 RowSpan 屬性會設定為 2，這表示 Label 將會跨越的資料列數目。

如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選 iOS 遠端模擬器或 Android 模擬器內的應用程式：

在 Visual Studio 中，停止應用程式。

如需跨越數據行和數據列的詳細資訊，請參閱方格指南中的數據Xamarin.Forms列和數據行。

在 MainPage.xaml 中修改 Grid 宣告，以定義資料行和資料列，並放置跨越資料行和資料列的內容：

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

此程式碼會定義 Grid 的資料行和資料列，並將 Label 執行個體放置到特定資料行和資料列中。第一個 Label 會設定 ColumnSpan 附加屬性，使其文字跨越多個資料行。 ColumnSpan 屬性會設定為 2，這表示 Label 將會跨越的資料行數目。第二個 Label 會設定 RowSpan 附加屬性，使其文字跨越多個資料列。 RowSpan 屬性會設定為 2，這表示 Label 將會跨越的資料列數目。

如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

在 Visual Studio for Mac 中，停止應用程式。

如需跨越數據行和數據列的詳細資訊，請參閱方格指南中的數據Xamarin.Forms列和數據行。

恭喜！

100% 完成！

恭喜您完成此教學課程，您已學會如何：

在 XAML 中建立 Xamarin.FormsGrid 。
指定 Grid 的資料行和資料列。
橫跨 Grid 中多個資料行或多個資料列的內容。

下一步

若要深入瞭解使用建立行動應用程式 Xamarin.Forms的基本概念，請繼續進行 CollectionView 教學課程。

ListView 教學課程

共用方式為

建立方格

指定資料行和資料列

橫跨多個資料行或資料列

恭喜！

下一步

相關連結