バージョン

WinGrid 列の外観変更

バックグラウンド

セルを色、画像またはユニークなプロパティで飾る必要がある場合、開発者は WinGrid により Appearance プロパティを列ヘッダと列のセル両方に設定できます。

質問

各列の背景色を設定するにはどうすればいいですか?

非アクティブのデフォルトの色を変更するにはどうすればいいですか?

列の背景画像を配置するはどうすればいいですか?

解決策

列 Appearance は次の 2 つの部分で構成されます。

Column Header Appearance

Column の .Header.Appearance オブジェクトを使って ColumnHeader の外観を操作します。

Cell Appearance

Column の .CellAppearance オブジェクトを使って列内のセルの外観を操作します。

列内の各セルに関連付けられた Appearance オブジェクトもあり、それにより各セルをカスタマイズすることができます。

"Column" として認識されるものの多くは実際には Column の Cells です。ですから列の外観として表示されるものの多くは、実際には列オブジェクトのセル外観プロパティです。

サンプル プロジェクト

このサンプル プロジェクトでは Column Appearance でできることのいくつかを紹介します。

コードの記述を開始する前にコード ビハインドに使用/インポートのディレクティブを配置します。そうすれば、メンバは完全に記述された名前を常に入力する必要がなくなります。

Visual Basic の場合：

Imports Infragistics.Win
Imports Infragistics.Win.UltraWinGrid

C# の場合：

using Infragistics.Win;
using Infragistics.Win.UltraWinGrid;
WinGrid Changing the Appearance of WinGrid Columns 01.png

UltraWinGrid イベント領域には次のイベント ハンドラーが含まれます:

  • UltraGrid1.InitializeLayout - InitializeLayout イベントのコードで列外観を設定します。列ヘッダの外観を変更できるようにするには、グリッドの .UseOsThemes プロパティをオフにするか、.Header.Appearance.ThemedElementAlpha = Alpha.Transparent プロパティをセットする必要があります。UseOsThemes をオフにするには次のコードを記述します。

Visual Basic の場合：

' UseOsThemes をオフにして、raw 列ヘッダを表示します
Me.UltraGrid1.UseOsThemes = DefaultableBoolean.False

C# の場合：

// UseOsThemes をオフにして、raw 列ヘッダを表示します
this.ultraGrid1.UseOsThemes = DefaultableBoolean.False;

列ヘッダで 2 行表示できるように、列のヘッダ行数を 2 に設定します。.Caption プロパティ内のヘッダ行の間に vbcrlf を配置します。

Visual Basic の場合：

' 列のヘッダ行数を 2 に設定します
e.Layout.Bands(0).ColHeaderLines = 2

C# の場合：

// 列のヘッダ行数を 2 に設定します
e.Layout.Bands[0].ColHeaderLines = 2;

バンド内のすべてのセルの背景色およびセルボタンの背景色をオーバーライドします。

Visual Basic の場合：

' バンド 0 のすべてのセルの外観をオーバーライドします
e.Layout.Bands(0).Override.CellAppearance.BackColor = Color.LightPink
e.Layout.Bands(0).Override.CellButtonAppearance.BackColor = Color.LightPink

C# の場合：

// バンド 0 のすべてのセルの外観をオーバーライドします
e.Layout.Bands[0].Override.CellAppearance.BackColor = Color.LightPink;
e.Layout.Bands[0].Override.CellButtonAppearance.BackColor = Color.LightPink;

バンド 0、列 0 のヘッダ キャプションを [デフォルト] に設定します。

Visual Basic の場合：

' バンド 0、列 0 のキャプションを設定します
e.Layout.Bands(0).Columns(0).Header.Caption = "Default"

C# の場合：

// バンド 0、列 0 のキャプションを設定します
e.Layout.Bands[0].Columns[0].Header.Caption = "Default";

バンド 0、列 1 のセルの BackColor プロパティと ForeColor プロパティを設定します。

Visual Basic の場合：

' バンド 0、列 1 のプロパティを設定します
e.Layout.Bands(0).Columns(1).Header.Caption = "BackColor" + vbCrLf + "ForeColor"
e.Layout.Bands(0).Columns(1).CellAppearance.BackColor = Color.LightYellow
e.Layout.Bands(0).Columns(1).CellAppearance.ForeColor = Color.Blue
e.Layout.Bands(0).Columns(1).CellButtonAppearance.BackColor = Color.LightYellow

C# の場合：

// バンド 0、列 1 のプロパティを設定します
e.Layout.Bands[0].Columns[1].Header.Caption = "BackColor" + "\n" + "ForeColor";
e.Layout.Bands[0].Columns[1].CellAppearance.BackColor = Color.LightYellow;
e.Layout.Bands[0].Columns[1].CellAppearance.ForeColor = Color.Blue;
e.Layout.Bands[0].Columns[1].CellButtonAppearance.BackColor = Color.LightYellow;

バンド 0、列 2 のすべてのセルのフォントを太字に設定します。

Visual Basic の場合：

' バンド 0、列 2 のプロパティを設定します
e.Layout.Bands(0).Columns(2).Header.Caption = "FontData" + vbCrLf + "Bold"
e.Layout.Bands(0).Columns(2).CellAppearance.FontData.Bold = DefaultableBoolean.True

C# の場合：

// バンド 0、列 2 のプロパティを設定します
e.Layout.Bands[0].Columns[2].Header.Caption = "FontData" + "\n" + "Bold";
e.Layout.Bands[0].Columns[2].CellAppearance.FontData.Bold = DefaultableBoolean.True;

