SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 2で作成する業務アプリケーション入門(AD)

Silverlight 2でのデータバインディング

Silverlight 2で作成する業務アプリケーション入門(5)

  • X ポスト
  • このエントリーをはてなブックマークに追加

クライアント側実装 DataGridコントロールの表示カスタマイズ

 さて、基本的なXMLファイルのバインディングは実現できました。しかし、自動で表を作成しているため、柔軟には運用できません。これだけではDataGridの機能を実感できないので、表示をカスタマイズしてみましょう。

 DataGridで列の自動生成を行わず、各列を手動で挿入するようにします。手動挿入の場合、各列でバインドするプロパティは個別に設定できます。顧客リストのID、Name、Work、Ref要素はそのままテキスト表示し、Check要素はチェックボックスで表示しましょう。また、今回はテンプレートを使ったカスタマイズを試したいので、Mail要素はハイパーリンクを記述するためのHyperlinkButtonコントロールを使って表示させてみましょう。

 Expression BlendでPage.xamlを編集し、DataGridを選択します。AutoGenerateColumnsプロパティをFalseに設定します。これで表の自動生成が行われなくなり、バインドされたデータが自動で表示されることがなくなります。

 続いて、列を手動で挿入しましょう。DataGridに手動で列を挿入するにはDataGridColumnクラスを使用します。Expression BlendのDataGridのプロパティで[Columns(コレクション)]項目で[...]をクリックします。

Columns(コレクション)項目で[...]をクリック
Columns(コレクション)項目で[...]をクリック

 このダイアログからDataGridに手動で列を挿入することができます。

別のアイテムを追加をクリック
別のアイテムを追加をクリック
[システムアセンブリ]の表示にチェックをしてオブジェクトを選択
[システムアセンブリ]の表示にチェックをしてオブジェクトを選択

 画面にもあるように[別のアイテムを追加]をクリックし[オブジェクトの選択]ウィンドウで[システムアセンブリの表示]にチェックを入れて追加できるアイテムを参照します。

 列挙されている中の、DataGridTextColumnはテキスト表示する列を、DataGridCheckBoxColumnはチェックボックス表示する列を定義するためのクラスです。今回はテキスト表示するID、Name、Work、Ref各要素について、それぞれDataGridTextColumnを挿入します。チェックボックス表示するCheck要素については、DataGridCheckBoxColumnを挿入します。

 また、前述の通りMail要素はハイパーリンクとして表示させるため、DataGridTemplateColumnクラスを使います。このクラスにより、さまざまなコントロールをDataGrid上で扱うことが可能になります。ここでDataGridTemplateColumnを挿入しますが、実際にハイパーリンクを表示させる詳細については後述します。各アイテムは下に表示された上下ボタンを使って表示させる順番を変更することができます。

 続いて各アイテムのプロパティを設定しましょう。HeaderはDataGridの先頭行に表示されるヘッダー文字列を指定するプロパティです。DataGridTextColumnにはフォントサイズを設定します。

DataGridTextColumnのHeaderプロパティに"ID"と設定しているところ
DataGridTextColumnの^^Header^^プロパティに"ID"と設定しているところ

 ではここまでで変更を保存してVisual Studioに戻りましょう。

 さらにVisual Studio側のXAMLペインでDataGridに変更を加えていきます。

