漫坊亭

社会の底辺プログラマ

(自分用翻訳) Caliburn Micro Part 2: Data Binding and Events

原文へのリンク (google翻訳を使用しています)

Caliburn Micro Part 2: Data Binding and Events

私の以前のブログ記事で、私はどのようにWPFアプリケーションでCaliburnMicroフレームワークを使用しての使用を開始する方法を示しました。CaliburnMicroは、私たちはビューとデータ·モデルとの間の明確な分離を得るためにMVVMデザインパターンを使用してアプリケーションを実装するのに役立ちます。このブログ記事では、CaliburnMicroはデータバインディングやイベントで私たちをアシストについて解説しみましょう。我々は、ユーザインタラクションデータ表示いくつかの簡単なを追加するために、前のブログ記事で概説したアプリケーションの上に構築されます。

Data binding

我々は、モデル内に保存されている数値を表示するためのアプリケーションを取得することから始めます。以前のブログ記事で作成したAppViewModelクラスでは、以下のコードに見られるように、Countと呼ばれるプロパティを追加します。プロパティ値は、我々はあなたが我々がAppViewModelクラスは、プロパティの変更通知をプリフォームするCaliburnMicroによって提供PropertyChangedBaseを拡張行った最後の時間から思い出して50のデフォルト値を与えている_countフィールドに格納されます。むしろ、あなたのすべてのモデルにINotifyPropertyChangedのを実装するよりも、単にあなたのプロパティのセッター内NotifyOfPropertyChangeメソッドを呼び出すことができます。

public class AppViewModel : PropertyChangedBase
{
  private int _count = 50;
 
  public int Count
  {
    get { return _count; }
    set
    {
      _count = value;
      NotifyOfPropertyChange(() => Count);
    }
  }
}

次に、このプロパティの値を表示するビューを変更します。次のようAppView.xamlでは、グリッドにテキストボックスを追加します。

<Grid MinWidth="300" MinHeight="300" Background="LightBlue">
  <TextBlock Name="Count" Margin="20" FontSize="150" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

これでアプリケーションを実行し、TextBlockには、Countプロパティのデフォルト値が表示されていることを参照してください。 f:id:jfactory:20150621205332p:plain

待って...何?私は、Countプロパティを取得するには、任意TextBlockににバインディング設定覚えていないし、まだTextBlockには、正しいデータを表示しています!

私はTextBlockにの名前を設定した通知は、我々はにバインドするプロパティと同じになるように。これはCaliburnMicroが提供する便利なショートカットです。データモデルのプロパティと一致するように自分の名前を設定するなどテキストブロックやテキストボックスなどのデータを表示する要素については、自動的にあなたのためにそれをフックします。

Handling events

次は、表示された値をインクリメントするボタンを追加することで機能してみましょう。これを行うための迅速かつ汚い方法は、コードビハインドでイベントハンドラにボタンのClickイベントをフックすることです。 MVVMパターンを使用している場合しかし、それは通常、最高の(ただし、絶対に必要ではないが)ここで、あなたができるの後ろにコードを使用しないことです。それでは、イベントCaliburnMicroスタイルをどのように扱うかを見てみましょう。まず、このようなCountプロパティをインクリメントするAppViewModelにメソッドを追加します。

public void IncrementCount()
{
  Count++;
}

次のようになりましたAppView.xamlにグリッドにボタンを追加します。

<Grid MinWidth="300" MinHeight="300" Background="LightBlue">
  <RepeatButton Name="IncrementCount" Content="Up" Margin="15" VerticalAlignment="Top" />
  <TextBlock Name="Count" FontSize="150" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

これで、アプリケーションを実行し、アドバタイズとしてカウント値をインクリメントするボタンをクリックします。もう一度あなたは私たちがIncrementCountメソッドにボタンのクリックイベントをフックする多くの作業をする必要はありませんことに気づくでしょう。ボタンなどの特定のユーザインタフェースコントロールのために、あなたは単にあなたがそれをにフックしたいメソッドの名前であることがコントロールの名前を設定することができます。CaliburnMicroは、モデル内の指定された方法へのユーザーコントロールの適切なイベントをフックします。ボタンの場合は、CaliburnMicroはClickイベントを扱っています。 (手動でもその方法我々は次回に見ていきますするためにどのフックアップするイベントを指定することができます)。 f:id:jfactory:20150621205810p:plain

Event guards

CaliburnMicroが自動的IncrementCountメソッドにClickイベントをフックすると、それはまたCanIncrementCount呼ばれるメソッドやプロパティを検索します。 CanIncrementCountメソッドまたはプロパティを追加することで、イベントは、モデルの現在の状態に基づいて処理することが許可されるかどうかを決定する追加のロジックを含むことができます。のはAppViewModelに次のプロパティを追加することで、今これをやってみましょう:

public bool CanIncrementCount
{
  get { return Count < 100; }
}

このロジックは、Countプロパティの値に基づいているので、我々はまた、CanIncrementCountプロパティたびにカウント値が変化するのプロパティ変更通知を上げること必要があります。これは、Countプロパティのセッターのコード行を追加することによって行われます:

NotifyOfPropertyChange(() => CanIncrementCount);

もう一度アプリケーションを実行し、制限に達した後は100に値をインクリメント、ボタンは無効になり、さらに値をインクリメントからユーザーを防ぐことができます。 f:id:jfactory:20150621210036p:plain

このチュートリアルでは、CaliburnMicroが私達の肩オフの仕事の一部を取り、いくつかの方法を見てきました。同時にテストし、保守が容易である頑丈なMVVMアプリケーションを実装しながら、今、あなたはより迅速に、データバインディング、プロパティ変更通知、イベントハンドラとイベントガードを使用することができます。

あなたがここにこのチュートリアルの完全なのVisual Studio2010ソリューションをダウンロードすることができます。値をデクリメントするボタンを追加して、新しいスキルを練習するために使用します。

このブログシリーズの次回では、具体的にイベントパラメータを渡すと、CaliburnMicroとイベント処理のより高度なシナリオを見てみましょう。あなたを参照してください。