複数のコンポーネントを活用して、手軽にWPFの表現力を手に入れよう

～「FlexGrid for WPF」と「InputMan for WPF」の連携～

複数行表示サンプル（CZ1112TwitterSearch）

　FlexGridは、1レコードを1行に表示するコントロールです。FlexGridを使うことでソート機能、グループ化機能、編集機能などが手軽に拡張できます。

　では、WPF標準コントロールで実現したような「画像の右側に2行構成で1レコードを表示」するデザインは作成できるのでしょうか。これも、XAMLの知識が少しだけあればFlexGridで同じようなデザインを実現できます。サンプルのXAML定義を変更し、次のような画面を実現してみましょう（サンプルコード内の「CZ1112TwitterSearch」を使用します）。

2行表示のFlexGridのデザイン例

画面デザインの記述

　FlexGridの書き換え部分を見てみましょう。

リスト8　グレープシティコンポーネントのXAML定義例

<c1:C1FlexGrid x:Name="Result_ListBox" Grid.Row="1" IsReadOnly="True" AutoGenerateColumns="False">
    <c1:C1FlexGrid.Columns>
        <c1:Column Width="64">
            <c1:Column.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding profile_image_url}" HorizontalAlignment="Left" 
                            Height="64" Width="64"
                            VerticalAlignment="Top" />
                </DataTemplate>
            </c1:Column.CellTemplate>
        </c1:Column>
        <c1:Column  Width="386">
            <c1:Column.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Width="386">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding from_user}" TextWrapping="Wrap"  Grid.Column="0">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="Blue"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <TextBlock Text="{Binding created_at, Converter={StaticResource DateConverter}}" TextWrapping="Wrap" Grid.Column="1" TextAlignment="Right" />
                        </Grid>
                        <TextBlock Text="{Binding text}" TextWrapping="Wrap" />
                    </StackPanel>
                </DataTemplate>
            </c1:Column.CellTemplate>
        </c1:Column>
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

　このXAMLの特徴は「c1:Column.CellTemplate」を使ってセルテンプレートを定義する点です。セルの中でDataTemplateを使ってデザインを定義しています。これにより、ListBoxの部分を移植する際、見た目の再現性も高くなります。

ロジックの記述

　今回もコードの変更はありません。

まとめ

　本記事により、WPF標準コントロールから市販コンポーネントへの置き換えについてはどのような印象を受けられたでしょうか。一言でいえば「簡単」と感じてもらえたかと思います。

　コンポーネントを使用するという提案をした場合、「コンポーネントを使わないと作れないものなの？」と問われることがあります。WPFではさらに「それって工夫すればXAMLで作れないの？」と問われる場合も多いでしょう。

　しかし、市販コンポーネントを使用するということは「工夫して作らなくて良い」ということであり、作れる・作れないではなく、費用対効果や品質という視点で判断する必要があるでしょう。コンポーネント部分の作成費用だけではなく、コンポーネントを使うことで効率的に品質よくアプリを作成できるという面も考慮しなければなりません。

　WPF標準コントロールからの置き換えも簡単で、WPF標準コントロールには無い機能を付与できる「InputMan for WPF」や「FlexGrid for WPF」は、WPF開発になくてはならないコンポーネントであると言えるでしょう。