[Xuni:FlexGrid] データ接続をしない表を作成する方法 (Xamarin.Forms)
対象製品
Xuni
詳細
FlexGridはデータソースに接続して、データを表形式に表示する用途で用いられますが、データ接続をしない表示(アンバウンドモード)にも対応しています。
FlexGridのオブジェクトに対して、行と列を個々に定義することで表示が可能になります。
以下のサンプルコードでは「かけざん九九」の表(ヘッダーを含み10行×10列)を作成し、各セルに九九を表示しています。
サンプルコード
C#(Xamarin.Forms)
実行結果
FlexGridのオブジェクトに対して、行と列を個々に定義することで表示が可能になります。
以下のサンプルコードでは「かけざん九九」の表(ヘッダーを含み10行×10列)を作成し、各セルに九九を表示しています。
サンプルコード
C#(Xamarin.Forms)
public partial class UnBound : ContentPage { // アンバウンドモードで「かけざん九九」の表を作る public UnBound () { InitializeComponent (); // 行、列ヘッダーをすべて表示 grid.HeadersVisibility = GridHeadersVisibility.All; // セル単位で選択するモード grid.SelectionMode = GridSelectionMode.Cell; // 行ヘッダー+9列の空白列を作成 for (int idx = 0; idx < 9 ; idx++){ GridColumn col = new GridColumn (); // 列ヘッダーに番号を設定 col.Header = (idx + 1).ToString (); col.HeaderHorizontalAlignment = LayoutAlignment.Center; col.HorizontalAlignment = LayoutAlignment.Center; col.Width = 60; col.WordWrap = true; // 列をグリッドに追加 grid.Columns.Add (col); } // データを設定する行を作成 for (int rowidx = 0; rowidx < 9; rowidx++) { GridRow row = new GridRow(); row.Height = 15; // 行をグリッドに追加 grid.Rows.Add (row); // 行ヘッダーに番号を設定 grid.SetCellValue (GridCellType.RowHeader, row.Index, 0, rowidx + 1); // 作成した行に値(行番号 × 列番号)を設定 for (int colidx = 0; colidx < 9; colidx++) { var cellvalue = String.Format( "{0} × {1} = {2}",(row.Index+1) , (colidx+1) ,((row.Index+1) * (colidx+1))); grid.SetCellValue (GridCellType.Cell, row.Index, colidx,(cellvalue)); } } // 左上角のセルに見出しを表示 grid.SetCellValue (GridCellType.TopLeft, 0, 0, "かけざん九九"); grid.AllowResizing = GridAllowResizing.Columns; }
実行結果