[C# WPF] ObservableCollectionをListBoxとBindingする

2019年4月10日2019年4月18日

ListBoxへのObservableCollectionのBinding手順をよく忘れるのでまとめ。

ObservableCollectionの場合

単純に文字列のコレクションをBindingする場合はこうなります。

サンプルコード

<Window x:Class="Sample_ObservableCollection.MainWindow"
        x:Name="xMainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Sample_ObservableCollection"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <ListBox Margin="20"
             ItemsSource="{Binding JapaneseCalendar, Mode=OneWay, ElementName=xMainWindow}"
             SelectionMode="Single"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             >
    </ListBox>

</Window>

using System.Collections.ObjectModel;
using System.Windows;

namespace Sample_ObservableCollection
{
    public partial class MainWindow : Window
    {
        /// <summary>ListBox要素のコレクション</summary>
        public ObservableCollection<string> JapaneseCalendar { get; private set; } = new ObservableCollection<string>();

        public MainWindow()
        {
            InitializeComponent();

            JapaneseCalendar.Add("明治");
            JapaneseCalendar.Add("大正");
            JapaneseCalendar.Add("昭和");
            JapaneseCalendar.Add("平成");
            JapaneseCalendar.Add("令和");
        }
    }
}

ObservableCollection>の場合

Tupleをコレクションにしている場合です。

単純にコレクションの中身をTupleに変える

こうなります。

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace Sample_ObservableCollection
{
    public partial class MainWindow : Window
    {
        /// <summary>ListBox要素のコレクション</summary>
        public ObservableCollection<Tuple<string, string>> JapaneseCalendar { get; private set; } = new ObservableCollection<Tuple<string, string>>();

        public MainWindow()
        {
            InitializeComponent();

            JapaneseCalendar.Add(Tuple.Create("明治", "meiji"));
            JapaneseCalendar.Add(Tuple.Create("大正", "taisyo"));
            JapaneseCalendar.Add(Tuple.Create("昭和", "showa"));
            JapaneseCalendar.Add(Tuple.Create("平成", "heysay"));
            JapaneseCalendar.Add(Tuple.Create("令和", "reiwa"));
        }
    }
}

表示する要素を指定する

これでは使い物にならないので、表示に使用する要素を指定します。

Xaml側にDataTemplateを設定することで、表示する項目を選択できます。

以下はTupleのItem1を表示にしようするサンプルです。

Binding先をItem2に変えると、Item2が表示に使用されます。

<Window x:Class="Sample_ObservableCollection.MainWindow"
        x:Name="xMainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Sample_ObservableCollection"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <ListBox Margin="20"
             ItemsSource="{Binding JapaneseCalendar, Mode=OneWay, ElementName=xMainWindow}"
             SelectionMode="Single"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Item1}" TextTrimming="CharacterEllipsis"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Window>

おしまい。