[WPF] WPF で MVVMLight toolkit を使ってみた。

■ プロジェクトを新規作成

まず、WPF のプロジェクトを作ります。
ファイル > 新規作成 > プロジェクト > インストール済み > テンプレート > Windows > クラシックデスクトップ > WPF アプリケーション
を選択します。
クラシックデスクトップを選択します。
今回は、WMVVMLightSample という名前で作ってみました。
プロジェクトは、クラシックデスクトップの WPF アプリケーションを選択して作成します。

■ NuGet で MVVMLight toolkit をインストール

ソリューション エクスプローラーの「参照」を右クリックして、「NuGet パッケージの管理」を選択します。
「参照」を選択肢、「MVVMLight」で検索して出てきた「MvvmLight」をインストールします。
この段階でいくつかのクラスが作成され、App.xaml にコードが追加されます。
[ 追加されるクラス ]
– ViewModel.MainViewModel
– ViewModel.ViewModelLocator

■ View のファイルを作成

画面遷移を試したいので、今回は「MainView.xaml」と「SecondView.xaml」の二つを作成しました。

.
・View/MainView.xaml

<Page x:Class="WMVVMLightSample.View.MainView"
        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:ignore="http://www.galasoft.ch/ignore"
        mc:Ignorable="d ignore"
        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <StackPanel>
        <TextBlock Text="MainView"/>
        <TextBox Text="{Binding InputText}"/>
        <TextBlock Text="{Binding LabelText}" />
        <Button Content="Button" Command="{Binding Command}"/>
    </StackPanel>
</Page>

.
・View/SecondView.xaml

<Page x:Class="WMVVMLightSample.View.SecondView"
        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:ignore="http://www.galasoft.ch/ignore"
        mc:Ignorable="d ignore"
        DataContext="{Binding Second, Source={StaticResource Locator}}">

    <StackPanel>
        <TextBlock Text="SecondView"/>
        <TextBox Text="{Binding InputText}"/>
        <TextBlock Text="{Binding LabelText}" />
        <Button Content="Button" Command="{Binding Command}"/>
    </StackPanel>
</Page>

■ ViewModel のファイルを作成

「MainViewModel」クラスを編集し、これをコピーして「SecondViewModel」クラスを作成しました。
ViewModel は MainViewModel と SecondViewModel の二つになっています。

.
・ViewModel/MainViewModel.cs

namespace WMVVMLightSample.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        private string _inputText;
        public string InputText
        {
            get { return _inputText; }
            set { _inputText = value; RaisePropertyChanged(); RaisePropertyChanged(nameof(LabelText)); }
        }

        public string LabelText => _inputText + _inputText;

        public RelayCommand Command { get; private set; }

        public MainViewModel()
        {
            Command = new RelayCommand(() => {
                ((MainWindow)App.Current.MainWindow).MainFrame.Source = new Uri("/View/SecondView.xaml", UriKind.Relative);
            });
        }

    }
}

.
・ViewModel/SecondViewModel .cs

namespace WMVVMLightSample.ViewModel
{
    public class SecondViewModel : ViewModelBase
    {
        private string _inputText;
        public string InputText
        {
            get { return _inputText; }
            set { _inputText = value; RaisePropertyChanged(); RaisePropertyChanged(nameof(LabelText)); }
        }

        public string LabelText => _inputText + _inputText;

        public RelayCommand Command { get; private set; }

        public SecondViewModel()
        {
            Command = new RelayCommand(() => { ; });
        }

    }
}

■ ViewModelLocator.cs を編集

「ViewModelLocator」クラスを編集し、作成した SecondViewModel を登録します。

.
・ViewModel/ViewModelLocator.cs

namespace WMVVMLightSample.ViewModel
{
    public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            SimpleIoc.Default.Register<MainViewModel>();
            SimpleIoc.Default.Register<SecondViewModel>();
        }

        public MainViewModel Main { get { return ServiceLocator.Current.GetInstance<MainViewModel>(); } }
        public SecondViewModel Second { get { return ServiceLocator.Current.GetInstance<SecondViewModel>(); } }

        public static void Cleanup() { }
    }
}

■ まとめ

これで、MVVM でアプリを作ることができました。簡単ですね。

■ 参考にさせていただきました

http://blog.okazuki.jp/entry/2015/02/11/233020
https://code.msdn.microsoft.com/windowsdesktop/MVVM-0675495f
http://stackoverflow.com/questions/28966819/mvvm-light-5-0-how-to-use-the-navigation-service

MVVM Light Toolkit について
http://mvvmlight.codeplex.com/license

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中