バージョン

XamDataGrid のスタイル設定

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

このトピックの内容

前提条件

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

トピック 目的

このトピックでは、XamDataGrid コントロールをビューに追加してサンプルデータを生成するための基本的な手順を紹介します。

このリソース トピックは、 XamDataGrid コントロールのデータソースを使用したサンプル データの実装を提供します。

行のスタイル設定

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

XamDataGrid のスタイル設定の動作 プロパティ 詳細

HeaderHeight

ヘッダー行の高さを設定できます。この行には、XamDataGrid コントロールに存在するすべての列ヘッダーが含まれます。

RowHeight

XamDataGrid コントロール内のすべての行の高さを設定できます。

RowSeparatorHeight

各行の間に存在するセパレーター バーの高さを設定できます。

RowSeparatorStyle

RowSeparator インスタンスへの正確な参照を取得する、またはXamDataGrid コントロールが使用する独自のインスタンスを提供することによって、それらの任意の外観プロパティを変更できます。

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

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

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;
  1. アプリケーションを保存して実行し、外観の変化を確認します。 RowSeparator は、背景が青、高さが 5 ピクセルで表示されます。

Styling the DataGridView 2.png

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

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

ヘッダーのスタイル設定の動作 プロパティ 詳細

Height

ヘッダー行の高さを設定できます。この行には、XamDataGrid コントロールに存在するすべての列ヘッダーが含まれます。

BackgroundColor

列のヘッダー要素の背景色を設定できます。

FontFamily

列のヘッダーで使用されるフォント ファミリを指定できます。

FontSize

列のヘッダーで使用されるテキストのポイント サイズを設定できます。

FontStyle

列のヘッダー内のテキストで使用されるフォントのスタイル属性を指定できます。

HorizontalAlignment

列のヘッダー内のテキストの配置を水平プレインに沿って設定できます。

VerticalAlignment

列のヘッダー内のテキストの配置を垂直プレインに沿って設定できます。

TextColor

列のヘッダー内に含まれるテキストに、特定のブラシの色を割り当てることができます。

TextLineBreakMode

列のセル内に表示するテキストの長さを制御するために特定の TextCellLineBreakMode enum を使用できます。

TextPadding

列のヘッダー内に含まれるテキスト周りに特定のパディングを適用できます。

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

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

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);
  1. 以下のプロパティで 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;
  1. 次のスクリーンショットに示すように、アプリケーションを保存して実行し、結果を確認します。

Styling the DataGridView 3.png

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

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

列のスタイル設定の動作 プロパティ 詳細

コンテンツ不透明度

列のセル内のコンテンツ(テキストおよび画像を含む)の透明度を調整できます。

Width

列の幅を調整できます。

Background

列内のセルの塗りつぶしに使用する特定の色を設定できます。

SelectedBackground

列が選択された場合に、列内のセルの特定の色を設定できます。

FontFamily

列のセルのテキストで使用される FontFamily を指定できます。

FontSize

列のセルで使用されるフォントのポイント サイズを設定できます。

FontStyle

列のセル内のテキストで使用されるフォントのスタイル属性を指定できます。

HorizontalAlignment

列のセル内のテキストの配置を水平プレインに沿って設定できます。

VerticalAlignment

列のセル内のテキストの配置を垂直プレインに沿って設定できます。

TextColor

列のセル内に含まれるテキストに、特定のブラシの色を割り当てることができます。

TextLineBreakMode

列のセル内に表示するテキストの長さを制御するために特定の TextCellLineBreakMode enum を使用できます。

TextPadding

列のセル内に含まれるテキスト周りに特定のパディングを適用できます。

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

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

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

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);
  1. 次のプロパティを設定して、nameColumn の Column ヘッダーのスタイルを変更します。

    • 背景色 - 灰色

    • テキスト色 - 白色

    • フォント スタイル - 太字

    • フォント サイズ - 15

C# の場合:

nameColumn.FontSize = 15;
nameColumn.FontAttributes = FontAttributes.Bold;
nameColumn.Background = new SolidColorBrush(Color.Gray);
nameColumn.TextColor = new SolidColorBrush(Color.White);
  1. 結果を確認するために、SampleGridApp を保存し実行します。

Styling the DataGridView 4.png

関連トピック

以下の表は、このトピックに関連するトピックを示します。

トピック 目的

このトピックでは、XamDataGrid コントロールでサポートされる列タイプの情報を提供します。

このトピックでは、XamDataGrid コントロールで列を使用する際のコード例を提供します。