Silverlight Tips(5) DataGridを使用する

本日のTipsでは、先日、公開させて頂いた「Crete For Web」のコードを使ってDataGridの基本的な使用方法を紹介していきます。

DataGridにデータを表示する
「Crete For Web」ではホームページのキーワード解析を行った結果をDataGridに表示しています。
DataGridに表示している項目は[単語]、[単語の出現回数]、[単語の出現率]、[単語の出現するタグ]の4つ。



まずはXAMLにDataGridのタグを記述します。

[Page.xaml]

<UserControl x:Class="CreteWeb.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    Width="700">

   //省略

   <data:DataGrid x:Name="_wordList" Height="250" Width="580" IsReadOnly="True"
      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" ></data:DataGrid>
</UserControl>

「System.Windows.Controls.Data.Dll」に参照を追加し、名前空間の記述を追加します。

そして、コードから参照できるように「x:Name」属性を設定しています。
また、スクロール可能なように、VerticalScrollBarVisibility属性とHorizontalScrollBarVisibility属性をAutoに設定しています。

続いて、コードを見ていきます。

まず、解析結果を管理するためのエンティティクラスを作成します。

    public class Keyword
    {
        //単語
        public String Word { get; set; }
        //単語の出現回数
        public String Count { get; set; }
        //単語の出現率
        public String Ratio { get; set; }
        //単語の出現するタグ
        public String Tags { get; set; }
    }

次にDataGridに設定する部分です。

[Page.xaml.cs]

  //複数のキーワードを管理するコレクション
  List keywords = new List();

  //形態素解析のAPIから取得したXMLのノードをループする
  foreach (var node in query)
  {
     Keyword keyword = new Keyword();

     //keywordの各プロパティに値を設定するコード(省略)

     keywords.Add(keyword);
  }

  //DataGridにKeywordのコレクションを設定する
  _wordList.ItemsSource = keywords;

ここまで、とりあえずDataGridにデータを表示することが出来ます。
DataGridのItemsSourceに指定できるオブジェクトは「foreach」可能なオブジェクトです。

列名を変更する
ここまでのコードでは、DataGridの列名には、Keywordクラスのプロパティ名がそのまま
表示されています。これを分かりやすい日本語に変更します。

XAMLのDataGridを配置している部分を以下のように変えます。

[Page.xaml]

<data:DataGrid x:Name="_wordList" Height="250" Width="580" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
          IsReadOnly="True" AutoGenerateColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridTextColumn Header="キーワード" Binding="{Binding Word}" />
        <data:DataGridTextColumn Header="出現回数" Binding="{Binding Count}" />
        <data:DataGridTextColumn Header="割合(%)" Binding="{Binding Ratio}" />
        <data:DataGridTextColumn Header="タグ" Binding="{Binding Tags}" />
    </data:DataGrid.Columns>
</data:DataGrid>

まず、DataGridのAutoGenerateColumns属性をFalseに設定します。これをやらないと同じ列が重複して出来てしまいます。
DataGridTextColumnのBinding属性には、それぞれの列に対応するKeywordクラスのプロパティ名を指定しています。
その他、Width属性を指定すると列の幅を設定することも出来ます。

選択行のオブジェクトを取得する
「Crete For Web」ではキーワードの一覧表(上記DataGrid)から項目を選択し、関連ワードボタンをクリックすると
選択された単語と一緒によく検索される関連語の一覧を取得することが出来ます。

この際、現在DataGridで選択されている行のKeywordクラスのインスタンスを、以下のようにして取得しています。

[Page.xaml.cs]

   Keyword keyword = _wordList.SelectedItems[0] as Keyword;

行の色を変更する
関連語一覧では、解析対象のページに含まれているキーワードの組み合わせについては、
青色で、その他の場合は、黒色で表示しています。

この処理は、DataGridのLoadingRowイベントを利用して行っています。

[Page.xaml.cs]

  public Page()
  {
      InitializeComponent();

       //イベントハンドラを追加
      _relatedList.LoadingRow += new EventHandler(_relatedList_LoadingRow);
  }

  private void _relatedList_LoadingRow(object sender, DataGridRowEventArgs e)
  {
      RelatedWord relatedWord = e.Row.DataContext as RelatedWord;

       //判定処理(省略)

      if (//ふくまれている)
      {
          e.Row.Foreground = new SolidColorBrush(Colors.Blue);
      }
      else
      {
          e.Row.Foreground = new SolidColorBrush(Colors.Black);
      }
   }

LoadingRowイベントはDataGridRow がインスタンス化され、画面に表示される前に発生します。
両方のケースについてしっかりと色指定を行わないと、条件に合わない行まで青色で表示されたりするので、
ご注意ください。

余談ですが、DataGridはItemsSourceにデータが設定された段階で全ての行をインスタンス化するのではなく、
行が必要になった時点で、インスタンス化を行います。この仕様のおかげで画面表示がすばやく行われます。