このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

XamDataGrid のスタイル設定

このトピックでは、テキストおよび XamDataGrid コントロールに関連付けられた要素のスタイル設定に必要な基本手順を説明し、XamDataGrid コントロールの外観のカスタマイズを通して、ユーザーができるだけ早く操作に慣れることができるようにします。

このトピックの内容

このトピックには、以下のセクションがあります。

前提条件
行のスタイル設定
列ヘッダーのスタイル設定
列コンテンツのスタイル設定
関連トピック

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック	目的
XamDataGrid を使用した作業の開始	このトピックでは、XamDataGrid コントロールをビューに追加してサンプルデータを生成するための基本的な手順を紹介します。
営業担当者サンプル	このリソーストピックは、 XamDataGrid コントロールのデータソースを使用したサンプルデータの実装を提供します。

行のスタイル設定

XamDataGrid コントロールは、行要素のスタイル設定に関連した以下のプロパティを公開します。

XamDataGrid のスタイル設定の動作	プロパティ	詳細
HeaderHeight	HeaderHeight	ヘッダー行の高さを設定できます。この行には、XamDataGrid コントロールに存在するすべての列ヘッダーが含まれます。
RowHeight	DataGrid.RowHeight	XamDataGrid コントロール内のすべての行の高さを設定できます。
RowSeparatorHeight	DataGrid.RowSeparatorHeight	各行の間に存在するセパレーターバーの高さを設定できます。
RowSeparatorStyle	DataGrid.RowSeparator	RowSeparator インスタンスへの正確な参照を取得する、またはXamDataGrid コントロールが使用する独自のインスタンスを提供することによって、それらの任意の外観プロパティを変更できます。

次の例では、すべてのスタイル動作を変更して、XamDataGrid コントロールの上位外観をカスタマイズする方法を順を追って説明します。

次のコードスニペットをメインコードファイルに追加します。

XAML の場合:

<ig:XamDataGrid RowSeparatorHeight="4"
                RowHeight="50">
    <ig:XamDataGrid.RowSeparator>
        <ig:RowSeparator Background="Blue"/>
    </ig:XamDataGrid.RowSeparator>
</ig:XamDataGrid>

C# の場合:

DataGrid.RowSeparator = new RowSeparator();
DataGrid.RowSeparator.Background = new SolidColorBrush(Color.Blue);
DataGrid.RowSeparatorHeight = 5;
DataGrid.RowHeight = 50;

アプリケーションを保存して実行し、外観の変化を確認します。 RowSeparator は、背景が青、高さが 5 ピクセルで表示されます。

列ヘッダーのスタイル設定

XamDataGrid コントロールのヘッダーオブジェクトは、そのヘッダーとテキストの外観を変更するメソッドを複数公開します。

ヘッダーのスタイル設定の動作	プロパティ	詳細
Height	DataGrid.HeaderHeight	ヘッダー行の高さを設定できます。この行には、XamDataGrid コントロールに存在するすべての列ヘッダーが含まれます。
BackgroundColor	Header.Background	列のヘッダー要素の背景色を設定できます。
FontFamily	Header.FontFamily	列のヘッダーで使用されるフォントファミリを指定できます。
FontSize	Header.FontSize	列のヘッダーで使用されるテキストのポイントサイズを設定できます。
FontStyle	Header.FontAttributes	列のヘッダー内のテキストで使用されるフォントのスタイル属性を指定できます。
HorizontalAlignment	Header.HorizontalAlignment	列のヘッダー内のテキストの配置を水平プレインに沿って設定できます。
VerticalAlignment	Header.VerticalAlignment	列のヘッダー内のテキストの配置を垂直プレインに沿って設定できます。
TextColor	Header.TextColor	列のヘッダー内に含まれるテキストに、特定のブラシの色を割り当てることができます。
TextLineBreakMode	Header.LineBreakMode	列のセル内に表示するテキストの長さを制御するために特定の TextCellLineBreakMode enum を使用できます。
TextPadding	Header.PaddingBottom Header.PaddingLeft Header.PaddingRight Header.PaddingTop	列のヘッダー内に含まれるテキスト周りに特定のパディングを適用できます。

次の例では、ヘッダー要素とヘッダーのテキストにいくつかの外観メソッドを使用して、XamDataGrid コントロールの Column ヘッダーの外観をカスタマイズする基本的なシナリオを順を追って説明します。

次のコードスニペットをメインコードファイルに追加します。

C# の場合:

TextColumn nameColumn = new TextColumn();
nameColumn.PropertyPath = "FirstName";
nameColumn.HeaderText = "FirstName";

NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
salesColumn.HeaderText = "Sales";

