並べ替え列のヘッダーセルに並べ替えの矢印を追加する
SortedAscendingHeaderStyleプロパティとSortedDescendingHeaderStyleプロパティにちょっとしたCSSを組み合わせるだけで、並べ替え列のヘッダーセルに上向き矢印と下向き矢印を追加して、データの並べ替えが昇順か降順かを示すことができます。まず、何らかの上向きと下向きのイメージが必要です。この記事のダウンロードファイルにもこのような2つのイメージが含まれていますが、もちろん自分で作成したり、オンラインで同様のイメージを探したりすることも可能です。次に、sortasc-headerやsortdesc-headerなど、昇順ヘッダーセル用と降順ヘッダーセル用の2つのCSSクラスを作成する必要があります。これらのクラスで、上向き矢印イメージと下向き矢印イメージのURLを指定します。また、上向き矢印と下向き矢印がヘッダーセルのテキストで隠れないように、ヘッダー行のリンクの右側に余白を追加するCSSルールも含める必要があります。
.sortasc-header A
{
background:url(URL to up arrow image) right center no-repeat;
}
.sortdesc-header A
{
background:url(URL to down arrow image) right center no-repeat;
}
TH A
{
padding-right: 20px;
}
このCSSを外部の.cssファイルまたは<head>要素の内部のどちらかで定義しておけば、後はsortasc-headerとsortdesc-headerのCSSクラスを使うようにGridViewのSortedAscendingHeaderStyleとSortedDescendingHeaderStyleをそれぞれ構成するだけです。このためには、これらのプロパティのCssClassプロパティを次のように設定します。
<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
...
SortedAscendingHeaderStyle-CssClass="sortasc-header"
SortedDescendingHeaderStyle-CssClass="sortdesc-header"
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow">
...
</asp:GridView>
これらのプロパティを設定すると、並べ替え列のヘッダーに、データの並べ方が昇順か降順かに応じて上向き矢印または下向き矢印が表示されるようになります（黄色のハイライト表示は引き続き有効です）。
GridViewの見栄えを良くする
前述の例で、GridViewの並べ替えに関連する4つの新しいスタイルプロパティを紹介しましたが、これらの例で使ったGridViewは見栄えがあまりよくありません。こういう不恰好なデモを見ると、GridViewをきれいに見せるのは無理なのかと思うかもしれませんが、そうではありません。デザインのスキルと芸術的センスが少しあれば、美しいGridViewを作成できます。私はもちろんデザイナではないのですが、Color Scheme DesignerのようなWebサイトや、FAMFAMFAMのようなWebサイトにある無償のアイコンセットを使えば、私のようなセンスのない古いプログラマでも、そこそこのGridViewを作ることができます（この記事のダウンロードファイルでも、こういった皆さんのお力を借りています）。
きれいなGridViewを作成するためのもう1つの素晴らしいリソースとして、Matt Bersethのブログを紹介しましょう。Mattのブログには、GridViewコントロールの拡張に関するセクションがあり、そこに、GridViewのスタイルを設定するためのCSSルールやコード（必要な場合）を紹介するエントリがいくつか含まれています。この記事のダウンロードファイルには、Mattのデモの1つ（Building a VS2008 Styled Grid with the GridView Control）を、ASP.NET 4.0の並べ替え関連の新しいスタイルプロパティを使用するようにアップデートしたものが含まれています。
次のスクリーンショットのデータは、前掲のスクリーンショットのデータと同じですが、今回はMattのCSSクラスを使用しています。このデータは、Category列を基準として昇順で並べ替えられています。この並び順をユーザーに示すために、Categoryヘッダーセルに下向き矢印を表示し、データセルをハイライト表示しています。
まとめ
リリース以降、GridViewコントロールには数多くのスタイル関連のプロパティが組み込まれてきました。ページ作成者は、GridView全体およびGridViewの特定の部分（行、1行おきの行、ヘッダー行など）の両方に対して、CSSクラス、フォント、色、境界線など、表示に関連する設定を指定できました。このようにプロパティが数え切れないほどあるにもかかわらず、これまでのGridViewには、並べ替え列の表示方法を指定するプロパティが含まれていませんでした。並べ替え列の外観をカスタマイズするには、作成者がコードを書く必要がありました。
うれしいことに、この短所はASP.NET 4.0で解決されました。ASP.NET 4.0のGridViewには、並べ替え列のヘッダーセルとデータセルの外観をカスタマイズするための4つの新しいスタイル関連のプロパティSortedAscendingHeaderStyle、SortedAscendingCellStyle、SortedDescendingHeaderStyle、SortedDescendingCellStyleが含まれています。この記事では、これらのプロパティを使って、データの並べ替えが昇順か降順かに応じて、並べ替え列のヘッダーセルに上向き矢印または下向き矢印を追加する方法を説明しました。また、並べ替え列のデータセルをハイライト表示する方法も説明しました。この記事に記載したコードとスクリーンショットは、ダウンロードファイルに収録されています。
それでは、ハッピープログラミング！
