前回の記事<によってWPF-MVVMパターンの研究ノート2 - MVVM単純な例 >例を引用して、私はMVVMおそらく比較的平易な意味を持っています。同時に、前の二つの記事を読む人々は、私は他のブログからの記事のこのシリーズのほとんどは、私は本当にただ、すべての後、私はeラーニングは確かに起こっている、学んでいた、役割の概要を果たしたこともが知っています他の人は自分自身を指摘しています。この記事は、MVVMを理解するために、再度古い方法を確認します、MVVMは再び深いレベルの理解を求めました。
1.ルック "MV-VM"
M:モデル、モデルは現実の世界から抽象化ということ。
V:すなわちビュー、ビュー、インタフェースそのユーザ入力装置と相互作用します。
どのように2.Viewは、モデルとの対話しましたか?
このとき、テキストボックスの1と関連してモデルビュー「ユーザ名」のテキストとして、役割を果たすことができるバインディングは、ユーザーがアクセスすることができ、「ユーザー名」のモデルテキストボックスの操作によって変更しますA。しかし、実際のプログラミングでは、我々はそのプロパティ(またはメソッド)を見つけるモデルは、多くの場合、そう簡単に閲覧・インターフェース・コントロールに関連付けられていません。たとえば、次のようにクラスの定義時の時間は、時間クラスの時間は、年、月、日の3つのプロパティを持っています
public class Time
{
private string year;
public string Year
{
get
{
return this.year;
}
set
{
this.year = value;
}
}
private string month;
public string Month
{
get
{
return this.month;
}
set
{
this.month = value;
}
}
private string day;
public string Day
{
get
{
return this.day;
}
set
{
this.day = value;
}
}
public Time(string year, string month, string day)
{
this.year = year;
this.month = month;
this.day = day;
}
}
タイムビューは、次のようなことだけでなく、インターフェースとして
その日の形式を示すために - - 私は年間で押しボタン1時間を達成したい月を、押しボタン2、数ヶ月の時間 - ショーの形で - 日。この場合、いくつかの「余分な操作」、すなわち、いくつかの追加の処理後の時間のデータモデルは、ビューに渡すことができ、またその逆を行うことが必要です。今、私たちは、このビューには、いくつかの余分な作業を処理するために「ヘルパー」クラスを必要としているようだ実現しています。ヘルパーは、コードは、対応するView.cs.のように外部の多くの場所でモデル(例えば、時間)に配置することができる含ま そして、私は本当に、前にあるいわゆる分離コードのロジックを処理の大半を行います。
3.その後...
その後、様々なデザインパターンで本が見られ、代替を達成ビューとモデル、ビューを剥がすためには、MVCがありました。MVCの後、私はMV-XXにMVP、MVVMなどを持つようになりました。しかし、ほとんどのこれらのデザインパターンの全てが主に周りの二つの問題です(他のデザインパターンは、私はとは接触を持っていないので、私は、それを少し追加します):
まず、モデルとビューの間の関係は、完全に孤立しますか?一方向または双方向?
第二に、単純なプロセススケジューラ?複雑ルールが処理を完了する必要があります「XX」?
これらの問題は、これで、あなたのビジネスの特徴と変化の主なポイント(例えば言語機能、フレーム特性として)、および顔ので、ご使用の開発環境に応じたパターンを採用するかどうか、関係ありません。
4.しかし...
しかし、MVCで、差のMVPがないだけという技術的な理由の導入であるMVVM(デカップリング応答の変化への決まり文句)、もう一つの大きな理由:ソフトウェア開発チーム方法を変更することを。私たちは、抽出されたコードのロジックの表示層への道を必要とし、ビュー層は芸術に完全にそれを構築するために、非常に純粋です。したがって,,ビューそれぞれの論理層は、プログラマがここに専念できるようにするために、コードの層に描画する必要があります。これが必要です。
①あなたがアーティストのプログラマー出力用にブレンドし、他のXAMLツールを使用しての能力を持って、彼はまた、出力の何かだけでなく、プログラムのためには、一定の「プログラマ」の考え方を持っている必要があり、純粋なUI / UEに焦点を当てただ「ルックス」はそうではなく、実行中の一部。
あなたはプログラマの表示層から②できるようにする必要がありますが、それでも高品質なコードを書くことができます。
5.バインディング、コマンド、AttachBehavior
リコール私たちはいくつかのコード(C#)を表示中(XAML)の後ろを書きたい理由は、単に時にインタフェース・コントロールとユーザーが対話データまたはが何らかのアクションを実行すると、データの一部のデータ処理や転送を渡そうとしたこと。最も単純な例では、対応する操作は、「背景」、外出先に送信「を示している」そうという、MVC時に相互作用が発生したときのインターフェイスのメソッドを呼び出すビューのcontrolerです。従来技術では、そのような「架橋」コードが必要です。WPFでは、「結合」および「コマンド」、およびある他の技術によって層の間の「係合」であってもよい「attachBehavior。」
結合することによって、私たちは、達成するためにデータを渡すことができます;コマンドを通じて、私たちは、操作の実装を呼び出すことができます。結合し、それが完全に放棄または無視することができCSのためのXAMLファイルの後ろにいるようだ、これはXAMLの技術は必要なファイルですので、コマンドは、XAMLで記述されています。これらの定義は、バインディングとコマンドやコードのその他の関連情報が置かれるべき記述については、もちろん、それはビューではなく、モデルではなく、「ViewModelには」です。このためビューViewModelには、オーダーメイド、バインディングに必要な関連情報が含まれており、バインディングのビューに、このようなコンバータのDataContextの提供が、それはほかに、直接使用することができるのCommand View層の定義が含まれ、それが変異体でありますcontrolerは、それがビジネスプロセスのスケジューリングを担当していました。
図は、本当に賞賛、あまりにも単純で、この絵の作者が描く、相互作用図の非常に直感的な表示ビュー\ ViewModelに\モデルです。
だから、AttachBehaviorは、それは何ですか?WPFのプロパティ]コマンドを使用して、AttachProperty通常の状況下でのように、バインディング、ビューとViewModelに間でうまく動作することができます。我々はボタンがあると私たちはいくつかのアクションを実行したい場合は、ボタンがクリックされた、非常に単純に、操作コマンドにカプセル化し、その上にボタンにバインドされました。しかし、我々は、それはロードボタンのだった時に、いくつかの他の操作を実行したい場合は?コマンドボタンを直接Loadイベントによってトリガされませんので、あなたは、コマンドを使用することはできません。あなたは我々だけでMVVMデザインが矛盾している必要があり、対応するCSの文書、およびそのXAMLボタンでLoadイベントハンドラに直接書き込むことはできません。良い解決策ではありませんコントロールは、我々はできる、財産と相続を持っているとAttachPropertyを使用せずにしないと何のボタン、およびロードコマンドによってトリガ書いた、これは、良いことも可能であるが、明らかではない継承にありますattachBehaviorを使用。
6.エンディング
ここで、私はMVVMを理解するだけでなく、限り、あなたは、時間表示のような問題を解決するために、このモデルを使用することができ、ビューモデルの役割を知っています、
以下のように、クラスTimeViewModelを追加
public class TimeViewModel : NotificationObject
{
private Time time;
public Time Time
{
get
{
return this.time;
}
set
{
this.time = value;
this.RaisePropertyChanged(() => this.time);
}
}
public TimeViewModel()
{
time = new Time("1991","02","23");
birthday = time.Year + "-" + time.Month + "-" + time.Day;
}
private string birthday;
public string Birthday
{
get
{
return this.birthday;
}
set
{
this.birthday = value;
this.RaisePropertyChanged("Birthday");
}
}
public bool CanSubmit
{
get
{
return true;
}
}
public void Submit1()
{
Birthday = time.Year + "-" + time.Month + "-" + time.Day;
}
public void Submit2()
{
Birthday = time.Month + "-" + time.Day + "-" + time.Year;
}
}
このViewModelに、表示のための文字列の誕生日の日付形式の定義では、Submit1()とSubmit2()の二つの方法は、2つのボタンがありながら、イベントのバインディングをクリックしてください。
このとき、コンテンツビュービュー
<UserControl x:Class="MVVMDemo.View.TimeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:vm="clr-namespace:MVVMDemo.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="gridLayout">
<Grid.DataContext>
<vm:TimeViewModel />
</Grid.DataContext>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Text="Time:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Path=Birthday,Mode=Default}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button x:Name="Btn1" Content="按钮1:年-月-日" IsEnabled="{Binding CanSubmit}" Grid.Row="2" Grid.Column="0" Width="150" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="Submit1"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button x:Name="Btn2" Content="按钮2:月-日-年" IsEnabled="{Binding CanSubmit}" Grid.Row="2" Grid.Column="1" Width="150" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="Submit2"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
コンパイルとは、プログラムを実行します(プロジェクトは、ダウンロードするにはここをクリックしてください)
(2.23私の誕生日が来ている、誰もが、ハァッ、ハァッ覚えていないだろうかわかりません)
ソース
私の友人に感謝!!あなたは理解することは非常に簡単です!!