[Xuni:FlexGrid] データグリッドの列幅を比率で指定する方法 (Xamarin.Forms)
対象製品
Xuni
詳細
FlexGridが表示するエリア全体の幅に対し、各列を表示する幅を各列の比率で設定することができます。
設定時に「*(アスタリスク)」を使用することから、スターサイズ機能と呼びます。
この指定を行うとデータグリッドを表示する際に、FlexGridが適切な列幅を自動計算して描画します。
そのため、画面を回転させた場合でも各列の比率に基づいて列幅が調整されます。
下図は4つの列に対して設定した例です。
サンプルコード
XAML(Xamarin.Forms)
C#(Xamarin.Forms)
Xuni > 技術情報 > ドキュメント > FlexGrid-機能-スターサイズ指定
参考情報
こちらの技術記事とサンプルでも、この機能を利用しています。
ComponentOne Information >
「Web APIで取得したオープンデータを一覧表示するXamarin.FormsアプリのUIを作成」
設定時に「*(アスタリスク)」を使用することから、スターサイズ機能と呼びます。
この指定を行うとデータグリッドを表示する際に、FlexGridが適切な列幅を自動計算して描画します。
そのため、画面を回転させた場合でも各列の比率に基づいて列幅が調整されます。
下図は4つの列に対して設定した例です。
サンプルコード
XAML(Xamarin.Forms)
<!--// 列幅を比率で指定するスターサイズ機能 --> <xuni:FlexGrid x:Name="grid" AutoGenerateColumns="False"> <xuni:FlexGrid.Columns> <xuni:GridColumn Binding="Postal7" Width="*"/> <xuni:GridColumn Binding="Pref" Width="1.5*"/> <xuni:GridColumn Binding="City" Width="1.5*"/> <xuni:GridColumn Binding="Town" Width="2*" /> </xuni:FlexGrid.Columns> </xuni:FlexGrid>
C#(Xamarin.Forms)
// 列幅を比率で指定するスターサイズ機能 grid.Columns[2].Width = new GridLength(1,GridUnitType.Star); grid.Columns[3].Width = new GridLength(1.5, GridUnitType.Star); grid.Columns[4].Width = new GridLength(1.5, GridUnitType.Star); grid.Columns[5].Width = new GridLength(2, GridUnitType.Star);
Xuni > 技術情報 > ドキュメント > FlexGrid-機能-スターサイズ指定
参考情報
こちらの技術記事とサンプルでも、この機能を利用しています。
ComponentOne Information >
「Web APIで取得したオープンデータを一覧表示するXamarin.FormsアプリのUIを作成」