バンド 1 の列ヘッダの列ヘッダ行数を 2 に設定します。

Visual Basic の場合：

' 列のヘッダ行数を 2 に設定します
e.Layout.Bands(1).ColHeaderLines = 2

C# の場合：

// 列のヘッダ行数を 2 に設定します
e.Layout.Bands[1].ColHeaderLines = 2;

バンド 1、列 0 の列ヘッダの .Image プロパティに画像を取り込みます(画像は列ヘッダの高さに合わせられます）。

Visual Basic の場合：

' バンド 1、列 0 のプロパティを設定します
e.Layout.Bands(1).Columns(0).Header.Caption = "Image"
Dim anImage1 As Image = Image.FromFile( _
  System.IO.Path.Combine(Application.StartupPath, "..\ExtraFiles\Water lilies.jpg"))
e.Layout.Bands(1).Columns(0).Header.Appearance.Image = anImage1

C# の場合：

// バンド 1、列 0 のプロパティを設定します
e.Layout.Bands[1].Columns[0].Header.Caption = "Image";
Image anImage1 = Image.FromFile(
  System.IO.Path.Combine(Application.StartupPath, @"..\..\ExtraFiles\Water lilies.jpg"));
e.Layout.Bands[1].Columns[0].Header.Appearance.Image = anImage1;

バンド 1、列 1 の列ヘッダの .ImageBackground プロパティに画像を取り込みます(列の背景は画像で塗りつぶされます）。

Visual Basic の場合：

' バンド 1、列 1 のプロパティを設定します
e.Layout.Bands(1).Columns(1).Header.Caption = "Background" + vbCrLf + "Image"
Dim anImage2 As Image = Image.FromFile( _
  System.IO.Path.Combine(Application.StartupPath, "..\ExtraFiles\Water lilies.jpg"))
e.Layout.Bands(1).Columns(1).Header.Appearance.ImageBackground = anImage2

C# の場合：

// バンド 1、列 1 のプロパティを設定します
e.Layout.Bands[1].Columns[1].Header.Caption = "Background" + "\n" + "Image";
Image anImage2 = Image.FromFile(
  System.IO.Path.Combine(Application.StartupPath, @"..\..\ExtraFiles\Water lilies.jpg"));
e.Layout.Bands[1].Columns[1].Header.Appearance.ImageBackground = anImage2;

このコードで列のアクティブ化は無効になりますので、無効になったら列の背景色を設定します。

Visual Basic の場合：

' バンド 1、列 2 のプロパティを設定します
e.Layout.Bands(1).Columns(2).Header.Caption = "Disabled"
e.Layout.Bands(1).Columns(2).CellActivation = Activation.Disabled
e.Layout.Bands(1).Columns(2).CellAppearance.BackColorDisabled = Color.LightGoldenrodYellow

C# の場合：

// バンド 1、列 2 のプロパティを設定します
e.Layout.Bands[1].Columns[2].Header.Caption = "Disabled";
e.Layout.Bands[1].Columns[2].CellActivation = Activation.Disabled;
e.Layout.Bands[1].Columns[2].CellAppearance.BackColorDisabled = Color.LightGoldenrodYellow;

このコードで列ヘッダは赤から青のグラデーションで塗りつぶされ、テキストは太字になり、テキスト色は白に設定されます。

Visual Basic の場合：

' バンド 1、列 3 のプロパティを設定します
e.Layout.Bands(1).Columns(3).Header.Caption = "Gradient"
e.Layout.Bands(1).Columns(3).Header.Appearance.ForeColor = Color.White
e.Layout.Bands(1).Columns(3).Header.Appearance.FontData.Bold = DefaultableBoolean.True
e.Layout.Bands(1).Columns(3).Header.Appearance.BackColor = Color.Red
e.Layout.Bands(1).Columns(3).Header.Appearance.BackColor2 = Color.Blue
e.Layout.Bands(1).Columns(3).Header.Appearance.BackGradientStyle = GradientStyle.Vertical

C# の場合：

// バンド 1、列 3 のプロパティを設定します
e.Layout.Bands[1].Columns[3].Header.Caption = "Gradient";
e.Layout.Bands[1].Columns[3].Header.Appearance.ForeColor = Color.White;
e.Layout.Bands[1].Columns[3].Header.Appearance.FontData.Bold = DefaultableBoolean.True;
e.Layout.Bands[1].Columns[3].Header.Appearance.BackColor = Color.Red;
e.Layout.Bands[1].Columns[3].Header.Appearance.BackColor2 = Color.Blue;
e.Layout.Bands[1].Columns[3].Header.Appearance.BackGradientStyle = GradientStyle.Vertical;

  • UltraGrid1.InitializeRow - InitializeRow イベントのコードにより行が展開します。

Visual Basic の場合：

Private Sub UltraGrid1_InitializeRow(ByVal sender As Object, _
  ByVal e As Infragistics.Win.UltraWinGrid.InitializeRowEventArgs) _
  Handles UltraGrid1.InitializeRow
	e.Row.ExpandAll()
End Sub

C# の場合：

private void ultraGrid1_InitializeRow(object sender,
  Infragistics.Win.UltraWinGrid.InitializeRowEventArgs e)
{
	e.Row.ExpandAll();
}

まとめ

このサンプル プロジェクトは列の外観のいくつかの設定オプションについて説明しています。列の外観は Column.Header Appearance オブジェクトと Column の CellAppearance オブジェクトの両方で構成されています。Column Appearance として考えられているもののほとんどは実際には列内のセルの外観です。