プログラミングと日々思ったことなど

ブログ名通りです。仕事でプログラミングをはじめました。

WPFと戦った記録 ⑴【MVVM】

会社とWebページで学んだことの復習です。

間違っているかもしれませんので、話半分で読んでください。


WPF とは?

正式名称は、Windows Presentation Foundation。

ウィンドウアプリを開発するライブラリ(色んな機能をまとめたもの)です。

WPFの特徴は、下記の項目が主になります。


①見た目を柔軟に変えることができます。

②グラフィックス・ハードウェア(画像の色々な処理をするもの)を活用していて、ベクター・ベース(ベクタは、画像を扱う形式。ラスタ形式もある)のレンダリング・エンジン(データを画面に表示する場所を教えるプログラム)を使っています。
 ベクター・ベースだと、UI要素(UIは、ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法)の拡大・縮小・回転がスムーズになります。また、ハードウェア・アクセラレーション(高速に処理できる)により、CPUへの負担が少ないそうです。

③外見(画面のデザイン)を設計するXAMLコードと、プログラム処理の内容を設計するコードが分かれています。プログラム処理の内容を設計するコードは、C#VBなどを使います。
 このプログラム処理の内容を設計するコードのことを、「分離コード」とも言います(今後記事の中でも、「分離コード」と書いていきます)。



MVVM ?

MVVMはModel-View-ViewModelの略で、ModelとView、そしてViewModelで役割分担をさせてプログラムを設計する方法です。

このMVVMについて、これから図とコードで詳しく書きます。
コードは実際に書いたものより簡略化しています。(とても長くなってしまうので・・・)



◎動作環境

Visual Studio 2010

.NET Framework 4.0



●Entry画面の図

f:id:boa0203:20170504180055j:plain

赤色の線、紫色の線、黄色の線、緑色の線がGridです。
LabelやComboBoxの隣に書いてある数は、同じ種類のコントロール(Bindは別)がその枠にあることを示しています。
1番下のButtonにだけある※印は、Commandを示しています。

!Bind
Bindを行うと、分離コード側でバインドの宣言をした内容(データ)を変更することができます。

!Command
複数の操作(イベントなど)をまとめて実行できるようにすることができます。

Entry画面・XAMLコード(Entry.xaml
<Window x:Class="WpfViewBaseprj.Entry" 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Name="Main"  >

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*">
<RowDefinition Height="2*">
<RowDefinition Height="以下略………">
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="以下略………" />
</Grid.ColumnDefinitions>

<Label Content="{Binding Path=TopTitle}" Grid.Column="0" Grid.Row="0" />
<ComboBox Grid.Column="1" Grid.Row="略………" 
Name="Cmbox0"  ItemSource="{Binding Path=Nen}" DisplayMemberPath="tosi"
SelectedValuePath="tosinum" SelectedValue="{Binding Path=Views/sinsei_year}"
SelectionChanged="Cmbox0_SelectionChanged"/>
<Button Content="登録" Command="{Binding Path=CloseCommand}" 
 CommandParameter="{Binding ElementName=Main}" />
<略……… />

</Grid>
</Window>
Entry画面・分離コード(Entry.xaml.cs)
using System;


namespace WpfViewBaseprj
{
   public partial class Entry : Window
     {
          public Entry()
          {
          	InitializeComponent();
          }

          //引数によって、ViewModelを分岐させる。
          //休暇届新規登録用コンストラクタ
          public Entry(int kyuka)
          {
          	InitializeComponent();

          	this.DataContext = new kyukaViewModel(commonDs,cmb)
          	this.Title="休暇届";
          	this.Height=800; this.Width=700;
          }

  		 //休暇届更新画面用コンストラクタ			
          public Entry(int p,DataRow dataRow)
          {
          	InitializeComponent();

          	this.chk1.IsChecked = false;
          	this.chk2.IsChecked = false;
          	this.chk3.....略;

          	this.DataContext = new kyukaViewModel(commonDs,cmb,dataRow);
          	this.Title="休暇届更新";
          	this.Height=800; this.Width=700;

          }

          //作業状況報告用コンストラクタ
           public Entry(int p,DataRow dataRow)
          {
          	InitializeComponent();

          	this.DataContext = new SagyoViewModel(string sagyo);
          	this.Title="作業状況";
          	this.Height=600; this.Width=500;

          }

          //宣言

          private DataSet commonDs;
          private System.Windows.Forms.ComboBox cmb;
          private WpfViewBaseDtoetc.Dto.DtoKyuka kyuka_save;

          //コンボボボックスプロパティチェンジ
          private void Cmbox0_SelectionChanged(object sender,SelectionChangedEventArgs e)
          {
          	string hajimari = string.Empty;
          	ComboBox cb = sender as ComboBox;

          	switch(cb.Name)
          	{
          		case"Cmbox0"
          		hajimari ="shinsei";
          		break;

          		case"Cmbox1;"
          		hajimari="from";
          		break;
          	}
          	((kyukaViewModel)this.DataContext).BindingData(hajimari);
          }
     }
 }

分離コードを見ていただくとわかるように、コンストラクタが3つあります。
この3つにあるDataContextは、どれも違う引数です。
引数が違うことによって、ViewModel内でも違うコンストラクタを呼び出すことができます。
そのため、ViewModelにて各々違うバインド設定ができる・・・画面(ここで言うEntry画面)は1つですが、いくつかViewModelがあれば、違うデータを表示する画面を作ることができるのです。


そして実は、今まで画面、Entry画面と書いていたのですが、これをMVVMではViewと呼びます。
Viewで外側(デザイン)を作り、ViewModelから中身(データ)の処理を行います。
・・・なのですが、まだ続きがあります。(MVVMはModel-View-ViewModel。Modelの説明がまだです)
このViewModelから、Modelへ繋がっていくのです。
この復習は、長くなってしまったので次の記事に書きます。



ここまでの復習ですが、ざっくりと書きました。(違っていたらごめんなさい)
参考にしたWebページは以下になります。

WPFについて、とても詳しく書かれてあります。
連載:WPF入門 - @IT

DataContextを、わかりやすく解説されています。
【WPF基礎】脱WPF初心者のための基礎知識 その1〜DataContextってなんぞ?〜: おっさんどりーむ 〜日本語で理解するプログラミング技術〜