第 17 章的摘要。 掌控格線

  • 發行項

注意

這本書於2016年春季出版，此後一直沒有更新。 這本書中有很多仍然有價值，但一些材料已經過時，有些主題不再完全正確或完整。

Grid是一種功能強大的配置機制，可將其子系排列成單元格的數據列和數據行。 與類似的 HTML table 元素不同， Grid 僅供版面配置而非呈現之用。

基本方格

Grid 衍生自 Layout<View>，其定義 Children 繼承的屬性 Grid 。 您可以在 XAML 或程式碼中填入此集合。

XAML 中的方格

XAML 中的 定義Grid通常以填滿 RowDefinitions 和物件的 和 ColumnDefinitionsColumnDefinition 集合GridRowDefinition開始。 這就是您建立的數據列和數據 Grid行數目的方式，以及其屬性。

RowDefinitionHeight具有 屬性，而且ColumnDefinition具有 屬性，這兩種Width類型GridLength都是 結構。

在 XAML 中，會將 GridLengthTypeConverter 簡單的文字字串轉換成 GridLength 值。 在幕後，建GridLength構函式會根據數位和型GridUnitType別的值來建立GridLength值，而列舉具有三個成員：

  • Absolute — 寬度或高度是以裝置無關的單位指定（XAML 中的數位）
  • Auto — 高度或寬度會根據儲存格內容自動重設大小（XAML 中的「自動」）
  • Star — 剩餘的高度或寬度會按比例設定（在 XAML 中使用 “*” 的數位，稱為 星形）

的每個子 Grid 系也必須指派一個數據列和數據行（明確或隱含）。 數據列範圍和數據行範圍是選擇性的。 這些都是使用附加的可系結屬性所指定， 屬性是由 所 Grid 定義，但在的 Grid子系上設定。 Grid 定義四個靜態附加可系結屬性：

在程式代碼中，程式可以使用八個靜態方法來設定並取得這些值：

在 XAML 中，您會使用下列屬性來設定這些值：

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

SimpleGridDemo 範例示範如何在 XAML 中建立和初始化 Grid 。

會Grid從 Layout 繼承 屬性，Padding並定義兩個額外的屬性，以提供數據列和數據行之間的間距：

RowDefinitions和 ColumnDefinitions 集合並非絕對必要。 如果不存在，則會 Grid 為 Grid 子系建立數據列和數據行，並將它們全部 GridLength 設為 “*” （star）。

程序代碼中的方格

GridCodeDemo 範例示範如何在程式碼中建立和填入 Grid 。 您可以呼叫 Grid.IGridList<T> 介面所Add定義的其他Add方法，直接或間接設定每個子系的附加屬性。

網格線條形圖

GridBarChart 範例示範如何使用 bulk AddHorizontal 方法，將多個BoxView元素新增至 Grid 。 根據預設，這些 BoxView 元素的寬度相等。 然後可以控制每個 BoxView 的高度，以類似條形圖。

Grid GridBarChart 範例中的 共用AbsoluteLayout父系與初始不可見 Frame的 。 程式也會在每個 上BoxView設定 TapGestureRecognizer ，以使用 Frame 來顯示點選列的相關信息。

網格線中的對齊方式

GridAlignment 範例示範如何使用 VerticalOptions 和 HorizontalOptions 屬性來對齊單元格中的Grid子系。

SpacingButtons 範例會以單元格置中Grid對齊的等空格Button元素。

單元格分隔線和框線

Grid不包含繪製單元格分隔線或框線的功能。 不過，您可以自行製作。

GridCellDividers 示範如何特別定義額外的數據列和數據行，讓精簡BoxView元素模擬分割線。

GridCellBorders 程式不會建立任何其他儲存格，而是會對齊BoxView每個儲存格中的元素來模擬儲存格框線。

幾乎現實生活中的網格線範例

KeypadGrid 範例會使用 Grid 來顯示鍵盤：

Keypad Grid 的三重螢幕快照

回應方向變更

Grid可協助建構程式以回應方向變更。 GridRgbSliders 範例會示範一種技術，該技術會在直向手機的第二列與橫向手機的第二欄之間移動元素。

程式會將 Slider 專案初始化為 0 到 255 的範圍，並使用數據系結以十六進位顯示滑桿的值。 Slider因為值是浮點數，而十六進位的 .NET 格式字串只適用於整數，Book.Toolkit 連結庫中的DoubleToIntConvertXamarin.Forms類別有助於解決。