DetailsView コントロールの見た目を変更する方法

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

DetailsView コントロールは、データーベースの 1 レコード分を取り出して詳しく表示するのに使うコントロールです。DetailsView コントロールの使い方については、データベースの 1 レコードを詳しく表示する方法で紹介しました。

DetailsView コントロールには、表示に関するプロパティがたくさんあり、それらをカスタマイズすることで、DetailsView コントロールの見た目を変更することができます。

次のようなページを作成します（図1）。このページは、「データベースの 1 レコードを詳しく表示する方法」で作成したサンプルをベースに、DetailsView コントロールの見た目をカラフルなものに変えています。

　図1 今回作成するページ

今回は、次の手順でページを作成します。

DetailsView コントロールも、ほかの多くのコントロールと同じようにオートフォーマットの機能を使って見た目を整えることができます。しかし、好みのフォーマットが無い場合、プロパティを 1 つ 1 つ変更してカスタマイズする必要があります。

DetailsView コントロールで背景色を変更するには、BackColor プロパティに値を設定します。BackColor プロパティを #FFFFC0 にすると次のようになります（図 2）。

　図 2 背景色の変更

DetailsView コントロールの枠線を変更するには、BorderColor、BorderStyle、BorderWidth の 3 つのプロパティを設定します。

このように設定した場合、DetailsView コントロールは、次のような外観になります（図 3）。

　図 3 枠線の変更

DetailsView コントロールには、ヘッダーテキストを追加することができます。HeaderText プロパティに「出版社情報」という文字列を設定してみます（図 4）。

図4 ヘッダーテキスト

DetailsViewコントロールのデフォルトの状態では、セル内の文字列と罫線の間にスペースがないため、少し見づらくなっています。文字列と罫線の間のマージンは、CellPadding プロパティで設定できます。CellPadding プロパティに今回は 3 を設定しました（図 5）。

　図5 セル内のマージンを変更

データ量の多い表では、１行ずつセルの色を変えて表示すると見やすくなります。AlternatingRowStyle の BackColor プロパティに値を設定すると、１行おきにセルの色が変わります。今回は、#FFE0C0 に設定します（図 6）。

　図6 1 行おきにセルの色を変更

各行の見出しセル（一番左側のセル）の色を変えることもできます。FieldHeaderStyle の BackColor プロパティに値を設定すると、一番左側のセルの色が変わります。今回は、#400000 に設定します。

また、この場合、背景色とテキストの色が近くなって見づらいため、一番左側のセルのテキスト色を白にします。FieldHeaderStyle の Font の ForeColor プロパティを White に設定すると次のようになります（図 7）。

図7 各行の見出しセルの色を変更

このように、DetailsView コントロールでは、プロパティを変更することで見た目のデザインを好みの形に変更することができます。