TextColumn territoryColumn = new TextColumn();
territoryColumn.PropertyPath = "Territory";
territoryColumn.HeaderText = "Territory";

DataGrid.Columns.Add(nameColumn);
DataGrid.Columns.Add(salesColumn);
DataGrid.Columns.Add(territoryColumn);

以下のプロパティで TextHeader クラスのインスタンスを作成します。

C# の場合:

var header = new TextHeader();
header.Background = new SolidColorBrush(Color.Red);
header.TextColor = new SolidColorBrush(Color.White);
header.FontSize = 15;
nameColumn.Header = header;

または、nameColumn を表す Header オブジェクトの正確なインスタンスを取得し、そのインスタンスを直接編集することもできます。この方法を使用すると、すべてのプロパティ変更が、XamDataGrid コントロールの UI すべてに伝播されます。次のコードで、この方法を説明します。

C# の場合:

var header = nameColumn.Header;
header.Background = new SolidColorBrush(Color.Red);
header.TextColor = new SolidColorBrush(Color.White);
header.FontSize = 15;

次のスクリーンショットに示すように、アプリケーションを保存して実行し、結果を確認します。

列コンテンツのスタイル設定

Column オブジェクトは、列の幅、テキストの配置、およびテキストの外観など、集計内に含まれるセルの視覚的コンポーネントを変更するためのメソッドを複数公開します。

列のスタイル設定の動作	プロパティ	詳細
コンテンツ不透明度	Column.ContentOpacity	列のセル内のコンテンツ（テキストおよび画像を含む）の透明度を調整できます。
Width	Column.Width	列の幅を調整できます。
Background	Column.Background	列内のセルの塗りつぶしに使用する特定の色を設定できます。
SelectedBackground	Column.SelectedBackground	列が選択された場合に、列内のセルの特定の色を設定できます。
FontFamily	Column.FontFamily	列のセルのテキストで使用される FontFamily を指定できます。
FontSize	Column.FontSize	列のセルで使用されるフォントのポイントサイズを設定できます。
FontStyle	Column.FontAttributes	列のセル内のテキストで使用されるフォントのスタイル属性を指定できます。
HorizontalAlignment	Column.HorizontalAlignment	列のセル内のテキストの配置を水平プレインに沿って設定できます。
VerticalAlignment	Column.VerticalAlignment	列のセル内のテキストの配置を垂直プレインに沿って設定できます。
TextColor	Column.TextColor	列のセル内に含まれるテキストに、特定のブラシの色を割り当てることができます。
TextLineBreakMode	Column.LineBreakMode	列のセル内に表示するテキストの長さを制御するために特定の TextCellLineBreakMode enum を使用できます。
TextPadding	Column.PaddingBottom Column.PaddingLeft Column.PaddingRight Column.PaddingTop	列のセル内に含まれるテキスト周りに特定のパディングを適用できます。

この例では、列要素の XamDataGrid 内の列の外観と、列に関連するセル内のコンテンツをカスタマイズする方法を順を追って説明します。

この例は、列の作業のトピックで説明する SampleGridApp プロジェクトを作成済みであることが前提です。

次のコードスニペットをメインコードファイルに追加します。

C# の場合:

TextColumn nameColumn = new TextColumn();
nameColumn.PropertyPath = "FirstName";
nameColumn.HeaderText = "FirstName";

NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
salesColumn.HeaderText = "Sales";

TextColumn territoryColumn = new TextColumn();
territoryColumn.PropertyPath = "Territory";
territoryColumn.HeaderText = "Territory";

DataGrid.Columns.Add(nameColumn);
DataGrid.Columns.Add(salesColumn);
DataGrid.Columns.Add(territoryColumn);

次のプロパティを設定して、nameColumn の Column ヘッダーのスタイルを変更します。
- 背景色 - 灰色
- テキスト色 - 白色
- フォントスタイル - 太字
- フォントサイズ - 15

C# の場合:

nameColumn.FontSize = 15;
nameColumn.FontAttributes = FontAttributes.Bold;
nameColumn.Background = new SolidColorBrush(Color.Gray);
nameColumn.TextColor = new SolidColorBrush(Color.White);

結果を確認するために、SampleGridApp を保存し実行します。

トピック	目的
サポートされる列タイプ	このトピックでは、XamDataGrid コントロールでサポートされる列タイプの情報を提供します。
列の作業	このトピックでは、XamDataGrid コントロールで列を使用する際のコード例を提供します。

Xamarin | ヘルプ トピック

XamDataGrid のスタイル設定

このトピックの内容

前提条件

行のスタイル設定

列ヘッダーのスタイル設定

列コンテンツのスタイル設定

関連トピック

Xamarin | ヘルプトピック