セクション５はDataGridと同じく、コレクション(ItemsSource)を使って画面に表示するListViewとListBoxを紹介します。

ListView

これはC#側の設定は変えていませんがXAML側をDataGirdからListViewに変えたものです。XAMLは以下になっております。

<ListView Grid.Column="1"
          ItemsSource="{Binding gridSource}"
          Margin="0,10"
          >
    <ListView.Resources>
        <Style TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Background" Value="Aqua"/>
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView AllowsColumnReorder="False">
            <GridViewColumn Header="都道府県" DisplayMemberBinding="{Binding prefLabelPref}"/>
            <GridViewColumn Header="市区町村" DisplayMemberBinding="{Binding prefLabelPref}"/>
            <GridViewColumn Header="天気" CellTemplate="{StaticResource WeatherTemplate}"/>
            <GridViewColumn Header="気温" DisplayMemberBinding="{Binding temperature, StringFormat={}{0:N0}℃, TargetNullValue=不明}"/>
            <GridViewColumn Header="降水確率" DisplayMemberBinding="{Binding rainyPercent, StringFormat={}{0:N0}％, TargetNullValue=不明}"/>
        </GridView>
    </ListView.View>
</ListView>

DataGridと違って、パラメータは少ししか設定していませんがそれでもDataGridと比べて最初から整形されていますね。またタイトル部分はGridViewColumnHeaderのようです。

とはいえ、基本はDataGridと同じようです。確かにListViewはうちの業務でも使っていません。ざっといじってみた所、ListViewは以下ができないようです。

• クラス特有の行のソート機能
• 前回セクションで使っていた行の縞々の設定ができない
• RowHeaderが存在しない

つまり初期設定は必要ない分、簡単だけどDataGridの方がカスタマイズ性が高いと思います。

ListBox

こちらは非常に汎用性の高いコレクション用クラスです。こちらはDataGridの用なヘッダーエリアが存在しないため、自分でデザインを自由に設定する事ができます。以下の画像とXAMLコードを見てください。

<ListBox Grid.Column="1"
          ItemsSource="{Binding gridSource}"
          Margin="0,10"
         >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding prefLabelPref}"/>
                <TextBlock Text="{Binding municipalityLabel}"/>
                <Image Style="{DynamicResource WeatherIconStyle}" Width="25"/>
                <TextBlock Text="{Binding temperature, StringFormat={}{0:N0}℃, TargetNullValue=不明}"/>
                <TextBlock Text="{Binding rainyPercent, StringFormat={}{0:N0}％, TargetNullValue=不明}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ListBoxは最低限だとコードがこれだけで済みますが、画像を見るとまったく整形されていない事がわかります。

コードを見て頂ければわかりますがTemplate内にStackPanelを使う等、この機能は整形も含めて作成者に任されているからです。使う場面はそこまで多くなさそうですが、自由に設計できるのでオリジナリティに満ちた画面が作れるのではないかと思います。

まとめ

いかがでしたでしょうか？コレクションを使ったBindingはDataGridと変わらないため、逆に記事は少なくなってしまいましたが、今回はここまでにしたいと思います。

次はモデル側で画面を作る？！をお送りしたいと思います。