Page.xamlの内容 太字部分はVisual Studioで記述
<data:DataGrid Margin="48,48,248,192" Grid.Row="1" x:Name="list1" AutoGenerateColumns="False"  IsReadOnly="False" IsEnabled="True" Grid.ColumnSpan="1" Grid.Column="0" CanUserResizeColumns="True" CanUserReorderColumns="False"  >
    <data:DataGrid.Columns>
            <data:DataGridCheckBoxColumn Header="チェック"  Binding="{Binding Path=Check}"  />
        <data:DataGridTextColumn Header="ID"  Binding="{Binding Path=ID}" FontSize="16" IsReadOnly="True" CanUserReorder="False" CanUserResize="True" />
        <data:DataGridTextColumn Header="名前"  Binding="{Binding Path=Name}" FontSize="16" CanUserResize="False" IsReadOnly="True" />
        <data:DataGridTextColumn Header="所属企業"  Binding="{Binding Path=Work}" FontSize="16" IsReadOnly="True" />
        <data:DataGridTemplateColumn Header="メール">
        <data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<HyperlinkButton VerticalAlignment="Center" Content="メール送信" NavigateUri="{Binding Mail}" TargetName="_blank"></HyperlinkButton>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn> <data:DataGridTextColumn Header="予定欄" Binding="{Binding Path=Ref}" IsReadOnly="True" FontSize="16" /> </data:DataGrid.Columns> </data:DataGrid>

 先述したHyperlinkButtonの設置のため、DataGridTemplateColumnの下にDataGridTemplateColumn.CellTemplateおよびDataTemplateを配置します(太字部分)。DataTemplateの中で、実際に表示する内容を定義します。ここではメールアドレスへのハイパーリンクを表示するため、これらのタグにはさむようにツールボックスからHyperlinkButtonをドロップしました。なお、DataGridTemplateColumn以下には、DataGridを編集する際に表示するタグを指定するCellEditingTemplateタグと、編集以外の時に表示するタグを指定するCellTemplateタグを配置することができますが、今回はDataGridでの編集は行わないため、CellTemplateタグを配置しています。

 データバインドに関する記述ですが、今のところExpression Blendの[アイテムの追加]ではバインド内容の編集ができないようなので、太字で示しているようにVisual Studioで編集しました。既に親コントロール側でDataContextが設定されているため、プロパティ名を指定するだけでデータを取得できます。今回は下のような構文でバインドするプロパティを指定しました。

データバインドに関する記法
"{Binding Path=(バインドするプロパティ名)}"

 DataGridTextColumnおよびDataGridCheckBoxColumnでは、Bindingプロパティに上記の構文で表示するプロパティを指定します。

 DataGridTemplateColumn内に配置したHyperlinkButtonコントロールでは、リンク先URIを表すNavigateUriプロパティに"{Binding Mail}"を指定して、メールアドレスへのリンクを生成しています。バインドするプロパティ名を記述する際には、「Path=」の部分を省略することもできます。ここでは実際にこの記法を用いました。

 では実行しましょう。

 冒頭の成功時の画面で示した通りに出力されているでしょうか。自動生成した表と大きな違いはありませんが、子要素を個別にバインドしているためそれぞれ自由にスタイルを変更することができます。メールアドレスはHyperlinkButtonで表示しているのでクリックするとメーラが起動し顧客リストの上のメールアドレス宛にメールが作成できます。

 今回のサンプルではDataTemplateの中でHyperlinkButtonを使用しましたが、この方法であらゆるコントロールを配置できます。例えばImageコントロールを使って、オブジェクトからURIを取得して、DataGrid中に画像を表示することも可能です。このように、DataTemplateを利用すればDataGridコントロールの活用の幅は大きく広がります。

バインド時の値整形

 .NET Framework 3.5 SP1のWPFのデータバインディングでは、例えばDateTime型の変数をバインド元にする場合、次のような記述で書式指定することができます。

WPFにおける値整形の例 dateプロパティはDateTime型の変数
<TextBox Text="{Binding Path=date, StringFormat=yyyy年MM月dd日}"/>

 しかし、残念ながら現在のところSilverlight 2はこの機能に対応していません。必要な場合はビハインドコードで

ビハインドコードで値整形をする例
string printDate = date.ToString("yyyy年MM月dd日");

 と記述するなど、値を整形した後にバインドする必要があります。

次のページ
サンプル2:各種コントロールへのバインドとデータの書き換え

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight 2で作成する業務アプリケーション入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 土井 毅(ドイ ツヨシ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3517 2009/01/29 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング