会社とWebページで学んだことの復習です。
間違っているかもしれませんので、話半分で読んでください。
WPF とは?
正式名称は、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 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ってなんぞ?〜: おっさんどりーむ 〜日本語で理解するプログラミング技術〜