ASP.NET 2.0 の GridView の例: GridView の書式設定

[アーティクル]
06/24/2011

ここをクリックして TOC に戻ります。

これまでに見てきた例では、 GridView の出力は tad drab であり、魅力的ではありません。たとえば、図 7 では、 GridView の出力に色がありません。各列のヘッダー内のテキストは、ProductName (Product と Name の間にスペースを含まない) のように DataSource フィールド名と正確に一致しますが、Product Name または Product として表示する方が理にかなっています。また、UnitPrice 列を通貨として書式設定し、そのデータを右揃えにしたい場合もあります。列の順序を変更するか、データソースコントロールによって返される列のサブセットのみを表示したい場合があります。または、在庫のある項目が 0 の場合に GridView 行の背景色を変更するなど、より高度な書式設定を使用することもできます。

幸いなことに、これらのタスクはすべて GridView で簡単に実行できます。そのほとんどは、コード行なしでデザインビューを使用して実行できます。アートスキルを持たない私のような人々のための GridView の美学を向上させるための自動フォーマットウィザードもあります。このセクションでは、Designerで設定できるプロパティを使用して GridView を書式設定する方法、GridView にバインドされている実際のデータに基づいて書式設定する方法、およびスキンを使用して GridView の外観を変更する方法について説明します。

GridView の美的プロパティを調べる

ASP.NET 1.x の DataGrid と同様に、 GridView には豊富なプロパティが含まれています。このプロパティを使用すると、 GridView の外観を大げさな値に設定できます。 BackColor、Font、ForeColor などのプロパティを使用すると、GridView 全体の美学を決定できます。 また、HeaderStyle、RowStyle、AlternatingRowStyle、FooterStyle などのプロパティを使用して、GridView の特定の部分に固有の美的設定を指定することもできます。また、スタイルは列単位で設定することもできます。

芸術的な人であれば、エンドユーザーに目を引く GridView を提供する適切な色とスタイルをまとめることができます。しかし、あなたが私のような人なら、 GridView はさまざまなスタイルをうまくまとめるために自動フォーマットできることです。自動書式設定を利用するには、 GridView のスマートタグの [自動書式] リンクをクリックするだけで、[自動書式] ダイアログボックスが表示されます (図 11 を参照)。

Aa479342.gridview_fg11(en-us,MSDN.10).gif

図 11

自動書式ウィザードでは、さまざまな色のデザインのみが GridView に適用されます。 GridView 列の外観 (通貨としてのデータの書式設定やデータの中央揃えなど) を調整する場合は、GridView のスマートタグから [列の編集] リンクをクリックするだけです。これにより、 GridView のすべての列とそのプロパティが一覧表示されるダイアログボックスが表示されます (図 12 を参照)。

Aa479342.gridview_fg12(en-us,MSDN.10).gif

図 12

左下隅には 、GridView の列が一覧表示されます。このダイアログボックスでは、列の順序を調整したり、列を完全に削除または追加したりできます。 GridView の列の順序を変更するには、列をクリックし、上矢印または下矢印をクリックして列リスト内の位置を調整します。 GridView から列を削除するには、列を選択し、[X] ボタンをクリックして削除します。

列の 1 つをクリックすると、そのプロパティが右側のペインに一覧表示されます。 ItemStyle プロパティから、データの水平方向の配置方法や太字のフォントでデータを表示する場合など、列の項目の書式設定プロパティを設定できます。列のヘッダーに表示されるテキストは、 HeaderText プロパティを使用して変更できます。列のデータの書式を設定するには、 DataFormatString プロパティを使用し、 {0:format string} に設定します。たとえば、UnitPrice 列を通貨として書式設定するには、 DataFormatString プロパティをに {0:c}設定します。

メモ書式指定文字列に使用できるさまざまな値の詳細については、.NET Frameworkドキュメントの「書式設定の種類」セクションを参照してください。

図 13 は、Products テーブルのデータを表示する書式設定された GridView のスクリーンショットを示しています。ヘッダー内のテキストが既定値からより使いやすい値に変更されていることに注意してください。 GridView にも色が付けられています ([自動書式] ダイアログボックスで [ブラウンシュガー] オプションを使用しました)、Price/Unit 列と Units In Stock 列のデータは右揃えで、Price/Unit 列のデータは通貨として書式設定されています。

Aa479342.gridview_fg13(en-us,MSDN.10).gifAa479342.gridview_fg13

図 13

