このトピックでは、XamDataGrid コントロールが反転する際のレスポンシブ レイアウトの概念を解説します。
このトピックは、以下のセクションで構成されます。
レスポンシブ レイアウトを使用すると、たとえばデバイスを水平方向から垂直方向に回転した場合のように、水平画面のスペースが大幅に縮小する状態に対応できます。このような場合、すべての XamDataGrid 列が表示されるように維持すると、データの可読性を損ない、アプリケーションの審美性が低下することがあります。したがって、重要性が低い情報が表示されている列をビューから削除すると同時に、最も関連性の高いデータが含まれた列を継続して表示するようにします。
この動作は、主に 2 つ以上の ResponsiveState オブジェクトにより、表示を想定または維持する列を調整できます。各オブジェクトには、画面の最小幅と最大幅に基づいた特定の数値の範囲が関連付けられるため、XamDataGrid コントロールの範囲内では、画面の幅密度がどのように変化しても、動的に対応できます。
レスポンシブ レイアウトの概念については、次の図に示す基本的な回転レイアウトのシナリオがもっとも分かりやすいでしょう。
最初のスクリーンショットでは、XamDataGrid コントロールが水平方向に表示され、表示の 7 列 (First Name、Last Name、Territory、Productivity、Sales、Experience、Salary) が含まれます。
2 番目のスクリーンショットでは、垂直方向に回転されたデバイスで水平方向の画面領域が減少し、XamDataGrid コントロールの幅も大幅に縮小しています。すべての列が表示されたままで水平方向に圧縮された外観は、表示されたデータがユーザーにとって分かりにくくなるだけでなく、ユーザー エクスペリエンスの満足度も低下します。
ただし、レスポンシブ グリッド レイアウトでは、このシナリオは関連度の最も低い列 (Experience、Territory、Salary) をビューから削除することにより応答して、残りの列を新しくできたスペースに再配分します。
レスポンシブ レイアウト ビヘイビアを実装する前に、 XamDataGrid コントロールの ResponsiveState オブジェクトを定義するために後で使用されるアプリケーション プロジェクトを準備し、デバイスの画面のパラメーターを保存する必要があります。
Portable アプリケーション プロジェクトで、このコードを追加して、デバイスの画面のパラメーターを定義します。
C# の場合:
public partial class App : Application
{
static public int ScreenWidth;
static public int ScreenHeight;
static public float ScreenDensity = 1;
...
}.Droid アプリケーション プロジェクトで、このコードを追加して、デバイスの画面のパラメーターを保存します。
C# の場合:
public class MainActivity : FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
App.ScreenDensity = Resources.DisplayMetrics.Density;
App.ScreenWidth = Resources.DisplayMetrics.WidthPixels;
App.ScreenHeight = Resources.DisplayMetrics.HeightPixels;
...
}
}.iOS アプリケーション プロジェクトで、このコードを追加して、デバイスの画面のパラメーターを保存します。
C# の場合:
public partial class AppDelegate : FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
...
}
}アプリケーションを実行しているデバイスを回転すると、アプリケーション内で XamDataGrid コントロールが使用できる水平領域が大きく変化します。この例では、XamDataGrid コントロールでレスポンシブ レイアウトのデザイン パターンを実装するプロセスを通してウォークスルーを提供します。
メインビューでデバイスの表示領域の寸法データを格納する 4 つの int 型の変数を実装します。このデータは、デバイスの向きを判別するために使用されます。
C# の場合:
static int ContentWidth = (int)(App.ScreenWidth / App.ScreenDensity);
static int ContentHeight = (int)(App.ScreenHeight / App.ScreenDensity);
static int ThresholdMax = Math.Max(ContentHeight, ContentWidth);
static int ThresholdMin = Math.Min(ContentHeight, ContentWidth);メインビューに XamDataGrid のインスタンスを作成します。
C# の場合:
var DataGrid = new XamDataGrid();
DataGrid.AutoGenerateColumns = true;
DataGrid.ItemsSource = SampleSalesPerson.GenerateSalesData(300);XAML の場合:
<ig:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="True">
<ig:XamDataGrid.ItemsSource>
<local:SampleSalesTeam />
</ig:XamDataGrid.ItemsSource>
</ig:XamDataGrid>以下のコードに示すように、ResponsivePhase オブジェクトを作成するヘルパー メソッドを追加します。
C# の場合:
private ResponsivePhase CreatePhase(string columnName, string propertyName, object value)
{
var setter = new ColumnPropertySetter()
{
ColumnName = columnName,
PropertyName = propertyName,
Value = value,
};
return new ResponsivePhase().AddColumnPropertySetter(setter);
}以下のコードスニペットでは、ResponsiveState クラスのインスタンスを作成し、ポートレートの向きで非表示にしない列を定義します。
C# の場合:
var state1 = new ResponsiveState();
state1.Name = "Landscape State";
state1.MaximumWidth = ThresholdMax;
state1.MinimumWidth = ThresholdMin + 1;
state1.AddResponsivePhase(CreatePhase("Salary", "IsHidden", false));
state1.AddResponsivePhase(CreatePhase("Territory", "IsHidden", false));
state1.AddResponsivePhase(CreatePhase("Experience", "IsHidden", false));次に以下のコードスニペットでは、ResponsiveState クラスの 2 番目のインスタンスを作成し、横長の向きで非表示にする列を定義します。
C# の場合:
var state2 = new ResponsiveState();
state2.Name = "Portrait State";
state2.MaximumWidth = ThresholdMin;
state2.MinimumWidth = 0;
state2.AddResponsivePhase(CreatePhase("Salary", "IsHidden", true));
state2.AddResponsivePhase(CreatePhase("Territory", "IsHidden", true));
state2.AddResponsivePhase(CreatePhase("Experience", "IsHidden", true));次のコード スニペットに示すように、XamDataGrid コントロールに両方の ResponsiveState オブジェクトを追加します。
C# の場合:
DataGrid.ResponsiveStates.Add(state1);
DataGrid.ResponsiveStates.Add(state2);アプリケーションを保存して実行し、XamDataGrid コントロールのレスポンシブ レイアウト ビヘイビアを確認します。
デバイスを水平方向にすると（ランドスケープ モードになると想定）、XamDataGrid コントロールは、7 つすべての列 (First Name、Last Name、Territory、Productivity、Sales、Experience、Salary) を表示します。
デバイスを水平方向から垂直方向に変えると（デバイスがポートレート モードになることと想定）、XamDataGrid コントロールはビューの Experience、Territory、および Salary 列を非表示にします。
以下の表は、このトピックに関連するトピックを示します。