SHOEISHA iD

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

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

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(FlexGrid)

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

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

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

ダウンロード サンプルソース (43.2 KB)

複数行表示サンプル(CZ1112TwitterSearch)

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

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

2行表示のFlexGridのデザイン例
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開発になくてはならないコンポーネントであると言えるでしょう。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(FlexGrid)連載記事一覧
この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング