注意
這本書於2016年春季出版,此後一直沒有更新。 這本書中有很多仍然有價值,但一些材料已經過時,有些主題不再完全正確或完整。
Grid是一種功能強大的配置機制,可將其子系排列成單元格的數據列和數據行。 與類似的 HTML table 元素不同, Grid 僅供版面配置而非呈現之用。
基本方格
Grid 衍生自 Layout<View>,其定義 Children 繼承的屬性 Grid 。 您可以在 XAML 或程式碼中填入此集合。
XAML 中的方格
XAML 中的 定義Grid通常以填滿 RowDefinitions 和物件的 和 ColumnDefinitions ColumnDefinition 集合GridRowDefinition開始。 這就是您建立的數據列和數據 Grid行數目的方式,以及其屬性。
RowDefinitionHeight具有 屬性,而且ColumnDefinition具有 屬性,這兩種Width類型GridLength都是 結構。
在 XAML 中,會將 GridLengthTypeConverter 簡單的文字字串轉換成 GridLength 值。 在幕後,建GridLength構函式會根據數位和型GridUnitType別的值來建立GridLength值,而列舉具有三個成員:
Absolute— 寬度或高度是以裝置無關的單位指定(XAML 中的數位)Auto— 高度或寬度會根據儲存格內容自動重設大小(XAML 中的「自動」)Star— 剩餘的高度或寬度會按比例設定(在 XAML 中使用 “*” 的數位,稱為 星形)
的每個子 Grid 系也必須指派一個數據列和數據行(明確或隱含)。 數據列範圍和數據行範圍是選擇性的。 這些都是使用附加的可系結屬性所指定, 屬性是由 所 Grid 定義,但在的 Grid子系上設定。 Grid 定義四個靜態附加可系結屬性:
RowProperty— 以零起始的數據列;預設值為 0ColumnProperty— 以零起始的數據行;預設值為 0RowSpanProperty— 子範圍的數據列數目;預設值為 1ColumnSpanProperty— 子範圍的數據行數目;預設值為 1
在程式代碼中,程式可以使用八個靜態方法來設定並取得這些值:
Grid.SetRow和Grid.GetRowGrid.SetColumn和Grid.GetColumnGrid.SetRowSpan和Grid.GetRowSpanGrid.SetColumnSpan和Grid.GetColumnSpan
在 XAML 中,您會使用下列屬性來設定這些值:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
SimpleGridDemo 範例示範如何在 XAML 中建立和初始化 Grid 。
會Grid從 Layout 繼承 屬性,Padding並定義兩個額外的屬性,以提供數據列和數據行之間的間距:
RowSpacing預設值為 6ColumnSpacing預設值為 6
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 來顯示鍵盤:
回應方向變更
Grid可協助建構程式以回應方向變更。 GridRgbSliders 範例會示範一種技術,該技術會在直向手機的第二列與橫向手機的第二欄之間移動元素。
程式會將 Slider 專案初始化為 0 到 255 的範圍,並使用數據系結以十六進位顯示滑桿的值。 Slider因為值是浮點數,而十六進位的 .NET 格式字串只適用於整數,Book.Toolkit 連結庫中的DoubleToIntConvertXamarin.Forms類別有助於解決。
