会社とWebページで学んだことの復習です。
間違っているかもしれませんので、話半分で読んでください。
正式名称は、Windows Presentation Foundation。
ウィンドウアプリを開発するライブラリ(色んな機能をまとめたもの)です。
WPFの特徴は、下記の項目が主になります。
①見た目を柔軟に変えることができます。
②グラフィックス・ハードウェア(画像の色々な処理をするもの)を活用していて、ベクター・ベース(ベクタは、画像を扱う形式。ラスタ形式もある)のレンダリング・エンジン(データを画面に表示する場所を教えるプログラム)を使っています。
ベクター・ベースだと、UI要素(UIは、ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法)の拡大・縮小・回転がスムーズになります。また、ハードウェア・アクセラレーション(高速に処理できる)により、CPUへの負担が少ないそうです。
③外見(画面のデザイン)を設計するXAMLコードと、プログラム処理の内容を設計するコードが分かれています。プログラム処理の内容を設計するコードは、C#やVBなどを使います。
このプログラム処理の内容を設計するコードのことを、「分離コード」とも言います(今後記事の中でも、「分離コード」と書いていきます)。
MVVM ?
MVVMはModel-View-ViewModelの略で、ModelとView、そしてViewModelで役割分担をさせてプログラムを設計する方法です。
このMVVMについて、これから図とコードで詳しく書きます。
コードは実際に書いたものより簡略化しています。(とても長くなってしまうので・・・)
●Entry画面の図
赤色の線、紫色の線、黄色の線、緑色の線がGridです。
LabelやComboBoxの隣に書いてある数は、同じ種類のコントロール(Bindは別)がその枠にあることを示しています。
1番下のButtonにだけある※印は、Commandを示しています。
!Bind
Bindを行うと、分離コード側でバインドの宣言をした内容(データ)を変更することができます。
!Command
複数の操作(イベントなど)をまとめて実行できるようにすることができます。
Entry画面・XAMLコード(Entry.xaml)
<Window xClass="WpfViewBaseprj.Entry"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlnsx="http://schemas.microsoft.com/winfx/2006/xaml"
xName="Main" >
<Grid>
<GridRowDefinitions>
<RowDefinition Height="1*">
<RowDefinition Height="2*">
<RowDefinition Height="以下略………">
</GridRowDefinitions>
<GridColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="以下略………" />
</GridColumnDefinitions>
<Label Content="{Binding Path=TopTitle}" GridColumn="0" GridRow="0" />
<ComboBox GridColumn="1" GridRow="略………"
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();
}
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ってなんぞ?〜: おっさんどりーむ 〜日本語で理解するプログラミング技術〜