[C#][WPF]MVVMらしく画面遷移する方法！

WPFで画面遷移させる方法は、先にタブコントロールを用いた方法を紹介しました。

WPFで画面遷移させる方法は、いくつかありますがここではタブコントロールを用いた方法を紹介します。他の方法も紹介していますので、こちらも参考にしてください。タブを配置するさっそく、タブコントロールを配置してみます。 <Window x...

今回は、DataTemplateを使い、MVVMらしくコードビハインドではなく、プロパティ変更通知イベントにより切り替える方法を紹介します。

私の場合、１つのアプリケーションウィンドウ内で画面遷移させる場合に使用する方法をご紹介いたします。

XAML
1. ContentControl
2. DataTemplate
ViewModel
最後に

XAML

まずは、XAMLのコードです。

<DockPanel>

    <ContentControl Content="{Binding SampleViewModel}" Focusable="False"/>

    <DockPanel.Resources>
        <DataTemplate DataType="{x:Type vm:MainViewModel}">
            <view:MainView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:Sub1ViewModel}">
            <view:Sub1View/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:Sub2ViewModel}">
            <view:Sub2View/>
        </DataTemplate>
    </DockPanel.Resources>
</DockPanel>

一番外側のパネルは、”DockPanel”以外でも問題ありません。

ポイントは、“ContentControl” と “DataTemplate” の部分です。

ContentControl

ContentプロパティにViewModelのプロパティをバインドします。

詳しくは、このあと『ViewModel』の部分で解説しています。

<ContentControl Content="{Binding SampleViewModel}" Focusable="False"/>

DataTemplate

DataTypeプロパティに変数を識別する条件を指定します。
サンプルコードはViewModelのクラスを条件にしてます。

<DataTemplate DataType="{x:Type vm:MainViewModel}">
    <view:MainView/>
</DataTemplate>

条件に一致した場合、<DataTemplate></DataTemplate>で囲んだViewが表示されます。

ViewModel

まずは、スーパークラスを定義します。

public class ViewModelBase : INotifyPropertyChanged
{
    省略
}

そのうえで、各ViewModelを定義します。

public class MainViewModel : ViewModelBase
{
    省略
}

public class Sub1ViewModel : ViewModelBase
{
    省略
}

public class Sub2ViewModel : ViewModelBase
{
    省略
}

そして、画面遷移をコントロールするプロパティを定義します。
ContentControl にバインドしていたプロパティです。

public ViewModelBase SampleViewModel { get; set; }

あとは、SampleViewModelに入れるインスタンスを変えれば、画面も遷移するという仕掛けになります。

switch (画面)
{
    case メイン:
        SampleViewModel = new MainViewModel();
        break;
    case サブ1:
        SampleViewModel = new Sub1ViewModel();
        break;
    case サブ2:
        SampleViewModel = new Sub2ViewModel();
        break;
}

プロパティ変更通知は、各々のプロジェクトに沿って発火してください。