Designerを使用して GridView の美的プロパティを変更すると、宣言構文が適切な値に設定されます。ページの完全な宣言構文を次に示します。

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:SqlDataSource ID="productsDataSource" 
             Runat="server" 
             SelectCommand="SELECT [ProductID], [ProductName], 
               [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM 
               [Products]"
         ConnectionString="<%$ ConnectionStrings:NWConnectionString %>" 
         DataSourceMode="DataReader">
        </asp:SqlDataSource>
        <asp:GridView ID="productGridView" Runat="server" 
          DataSourceID="productsDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
             BorderWidth="1px" BackColor="#DEBA84" 
             CellPadding="3" CellSpacing="2" BorderStyle="None" 
             BorderColor="#DEBA84">
            <FooterStyle ForeColor="#8C4510" 
              BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" 
              HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" Font-Bold="True" 
              BackColor="#A55129"></HeaderStyle>
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ID" 
                  InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID">
                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Name" 
                 DataField="ProductName" 
                 SortExpression="ProductName"></asp:BoundField>
                <asp:BoundField HeaderText="Qty/Unit" 
                 DataField="QuantityPerUnit" 
                 SortExpression="QuantityPerUnit"></asp:BoundField>
                <asp:BoundField HeaderText="Price/Unit" 
                DataField="UnitPrice" SortExpression="UnitPrice" 
                DataFormatString="{0:c}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Units In Stock" 
                  DataField="UnitsInStock" 
                  SortExpression="UnitsInStock" 
                   DataFormatString="{0:d}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle ForeColor="White" Font-Bold="True" 
             BackColor="#738A9C"></SelectedRowStyle>
            <RowStyle ForeColor="#8C4510" 
               BackColor="#FFF7E7"></RowStyle>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

GridView のスキニング

ASP.NET 2.0 の優美な新機能の 2 つには、テーマとスキンがあります。 スキンは、特定のコントロールの外観を定義するファイルです。異なる SkinIDの GridView の外観を定義する GridView コントロールのスキンファイルを作成できます。 テーマはスキンのコレクションです。

テーマの使用を開始するには、Web アプリケーションの /app_themes ディレクトリにフォルダーを作成する必要があります。このディレクトリ内に、作成するテーマごとに新しいフォルダーを追加します。この記事に付属するダウンロードでは、 /app_themes ディレクトリ GridViewTheme に 1 つのフォルダーがあります。テーマへのスキンの追加は、テーマのディレクトリに WebControlToBeSkinned.skin という名前の新しいファイルを追加するのと同じくらい簡単です (GridView のスキンを提供するには、ファイルに GridView.skin という名前を付けます)。スキンファイルには、さまざまな SkinIDの GridView の美的マークアップを指定する宣言型構文が含まれている必要があります。 GridView.skin ファイルに示すように、2 つの SkinIDの既定のマークアップとマークアップ (Professional と Fun) を作成しました。

<asp:GridView runat="server" Font-Name="Arial" />
<asp:GridView runat="server" SkinID="Professional" Font-Name="Verdana"
                Font-Size="10pt" Cellpadding="4"
            HeaderStyle-BackColor="#444444"
            HeaderStyle-ForeColor="White"
                AlternatingRowStyle-BackColor="#dddddd" />
<asp:GridView runat="server" SkinID="Fun" Font-Name="Comic Sans MS"
                Font-Size="13pt" BackColor="Khaki"
                AlternatingRowStyle-BackColor="Tan"
            HeaderStyle-BackColor="SaddleBrown"
            HeaderStyle-ForeColor="White"
            HeaderStyle-Font-Bold="True"
            />

既定のマークアップは上部に表示され、 GridView を Arial フォントで表示する必要があることを示します。次の 2 つのセクションは、 SkinIDの Professional と Fun に使用するマークアップを示しています。 Professional の場合、Verdana フォントは CellPadding4 、濃い灰色のヘッダー背景と白いテキストで使用されます。各行の色の背景は薄い灰色に設定されます。 Fun の場合は、フォントサイズが大きく背景が茶色がかった、Comic Sans MS フォントが使用されます。

最後に、 GridView のスキンに、 @Page ディレクティブで使用するテーマを追加し、 GridView の SkinID を 適切に設定します。次のページでは、 @Page ディレクティブの Theme を指定し、3 つの GridViewを表示します。1 つは SkinID が指定されておらず、1 つは Professional SkinID、1 つは Fun SkinID です。

<%@ Page Language="C#" StyleSheetTheme="GridViewTheme" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="productsSubsetDataSource" 
         Runat="server" SelectCommand="SELECT TOP 5 ProductID, 
           ProductName, UnitPrice FROM Products ORDER BY ProductName"
            ConnectionString=
             "<%$ ConnectionStrings:NWConnectionString %>">
        </asp:SqlDataSource>
        <h2>A GridViwe Without a Skin Specified</h2>
        <asp:GridView ID="GridView3" Runat="server" 
         DataSourceID="productsSubsetDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField ReadOnly="True" 
                  HeaderText="ProductID" InsertVisible="False" 
                  DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                  DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                  DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <h2>A GridViwe With the <i>Professional</i> Skin</h2>
        <asp:GridView ID="GridView1" Runat="server" 
           DataSourceID="productsSubsetDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
            SkinID="Professional">
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ProductID" 
                  InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                 DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                   DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <h2>A GridViwe With the <i>Fun</i> Skin</h2>
        <asp:GridView ID="GridView2" Runat="server" 
             DataSourceID="productsSubsetDataSource"
             DataKeyNames="ProductID" AutoGenerateColumns="False" 
             SkinID="Fun">
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ProductID" 
                   InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                  DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                  DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    
    </div>
    </form>
</body>
</html>

図 14 は、ブラウザーで表示された場合のこのページのスクリーンショットを示しています。対応する設定が ASP.NET ページの宣言型構文に含まれていない場合でも、美的な書式設定が 3 つの GridViewに適用されていることに注意してください。代わりに、設定は、指定したテーマの GridView スキンファイルから動的にインポートされます。

Aa479342.gridview_fg14(en-us,MSDN.10).gif

図 14

基になるデータに基づいて GridView を書式設定する

前の 2 つの例では、 GridView の書式設定が静的に指定されています。ただし、 GridView のデータに基づいて書式設定を変更したい場合があります。たとえば、製品情報を一覧表示するときに、在庫切れの製品にユーザーの目を引く場合があります。これを実現する 1 つの方法は、在庫単位の値が 0 の行の背景色を変更することです。

これを実現するには、GridView の各行のデータを検査し、在庫単位が 0 の場合は行の BackColor プロパティを変更する必要があります。 GridView には RowDataBound イベントが用意されています。このイベントは、行が作成され、データソースコントロールの対応するデータレコードにバインドされた後、各行に対して 1 回発生します。このイベントのイベントハンドラーを作成して、在庫単位が 0 かどうかを確認し、ある場合は GridView 行の BackColor プロパティを Yellow に設定します。

GridView の RowDataBound イベントのイベントハンドラーを作成するには、デザインビューに移動し、GridView をクリックして、[プロパティ] ウィンドウに移動します。 [プロパティ] ウィンドウで、稲妻をクリックします。これにより、 GridView のイベントが一覧表示されます。次に、RowDataBound 行に、作成するイベントハンドラーの名前を入力します (イベントハンドラー productsGridView_RowDataBound という名前を付けました)。最後に、イベントハンドラーに次のコードを入力します。

productsGridView_RowDataBound イベントハンドラー (Visual Basic)

Sub productsGridView_RowDataBound(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        'determine the value of the UnitsInStock field
        Dim unitsInStock As Integer =  _
          Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, _
          "UnitsInStock"))
        If unitsInStock = 0 Then
            ' color the background of the row yellow
            e.Row.BackColor = Drawing.Color.Yellow
        End If
    End If
