FlexGridでSilverlight一覧表示を手軽に実装
～DataGridからFlexGridへの移行と性能比較～

　Silverlight標準の一覧表示用コントロール「DataGrid」は、凝ったことをやろうとすると、なかなか実現が難しい場合があります。そうした際に使えるのが、FlexGird for Silverlightです。今回は、まずDataGridでTwitter上からハッシュタグのついたTweetを一覧表示する画面を作り、それをFlexGridに移行します。そして、最後に両者の使い勝手を比較してみたいと思います。

DataGrid以上の使いやすさを実現するFlexGrid for Silverlight

　業務用アプリケーションでは、一覧表示が必要になる事がよくあります。業務用アプリケーションでは、画面の使いやすさと同時に、作業効率という面も重要な評価ポイントであり、“一覧性”はその重要なファクターになるからです。

　Silverlightにも一覧表示用にDataGridコントロールがあります。各種データをデータソースとして連結して手軽に一覧表示はできるのですが、データ連結しなければ一覧表示する事ができないなど、凝ったことをやろうとすると、XAMLに対するスキルなどを身に付けていないと実現が難しいときもあります。有識者にとっては「XAMLでできるよ」「一度IEnum・・・で○○してから使えばできるよ」と簡単に説明できる事でも、実は多くの基礎ノウハウがあってこその簡単さだったりします。

　今回紹介するFlexGrid for Silverlightは、様々な設定をプロパティで行えるため、シンプルな操作で目的のデザインを構築できる、使いやすいコンポーネントです。今回は、まずDataGridでTwitter上からハッシュタグのついたTweetを一覧表示する画面を作り、それをFlexGridに移行します。そして、最後に両者の使い勝手を比較してみたいと思います。なお、説明箇所ごとの実装をサンプルソース内に入れてあるので、適宜参照してください。

DataGridで一覧表示画面を実装

　まずは、DataGridで一覧表示画面を実装していきます。

DataGridでの一覧表示画面のデザイン

　ButtonとDataGridを画面上に配置して、Buttonをクリックした時にデータを取得して一覧表示するUIは、次のようなXAML定義になります。

リスト1 DataGridで一覧表示する画面デザイン例

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <Button x:Name="Get_Button" Content="取得" Width="100" 
                    Click="Get_Button_Click" />
        </StackPanel>
        <sdk:DataGrid Grid.Row="1"
                      AutoGenerateColumns="True" 
                      HorizontalAlignment="Left" 
                      x:Name="Result_DataGrid" 
                      VerticalAlignment="Top" 
                      Height="227" 
                      Width="500">
        </sdk:DataGrid>
    </Grid>

　DataGridの定義の重要な点は、次の2点になります。

• AutoGenerateColumnsを「True」にして、連結したデータソースに合わせて自動的にカラム生成
• 「x:Name」として「Result_DataGird」を設定し、コードからDataGridを操作できるように設定

　XAMLで定義した画面を操作したときのイベントとプロシージャを関連づける記述は、2種類の書き方ができます。今回は、XAML側でButtonに対して「Click="Get_Button_Click"」と記述していますが、コード側で「Handles Get_Button.Click」をプロシージャ宣言に追記しても同じ事が可能です。

DataGridにおける一覧表示させるためのコード

　Silverlightでは、HTTP通信はすべて非同期で行うため、DownloadStringAsyncを使ってリクエストを送信し、DownloadStringCompletedイベントによりレスポンスを取得します。

リスト2 DataGridで一覧表示するコード例

Imports System.Runtime.Serialization.Json
Imports System.Text

Partial Public Class MainPage
    Inherits UserControl

    Private WithEvents Webs As New System.Net.WebClient
    Private Const URL As String = "http://hatsune.wankuma.com/service/CZ1103_search.aspx"

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Get_Button_Click(sender As System.Object,
                                 e As System.Windows.RoutedEventArgs)
        Call GetRecords()
    End Sub

    Private Sub GetRecords()
        Call Webs.DownloadStringAsync(New Uri(URL))
        Me.Get_Button.IsEnabled = False
        Me.Cursor = Cursors.Wait
    End Sub

    Private Sub Webs_DownloadStringCompleted(sender As Object,
                                             e As DownloadStringCompletedEventArgs) _
                                         Handles Webs.DownloadStringCompleted
        Me.Get_Button.IsEnabled = True
        Me.Cursor = Cursors.Arrow
        If e.Error IsNot Nothing Then
            MessageBox.Show(e.Error.Message)
        Else
            Dim serializer As New DataContractJsonSerializer(GetType(TSearchResult))

            Using stream As New System.IO.MemoryStream(Encoding.UTF8.GetBytes(e.Result))
                Dim result As TSearchResult = CType(serializer.ReadObject(stream), TSearchResult)
                Dim view As New Data.PagedCollectionView(result.results)

                view.SortDescriptions.Add(New ComponentModel.SortDescription("create_at", ComponentModel.ListSortDirection.Descending))
                Me.Result_DataGrid.ItemsSource = view
            End Using
        End If
    End Sub

    Public Class TSearch
        Public Property created_at As String
        Public Property from_user As String
        Public Property text As String
    End Class

    Public Class TSearchResult
        Public Property results As List(Of TSearch)
    End Class
End Class

一覧表示の実行

　XAML側とコード側が完成したら実行してみましょう。

　IDEから実行すれば自動的にWebブラウザが立ち上がり、その中でSilverlightが読み込まれて画面が表示されます。［取得］ボタンをクリックすると、「#wp7jp」のハッシュタグがついたTwitterの発言を一覧表示します。

図1 DataGridで一覧表示の実行例

　次に、FlexGridを使った場合の実装方法を見ていきたいと思います。