ViewModel のコレクションを ItemsSource プロパティに指定する

(2017/06/29 7:43:52 created.)

ここでは、TabControl コントロールで切り替えるコンテンツに対する ViewModel を次のように定義します。

ContentViewModel.cs

```
namespace Tips_TabControl.ViewModels
```
```
{
```

    public class ContentViewModel : NotificationObject

```
    {
```
```
        /// <summary>
```

        /// 新しいインスタンスを生成します。

```
        /// </summary>
```

        /// <param name="title">タイトルを指定します。</param>

        public ContentViewModel(string title)

```
        {
```
```
            this.Title = title;
```
```
        }
```
```
 
```
```
        private string _title;
```
```
        /// <summary>
```

        /// タイトルを取得します。

```
        /// </summary>
```
```
        public string Title
```
```
        {
```
```
            get { return this._title; }
```

            private set { SetProperty(ref this._title, value); }

```
        }
```
```
    }
```
```
}
```

Title プロパティを持ち、インスタンス生成時に必ず指定するようなクラスになっています。

続いて、このクラスをコレクションとして持つ MainViewModel を定義します。

MainViewModel.cs

```
namespace Tips_TabControl.ViewModels
```
```
{
```

    using System.Collections.ObjectModel;

```
 
```

    public class MainViewModel : NotificationObject

```
    {
```
```
        /// <summary>
```

        /// 新しいインスタンスを生成します。

```
        /// </summary>
```
```
        public MainViewModel()
```
```
        {
```

            this.Contents.Add(new ContentViewModel("Item1"));

            this.Contents.Add(new ContentViewModel("Item2"));

            this.Contents.Add(new ContentViewModel("Item3"));

```
        }
```
```
 
```

        private ObservableCollection<ContentViewModel> _contents = new ObservableCollection<ContentViewModel>();

```
        /// <summary>
```

        /// コンテンツのコレクションを取得します。

```
        /// </summary>
```

        public ObservableCollection<ContentViewModel> Contents

```
        {
```

            get { return this._contents; }

```
        }
```
```
    }
```
```
}
```

これで準備が整ったので、View の XAML コードを記述してみます。

MainView.xaml

<Window x:Class="Tips_TabControl.Views.MainView"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainView" Height="300" Width="300">

    <TabControl ItemsSource="{Binding Contents}" />

```
</Window>
```

お察しの通り、ただ ItemsSource を指定するだけでは足りません。TabControl にはヘッダ部を変更する ItemTemplate プロパティと、コンテンツ部を変更する ContentTemplate プロパティがあるので、これらを適切に指定します。

MainView.xaml

<Window x:Class="Tips_TabControl.Views.MainView"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainView" Height="300" Width="300">

    <TabControl ItemsSource="{Binding Contents}" SelectedIndex="0">

```
        <TabControl.ItemTemplate>
```
```
            <DataTemplate>
```

                <TextBlock Text="{Binding Title}" />

```
            </DataTemplate>
```
```
        </TabControl.ItemTemplate>
```
```
        <TabControl.ContentTemplate>
```
```
            <DataTemplate>
```

                <TextBlock Text="{Binding Title, StringFormat={}これは{0}のコンテンツです。}" />

```
            </DataTemplate>
```
```
        </TabControl.ContentTemplate>
```
```
    </TabControl>
```
```
</Window>
```

TabControl の ItemsSource プロパティに ContentViewModel のコレクションを指定しているため、個々のアイテムの DataContext は ContentViewModel になります。したがって、Title プロパティとデータバインディングすることで、ContentViewModel の Title プロパティが参照されるようになります。