nprogram’s blog

気ままに、プログラミングのトピックについて書いていきます

簡単なWPFアプリケーションを作ります [C#][WPF][Prism][MVVM]

WPF/C#/Prismで、簡単なWPFアプリケーションを作ります

以下のサイトにも記載があるように、WPFアプリケーションでMVVMのアプリケーションを作成するのは難しいと思います。

そのため、PrismというMVVM基盤ライブラリを使用します。

qiita.com

本アプリケーションでは、Prismを使用しているため、NuGetからPrism.Wpfというライブラリをプロジェクトにインストールしてください。

画面の見た目

f:id:nprogram:20180207100504p:plain

プロジェクト構成

f:id:nprogram:20180207100908p:plain

コード

[MainWindow.xaml]

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" Text="{Binding LeftValue}" TextAlignment="Center" VerticalContentAlignment="Center"/>
        <Label Grid.Row="1" Content="+" HorizontalAlignment="Center" VerticalContentAlignment="Center"/>
        <TextBox Grid.Row="2" Text="{Binding RightValue}" TextAlignment="Center" VerticalContentAlignment="Center"/>
        <Label Grid.Row="3" Content="=" HorizontalAlignment="Center" VerticalContentAlignment="Center"/>
        <TextBox Grid.Row="4" Text="{Binding AnswerValue}" IsEnabled="False" TextAlignment="Center" VerticalContentAlignment="Center"/>
        <Button Grid.Row="5" Content ="足し算開始" Command ="{Binding CalcCommand , Mode=OneWay}"/>
    </Grid>
</Window>

MainWindowクラスのコンストラクタにおいて、DataContext にViewModelクラスのインスタンスを設定しています。

[MainWindow.xaml.cs]

using System.Windows;

namespace WpfApp3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new ViewModel();
        }
    }
}

[ViewModel.cs]

using Prism.Commands;
using Prism.Mvvm;

namespace WpfApp3
{
    class ViewModel : BindableBase
    {
        public Model model;

        public ViewModel()
        {
            model = new Model();
        }

        private double _leftValue;
        public double LeftValue
        {
            get { return _leftValue; }
            set { this.SetProperty(ref this._leftValue, value); }
        }

        private double _rightValue;
        public double RightValue
        {
            get { return _rightValue; }
            set { this.SetProperty(ref this._rightValue, value); }
        }

        private double _answerValue;
        public double AnswerValue
        {
            get { return _answerValue; }
            set { this.SetProperty(ref this._answerValue, value); }
        }

        private DelegateCommand calcComamnd;
        public DelegateCommand CalcCommand
        {
            get { return calcComamnd = calcComamnd ?? new DelegateCommand(CalcExecute); }
        }

        private void CalcExecute()
        {
            AnswerValue = model.Calc(LeftValue, RightValue);
        }
    }
}

[Model.cs]

namespace WpfApp3
{
    class Model
    {
        public double Calc(double x, double y)
        {
            return x + y;
        }
    }
}