MVVMの基本的なプロジェクトを作る

Viewを作る

今回は単純な足し算をするプログラムをMVVMで作ります。
まず、ViewにあたるXAMLを作ります。

今回のViewは最初に作成されたMainPage.xamlを使います。
3

MainPage.xamlをこのようなページにしましょう。
4

1つめのたす値であるTextBoxと2つめのたす値であるTextBox、更に足した結果を表示するTextBox、
計算開始するButtonが設置されていれば大丈夫です。

XAMLはこのようにしました。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock HorizontalAlignment="Left" Margin="108,126,0,0" TextWrapping="Wrap" Text="Sum" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <TextBox HorizontalAlignment="Left" Margin="180,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
    <TextBox HorizontalAlignment="Left" Margin="564,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
    <TextBox HorizontalAlignment="Left" Margin="909,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222" IsReadOnly="True"/>
    <TextBlock HorizontalAlignment="Left" Margin="456,285,0,0" TextWrapping="Wrap" Text="+" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <TextBlock HorizontalAlignment="Left" Margin="825,285,0,0" TextWrapping="Wrap" Text="=" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <Button Content="Calc" HorizontalAlignment="Left" Margin="1008,417,0,0" VerticalAlignment="Top" Height="68" Width="126" FontSize="36"/>

</Grid>

Modelを作る

次に計算に用いる値と、計算する処理を保持するModelクラスを作ります。
今回の場合、Modelにあたるのは「足し算」という概念なのでSumクラスを作ります。
SumクラスはObservableObjectを継承します。
ObservableObjectはMVVMLightToolkitのクラスです。

public class Sum:ObservableObject
{
    //コンストラクタ
    public Sum()
    {
    }
}

続いて、Sumクラス内にフィールドを作ります。
足し算Modelは、フィールドとして
・1つめのたす値(int型)
・2つめのたす値(int型)
・足した結果の値(int型)
の3つのフィールドを所持する必要があります。
(なぜなら値が2つとその結果1つがないと足し算ができないから)
MVVMを実現するにあたって、後々のことを考えて、フィールドをプロパティでカプセル化する構造にする必要があります。

//1つめのたす値
private int value1;

public int Value1
{
    get { return value1; }
    set { value1 = value; }
}
//2つめのたす値
private int value2;

public int Value2
{
    get { return value2; }
    set { value2 = value; }
}
//足した結果
private int result;

public int Result
{
    get { return result; }
    set { result = value; }
}

次に足し算を行うメソッドをつくります。
これは簡単で、自身のフィールドであるValue1とValue2を足した結果をResultにいれるだけです。

//足し算を実行するメソッド
public void LaunchSum()
{
    Result = Value1 + Value2;
}

Sumクラス全体はこのようになります。

public class Sum
{
    //1つめのたす値
    private int value1;

    public int Value1
    {
        get { return value1; }
        set { value1 = value; }
    }
    //2つめのたす値
    private int value2;

    public int Value2
    {
        get { return value2; }
        set { value2 = value; }
    }
    //足した結果
    private int result;

    public int Result
    {
        get { return result; }
        set { result = value; }
    }

    //足し算を実行するメソッド
    public void LaunchSum()
    {
        Result = Value1 + Value2;
    }

    //コンストラクタ
    public Sum()
    {
    }
}

ViewModelを作る

最後にViewとModelとの橋渡しを行うViewModelを作成します。
MVVMLightToolkitを入れると、すでにViewModelフォルダにMainViewModelが入ってるのでこれをそのまま利用します。
ViewModekはModelを所持するので、今回のModelであるSumクラスをフィールドとして所持し、プロパティでカプセル化します。

public class MainViewModel : ViewModelBase
{
     //Model
    private Sum sumModel;

    public Sum SumModel
    {
        get { return sumModel; }
        set { sumModel = value; }
    }

    //コンストラクター
    public MainViewModel()
    {
           SumModel = new Sum();
    }
}

自分でViewModelを作る場合は、MVVMLightToolkitのViewModelBaseクラスを継承する必要があります。

これでMVVMに必要な基本的なファイル構造は完成しました。
もちろん、別のページ(View)にも適用させたかったらViewが複数必要ですし、引き算も実行させたかったら引き算のモデルクラスを作る必要があります。
ただし、MVVMを実現するにあたって、最低View、Model、ViewModelの3つが必要となります。

5

基本的なファイル構造は完成しましたがこのままではプログラムは足し算をしてくれません。
次回以降で徐々にViewとModelとViewModelをつなげていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください