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

DataGridからFlexGridへの移行

　FlexGridを使う局面としては、新規に作成する場合以外にもDataGridからの置き換え（移行）という局面もあると思います。そこで、DataGridを使ったプログラムをもとにして、FlexGridに移行する手順を確認していきます。

コンポーネントの追加

　FlexGridは標準コンポーネントではないので、IDEにコンポーネントを取り込まなければなりません。ツールボックスでアイテムの追加を行い「C1FlexGrid」を指定して、FlexGridコントロールをツールボックスに追加します。

図2 コンポーネントの追加

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

　FlexGridを使用するための前準備としては、次の2つの手順が必要です。

• 「C1.Silverlight.FlexGrid.4」に対する参照設定の追加
• XAML定義に「xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"」を追記

　この手順は、FlexGridコントロールをツールボックスからドラッグ＆ドロップすれば自動的に行われます。よって、DataGridからFlexGridに移行するときに最初に行う事は、DataGrid部分の書き換えではなく、ツールボックスからFlexGridコントロールをXAML上にドラッグ＆ドロップする事です。それから、DataGridに書かれている属性をFlexGrid側のXAML定義の中にコピーして、DataGrid部分を削除します。

リスト3 DataGridをFlexGridに移行した画面デザイン例

<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>
    <c1:C1FlexGrid Grid.Row="1"
                  AutoGenerateColumns="True" 
                  HorizontalAlignment="Left" 
                  x:Name="Result_DataGrid" 
                  VerticalAlignment="Top" 
                  Height="227" 
                  Width="500"
                  SelectionMode="RowRange">
    </c1:C1FlexGrid>
</Grid>

　XAML定義としては「sdk:DataGrid」を「c1:C1FlexGrid」に置き換え、「SelectionMode="RowRange"」の定義を追記しただけです。

FlexGridにおける一覧表示させるコード

　今回のサンプルコードでは、コード側はDataGridの場合のコードがそのまま使えるので、変更はありません。

一覧表示の実行

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

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

図3 FlexGridを使った一覧表示の実行例

　DataGridと同じような結果となりましたが、「from_user」欄の列幅が異なります。これはDataGridが該当列に表示されている情報の最大幅に、自動的に調整をしているからです。

AutoSizeColumnsを使用

　DataGridと同じ列幅を実現するためには、FlexGrid側にデータ連結した後に「AutoSizeColumns」を設定する必要があります。

リスト4 AutoSizeColumnsの設定例

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)
            Me.Result_DataGrid.ItemsSource = view
            Me.Result_DataGrid.AutoSizeColumns(0, Me.Result_DataGrid.Columns.Count - 1, 0)
        End Using
    End If
End Sub

　この設定を行えば、FlexGridでも自動的に列幅が設定されます。

図4 列幅調整後の一覧表示の実行例