End Sub
productsGridView_RowDataBound Event Handler (C#)
void productsGridView_RowDataBound(object sender, 
  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // determine the value of the UnitsInStock field
        int unitsInStock = 
         Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, 
         "UnitsInStock"));
        if (unitsInStock == 0)
            // color the background of the row yellow
            e.Row.BackColor = Color.Yellow;
    }
}

イベントハンドラーは、DataRow を操作しているかどうかを確認することから始まります。 GridView の RowDataBound イベントハンドラーが、HeaderRow を含め、作成される行ごとに発生します。ただし、HeaderRow には、データが関連付けられた [在庫単位] 列がないため、DataRows の操作にのみ関心があります。 GridView 行にバインドされたデータの UnitsInStock フィールドは、DataBinder.Eval() 呼び出しを通じて取得され、GridView 行 (例: Row.DataItem) にバインドされたデータと、関心のある値を持つフィールドの名前を渡します。最後に、在庫が 0 個のユニットがあるかどうかを確認するチェックが作成されます。その場合、行の BackColor プロパティは Yellow に設定されます。

図 15 は、ブラウザーで表示したときのこの例のスクリーンショットを示しています。在庫の単位が 0 の行は黄色で強調表示されます。

Aa479342.gridview_fg15(en-us,MSDN.10).gifAa479342.gridview_fg15

図 15

次のセクション: GridView でのマスター/詳細データの表示

ASP.NET 2.0 の GridView の例: GridView の書式設定

GridView の美的プロパティを調べる

GridView のスキニング

基になるデータに基づいて GridView を書式設定する

その他のリソース