• [アーティクル]

この記事は機械翻訳されたものです。

MVVM

Windows 8 で MVVM パターンを使用する (機械翻訳)

Laurent Bugnion

コード サンプルのダウンロード

XAML ベースのフレームワークのいずれかの経験を持つ任意のプログラマをおそらくは、モデル-ビュー-ビューモデル (mvvm: MODEL-VIEW-VIEWMODEL) パターンの少なくとも聞いたこと。 いくつかは広くすべての Windows プレゼンテーション財団 (WPF)、Silverlight または Windows Phone のアプリケーションで使用されています。 他の人は勘違いをするが、パターン、正確には何か、彼らが彼らが彼らのアプリケーションに複雑さの新しいレベルとして表示を追加するにはしたくないのでそれを避けてきた。

MVVM パターンを使用して、XAML ベースのアプリケーションを構築する必要はありません。 イベント ベースの相互作用などの伝統的なパターンを使用して魅力的なアプリを作成することは絶対に不可能です。 しかし、MVVM などの分離パターンはかなりの数の利点をもたらします。 特に、MVVM パターンできます途方もなく Expression Blend で体験を強化し、促進デザイナー -­開発者のワークフロー。

最近 — 特にと Windows Phone、そしてもちろん、Windows 8 などの新しいプラットフォームへの XAML の拡張 — MVVM の使用状況を全く新しいレベルに主流の練習によってマイクロソフト奨励にのみいくつかの愛好家のコーダーが使用していたニッチ パターンから成長してきた。

実行前の状態

MVVM パターンと共に MVVM 光ツールキットは、XAML ベースのアプリケーションで一般的な操作を容易にするオープン ソースのツールキットを使用する方法について説明します。 例を通じてに従ってくださいするには、Visual Studio 2012、MVVM 光ツールキットの最新バージョンだけでなく、必要です。 メモは無料ですが、Visual Studio の 2012 年の Express エディションを使用できます。 もちろん、他のエディションの使用もできます。

Visual Studio 2012 をダウンロードから bit.ly/vs12rc (究極のプレミアムまたはプロフェッショナル エディション)。 無料の Express 版からダウンロードすることができます bit.ly/vs12express。

MVVM 光ツールキットのインストーラーのダウンロード セクションからダウンロードできます mvvmlight.codeplex.com。 MSI をインストールした後 Readme ページを開き、プロジェクトと項目テンプレートを使用している Visual Studio のバージョンをインストールすることができます。

Windows 8 で MVVM パターン

Windows 8 では、Api は Windows のランタイム (WinRT) という名前の新しいセットに依存しています。 プログラム アプリケーションの Windows のランタイムで実行する (「予測」とも呼ばれます) 3 つの可能な方法があります。

最初の方法はおそらく最も直感的で他の XAML ベースのフレームワークなど、WPF や Silverlight Windows Phone スキルを持つ人々 のためです。 それ XAML をフロント エンドと c# または Visual Basic としてそのロジックを使用します。 Silverlight と WinRT XAML のいくつかの違いが/c#/Visual Basic 投影、スキル、ほとんどの概念は同じです。 実際には、MVVM パターン選択この投影のそれらの古いフレームワークのように同じ理由のためです。

第二に、開発者は、HTML と JavaScript に精通しても Windows ストア アプリ HTML ベースの投影をコード化できます。 XAML で MVVM の成長の人気で、HTML 開発者はあまりにも HTML/JavaScript にデータ バインディングを使用すると思っています。 データ バインディング機構の不足のためしかし、ゼロからスタートし、この機能を再現する必要だった。 これはどのような knockout.js などのフレームワークです (knockoutjs.com） をしています。 そのような MVVM フレームワークは発展途上の Windows の店の apps のも使用できます。

また、WinJS と呼ばれるマイクロソフトからの独自のフレームワークを使用することが可能です。 WinJS (GridView、SemanticZoom など) のコントロールの XAML と似ています、データ バインディングをサポートも。 WinJS の詳細を参照してください bit.ly/winjsbinding。 JavaScript のためのより多くのデータ バインディング フレームワークで詳細に説明 bit.ly/jsbinding。

Hilo プロジェクト (C++ および XAML)

3 番目の WinRT 投影は、そのロジックをフロント エンドとアンマネージ C++ (.NET Framework) なしとして XAML を使用します。 ヒロ (bit.ly/hilocode) サンプル プロジェクト Microsoft パターンから ＆ XAML と C++ Windows ストア アプリケーションの作成のさまざまな側面を示すために目指して慣行。

XAML とデータ バインディングの可用性により、アンマネージ C++ で MVVM パターンを使用できます。 ヒロは、非同期のプログラミング c++ などの他のトピックの間での C++ では、MVVM を使用する方法を示します。 タイルを使用して; ページ ナビゲーション; タッチを使用して; ライセンス認証処理、サスペンドおよび再開します。 高 - 作成­パフォーマンスの経験; アプリケーションのテスト; 認定。

ヒロは、完全なソース コードと完全なマニュアルに付属しています。 それは良いケーススタディ c# だけでなく、Windows 8 では近代的な開発パターンを開始するのには伝統的な C++ 開発者/C++ のスタックのパフォーマンスの強化を希望 Visual の基本的な開発者を使用します。

MVVM についてアラーム

MVVM パターンは、モデル-ビュー-コント ローラー、または MVC という名前の別のよく知られている分離パターンのバリエーションです。 このパターンの多数のフレームワークで、広く使用されている Ruby on Rails の Web アプリケーション フレームワークは、特にだけでなく、ASP.NET MVC はマイクロソフトによって使用されます。 それだけではなく Web アプリケーションが、また広く使用されるデスクトップ アプリケーションを携帯アプリから (イオス例えば)。

分離パターンの主な利点は、それが明確な責任の各レイヤーに割り当てるためにです。 モデルは、データがどこから来ています。 ビューは、ユーザーの表示内容と彼が作動させるです。 コント ローラーとのそれのようにほとんどはオーケストラのディレクター、行動と反応アプリケーションの座標します。 例えば、コント ローラーは、しばしばデータのユーザー入力、アニメーション、およびように開始と停止の応答を表示するなどのアクションの調整を担当です。

これらの明確に定義された責任を開発チームのメンバーはなしが互いのつま先を踏んで各部分に集中できます。 同様に、インタラクション デザイナー、作成または永続性データのように心配する必要はありません。

懸念事項の分離のいい結果分離アプリケーションもテストする方が簡単です。 例えば、クラス モデルのユニット テスト アカウントに見方をすることなくがすることができます。 モデルとビューの間の相互作用を明確に定義されコント ローラーによって調整するため、モックは、または、いくつかのこれらの相互作用をシミュレートすることが可能ですに応じて一貫したテスト条件を作成します。 テストの容易性は MVVM パターンを使用して XAML ベースのアプリケーションの利点の 1 つとしてしばしば言及されて理由です。

MVVM に MVC から

MVC パターンは多くのフレームワークは、それはない最高の適して XAML ベースのフレームワークを （またはに感謝） のための明確な利点がありますが、データ バインディング システム。 この強力なインフラストラクチャは、異なるオブジェクトのプロパティをバインドし、それらの同期を維持できます。 この簡単な偉業のような音が、含意は巨大である：この同期の世話をする、データ バインド システムをさせることで、開発者は UI の更新を心配することなくが、データ オブジェクトのプロパティの値のコンピューティングに集中できます。

また、バインドは緩やかな結合です。 バインディングのみオンデマンドで評価され、バインディングの結果が無効な場合、アプリを破ることはありません。 なぜいくつかのバインディングが正しく評価されません見つけること困難ので「緩み」時々 開発者に頭痛を引き起こすことができます。 ただし、データ構造に密に結合せずに UI を作業しやすくために有利であります。 緩やかなバインディングを持つ UI 要素をビューに移動しても完全に app の外観を下のレイヤーに触れることがなく変更を非常に簡単です。

データ バインドを容易にするため、非常に大きなオブジェクトを避けるために、コント ローラー ビューモデルまたはプレゼンテーション モデルと呼ばれる小さく、スリム オブジェクトは壊れています。 一般的な使用法は、ビューモデルをビューの DataContext として設定して、ビューとビューモデルをペアにします。 実際には、しかし、これは常に該当しない; 特定のビューモデルと、関連付けられた複数のビューを持っていることは珍しくないまたは複雑なビューを持っている複数のビューモデルに分割します。

UI を構築する XAML の使用のおかげで、データ バインディングは、XAML ドキュメントの本文で直接宣言型の方法で表現できます。 これは、相互作用デザイナー、UX の作成を同時にまたは後でさえを引き継ぐ一方どこ開発者がモデルと、ビューモデルについて心配する分離プロセスことができます。

XAML は XML ベースなので、最後に、Expression Blend などのビジュアル ツールとよく動作します。 MVVM はデザイナーは、UX の上、アプリ実行ようにしなくてもできます画面で、デザイン時のデータの視覚化を可能に適切に構成すると、 図 1。

Expression Blend for Windows Store Apps with Design-Time Data
図 1 Expression Blend Windows ストアのアプリとデザイン時のデータの

MVVM 光ツールキット

MVVM パターンの欠点の 1 つであるものは「定型コード」と呼ばれる、いくつかの必要なコードがあること — インフラストラクチャ コードを直接関数を実行しませんが、「動作するように内部配管の」が必要です。 おそらく最高の例の定型コードで示すようにプロパティのオブザーバブル INotifyPropertyChanged インターフェイスの実装とその PropertyChanged イベントに必要なコードです図 2。 このコードは、自動プロパティ (プロパティの getter とセッターの体なし) を使用できないことを示しています。 代わりに、プロパティのバッキング フィールドがあります。 チェック セッターでは、あまりにも頻繁に、PropertyChanged イベントを発生を避けるために行われます。 次に、プロパティ値が変更される場合、PropertyChanged イベントを発生します。

図 2 監視可能なプロパティ

private string _firstName;
public string FirstName
{
  get
  {
    return _firstName;
  }
  set
  {
    if (_firstName == value)
    {
      return;
    }
    _firstName = value;
    var handler = PropertyChanged;
    if (handler != null)
    {
      handler(this, new PropertyChangedEventArgs("FirstName"));
    }
  }
}

これは、もちろん、すべてのオブジェクトのプロパティにはコードの約 20 行必要があります最悪のシナリオです。 さらに、「魔法の文字列」ミスの場合は問題が発生することができますプロパティの名前を識別するために使用されます。 この問題を解決するためには、MVVM の光いくつかのソリューションを提案します。

  • すべてのビューモデルから継承する ViewModelBase クラスの PropertyChanged イベントを発生させるに必要なロジックを格納できます。
  • プロパティは、文字列ではなくラムダ式によって識別できます。 プロパティの名前が変更されたときこれは入力ミスやエラーを防ぎます。
  • 残りの行は、Visual Studio でコード スニペットを使用して自動化できます。

MVVM の光は、迅速かつ簡単に分離されたアプリケーションを作成し、サンプル アプリケーションには提案しますがこの記事では更に有用であるかなりの数のコンポーネントがあります。

この問題は、BindableBase クラスや、CallerMember などを支援するいくつかの新しいクラスをまた紹介します Windows 8­名前属性。 残念ながら、これらは他の XAML ベースのフレームワークを利用できません、共有のコードでは使用できません。

Windows 8 の新しいアプリケーションの作成

新しいアプリケーションを作成する最も簡単な方法は、Visual Studio 12 を起動して MvvmLight (Win8) プロジェクト テンプレートを選択します。 アプリケーションを作成した後、それを起動するすぐに Ctrl キーを押しながら f5 キーを押すことによって可能です。 メインのページが最小限に抑えられ、単に「歓迎する MVVM ライト」に示すように表示図 3.

Creating the New MVVM Light Application
図 3 新しい MVVM の光アプリケーションの作成

さらに興味深いの同じアプリケーションを Visual Studio デザイナーで開いています。ソリューション エクスプ ローラーで、MainPage.xaml で右クリックし、ビュー デザイナーを選択します。 ビジュアルを初めてロードはしばらくの間がかかりますが、すべての準備ができたら、画面を示しています「ようこそ MVVM 光 [デザイン].」Expression Blend でアプリケーションを開いても、同じ結果を示しています。同じファイルを右クリックし、デザイン時テキスト ウィンドウを表示するブレンドで開くを選択します。 Visual Studio 2012 (Express エディションも) と共に式ブレンドの Windows ストアのアプリをインストールあります。 Windows Phone として前に、今すぐコストなしで Expression Blend を使用することが可能です。

何が起こったいくつかの興味深い意味を持ちます。部品、アプリのビジュアル デザイナーを実行し、アプリケーション デザイナーで実行されているかどうかを見つけるための方法です。 実行時に、ビジュアル デザイナーよりも別のビューを見て良い経験の重要な要件の相互作用デザインの中にあります。 これは、デザイン時に動作しないとデータベース接続または Web サービスの呼び出しをバイパスするようにします。 それは、よく知られているデータを作成することもできます — 例えば、アプリを実行することなくが異なる向きや解像度でレイアウトをどのように見えることを確認する非常に長いテキスト。 これは相互作用の設計フェーズで時間とのトラブルが多く保存されます。

開発中のアプリケーションは、Facebook が (しかし、大きく簡略化) インスピレーションの Web サービスへの接続、ユーザーの友人のためのビューアーです。 Web サービスは、ユーザーの友人最初などについての情報を JSON 形式の文字列を返します、最後の名前、生年月日、プロフィール画像への URI、などなど。 この情報はモデル層 (最初に"M"で MVVM) で作成している友人の型のインスタンスに格納されます。 フレンド クラス (新しいアプリケーションによって参照される) MVVM 光ライブラリによって提供される ObservableObject クラスを継承します。 これは、簡単に PropertyChanged イベントを発生させるには、フレンド クラスことができます。 友人を model レイヤーに属していても、この理にかなっていることに注意してください — それは UI、ビューモデル層でこれらのプロパティを複製することなくが友人のプロパティをデータ バインドすることができます。

前述のとおり、観測可能なプロパティを実装するには迷惑が軽減 MVVM 光はいくつか定型コードが必要です。コード スニペットでは、(、PropertyChanged イベントを定義するインターフェイス INotifyPropertyChanged) 内プロパティを追加します。 単に mvvminpcset し、コード スニペットを展開タブを入力します。 タブを使用して、フィールドからフィールドにジャンプするには。プロパティの名前 (FirstName)、その型 (文字列)、バッキング フィールドの名前 (_firstName) を入力し、最後に、既定値 (文字列。空のまま)。 次のスニペットの編集モードを終了するには、esc キーを入力します。 さらに、スニペット プロパティの名と定数を追加します。 我々 は、PropertyChanged イベントに登録するときこれは後で役に立ちます。

Mvvm は、IntelliSense でそれらを見つけるために便利で MVVM の光のすべてのスニペットを開始します。 プロパティの実装のバリエーションはいくつかその他 mvvminpc スニペットです。 Mvvminpcset を使用して、文字列型の LastName という名前の観察可能なプロパティを実装することもできます。

FirstName LastName などのプロパティは、非常に簡単です。 ただし、アプリケーションから Web サービスを取得しますデータ形式が最適ではありません、変換は、場所を取る必要があります。 従来の XAML ベースの開発では、開発者はコンバーター (IValueConverter の実装) を使用します。 MVVM では、ただし、ほとんどのコンバーター単純なプロパティで置き換えることができます。 たとえば、出生の日を考えてみましょう。 JSON フィールド"MM/DD/米国は YYYY,"の形式でです。 日付を表現する方法。 ただし、変換が必要ですので、アプリケーション任意のロケールで実行可能性があります。

前に使用された同じスニペットの mvvminpcset を使用して、DateOfBirthString という名前の文字列型の観察可能なプロパティを追加してみましょう。 次に、ここに示すように別のプロパティを追加 (このプロパティは、バッキング フィールドとして;、DateOfBirthString を使用して 値を適切な DateTime に変換する担当は) です。

public DateTime DateOfBirth
{
  get
  {
    if (string.IsNullOrEmpty(_dateOfBirthString))
    {
      return DateTime.MinValue;
    }
    return DateTime.ParseExact(DateOfBirthString, "d",
      CultureInfo.InvariantCulture);
  }
  set
  {
    _dateOfBirthString = value.ToString("d",
      CultureInfo.InvariantCulture);
  }
}

もう 1 つが必要です。たびに、DateOfBirthString の変更、PropertyChanged イベント生年月日をあまりにも発生する必要があります。 この方法は、データ バインド、値を再度クエリし、再度の変換を強制的します。 これを行うには、DateOfBirthString プロパティのセッターを次のコードに示すように変更します。

set
{
  if (Set(DateOfBirthStringPropertyName, 
    ref _dateOfBirthString, value))
  {
    RaisePropertyChanged(() => DateOfBirth);
  }
}

MVVM は、ObservableObject の光を設定するメソッドは値を変更した場合は true を返します。 これは、あまりにも生年月日プロパティの PropertyChanged イベントを発生するキューです ！ この変換のメカニズムは非常に便利です。 サンプル アプリケーションは、いくつかの場所など、(保存を文字列として) プロフィール画像の URL を URI にたとえば変換します。

実装して、データ サービスをあざける

アプリは、実際のデータ サービスへの接続に再利用できる簡単な DataService 既に持っています。 Web サービスは、JSON 形式のファイルを返す簡単な .NET HTTP ハンドラーです。 .NET フレームワーク 4.5 (非同期/待つキーワード) を導入した非同期プログラミング パターンの使用のおかげで、Web サービスへの接続でショーとして非常に簡単です図 4 (IDataService フェース) と共に。 接続が非同期で、SendAsync メソッド名に示すように発生します。 ただし、await キーワードのおかげで、コードがより複雑にするだろうコールバック メソッド必要はありません。

図 4 は、Web サービスに接続して、Json の逆シリアル化

public interface IDataService
{
  Task<IList<Friend>> GetFriends();
}
public class DataService : IDataService
{
  private const string ServiceUrl
    = "http://www.galasoft.ch/labs/json/JsonDemo.ashx";
  private readonly HttpClient _client;
  public DataService()
  {
    _client = new HttpClient();
  }
  public async Task<IList<Friend>> GetFriends()
  {
    var request = new HttpRequestMessage(
      HttpMethod.Post,
      new Uri(ServiceUrl));
    var response = await _client.SendAsync(request);
    var result = await response.Content.ReadAsStringAsync();
    var serializer = new JsonSerializer();
    var deserialized = serializer.Deserialize<FacebookResult>(result);
    return deserialized.Friends;
  }
}

最後に、JSON 文字列を取得後、JSON シリアライザーが型 FacebookResult の .NET オブジェクトに文字列を逆シリアル化に使用されます。 このクラスは、メソッドが返された後に破棄されますヘルパーだけです。

MVVM の光には、また SimpleIoc と呼ばれる単純な制御の反転 (IOC) コンテナーが含まれます。 IOC コンテナーで MVVM アプリケーションだけでなく、便利ですが、任意のアーキテクチャを分離するコンポーネントです。 IOC コンテナーの行為のためのキャッシュのようなインスタンスをオンデマンドで作成し、アプリケーションのさまざまな場所で解決することができます。

DataService IDataService インターフェイスを実装します。 IOC コンテナーのおかげで、それはデザイナーで使用するデザイン時データを作成し、データ サービスのモックを作成するは簡単です。 このクラスは DesignDataService のように呼び出されます図 5。

図 5 デザイン時データ サービス

public class DesignDataService : IDataService
{
  public async Task<IList<Friend>> GetFriends()
  {
    var result = new List<Friend>();
    for (var index = 0; index < 42; index++)
    {
      result.Add(
        new Friend
        {
          DateOfBirth = (DateTime.Now - TimeSpan.FromDays(index)),
          FirstName = "FirstName" + index,
          LastName = "LastName" + index,
          ImageUrl = "http://www.galasoft.ch/images/el20110730009_150x150.jpg"
        });
    }
    return result;
  }
}

登録して、サービスの呼び出し

サービスが実装されている、今、それらをインスタンス化し、ビューモデルの作成時刻です。 これは、ViewModelLocator クラスのタスクです。 このクラスは、MVVM 光によって有効になって、アプリケーションの構造に非常に重要です。 App.xaml ファイル内の XAML のリソースとして作成されます。 これはビジュアル デザイナー ビューモデルを作成し、デザイン時のコードを実行できるように、XAML マークアップとソース ・ コードの間の重要なリンクを作成します。 登録が表示されます図 6。

図 6 サービスとビューモデルを登録します。

static ViewModelLocator()
{
  ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  if (ViewModelBase.IsInDesignModeStatic)
  {
    SimpleIoc.Default.Register<IDataService, 
      Design.DesignDataService>();
    SimpleIoc.Default.Register<INavigationService,
      Design.DesignNavigationService>();
  }
  else
  {
    SimpleIoc.Default.Register<IDataService, DataService>();
    SimpleIoc.Default.Register<INavigationService>(() => 
      new NavigationService());
  }
  SimpleIoc.Default.Register<MainViewModel>();
}

SimpleIoc コンテナーは、ビューモデルのコンス トラクターは、IDataService と、INavigationService パラメーターとして受け取りますので、自動的にすべてのオブジェクトを作成することができます。 ビューモデルは ViewModelLocator と MainPage の DataContext にデータ バインドを XAML でのプロパティとして公開されます。 このバインディングは、すでに MVVM 光プロジェクト テンプレートで作成されます。 Expression Blend では、ページを開いたときに、データ バインディングを解決した、(必要に応じて)、ビューモデルのインスタンスの作成、DataService (ランタイムまたはデザイン時) の正しいインスタンスにコンス トラクターが実行されます。

データ サービスの呼び出しアクション リレーと公開­に示すコマンドは、 図 7。 このクラスは、ICommand インターフェイスを実装し、UI 要素 (ボタンなど) のコマンドのプロパティにバインドする簡単な方法は、ビューモデルに実装されたメソッドを提供しています MVVM 光ツールキットのコンポーネントです。

図 7 RelayCommand クラス

private RelayCommand _refreshCommand;
public RelayCommand RefreshCommand
{
  get
  {
    return _refreshCommand
      ??
(_refreshCommand = 
      new RelayCommand(ExecuteRefreshCommand));
  }
}
private async void ExecuteRefreshCommand()
{
  var friends = await _dataService.GetFriends();
  if (friends != null)
  {
    Friends.Clear();
    foreach (var friend in friends)
    {
      Friends.Add(new FriendViewModel(friend, _schema));
    }
  }
}

友達を追加友達コレクション型の ObservableCollection <FriendViewModel> です。 そのコンテンツが変更されたとき、そのビューにこのようなコレクションを自動的にデータ バインド リスト コントロールを更新するためこのコレクション型が XAML ベースのフレームワークでよく使用されます。 モデルの友人クラスのインスタンスに、コレクションを直接保存する代わりに、彼らは FriendViewModel と呼ばれる、ビューモデル層の別のクラスにラップしています。 これはモデルに永続化しないビューに固有のプロパティを追加できます。 たとえば、FriendViewModel クラスは、FullName という名前のプロパティを公開します。 アプリケーションの設定によっては、文字列"FirstName、LastName"や「姓, 名」の形式で返すことができます。このようなロジックは、ViewModel クラスから典型的なアプリケーションの下位層に格納するべきではないです。

FullName プロパティは、正しい形式で返すためには、FriendViewModel 型 ChangeFullName のメッセージをリッスンする­SchemaMessage。 これは、メッセンジャー コンポーネント間の強い接続を作成せず、送信者と受信者のシリーズを接続する疎結合イベント バス MVVM のおかげです。 メッセンジャー、メッセージ型を int に追加情報を含む複合オブジェクトなどの単純な値から送信できることに注意してください。

このようなメッセージを受信したときは、FullName プロパティの PropertyChanged イベントを発生します。 FriendViewModel クラスが表示されます図 8。

図 8 FriendViewModel クラス

public class FriendViewModel : ViewModelBase
{
  private FullNameSchema _schema = FullNameSchema.FirstLast;
  public Friend Model
  {
    get;
    private set;
  }
  public FriendViewModel(Friend model, FullNameSchema schema)
  {
    Model = model;
    Model.PropertyChanged += (s, e) =>
    {
      if (e.PropertyName == Friend.FirstNamePropertyName
          || e.PropertyName == Friend.LastNamePropertyName)
      {
        RaisePropertyChanged(() => FullName);
        return;
      }
      if (e.PropertyName == Friend.DateOfBirthPropertyName)
      {
        RaisePropertyChanged(() => DateOfBirthFormatted);
      }
    };
    Messenger.Default.Register<ChangeFullNameSchemaMessage>(
      this,
      msg =>
      {
        _schema = msg.Schema;
        RaisePropertyChanged(() => FullName);
      });
  }
  public string DateOfBirthFormatted
  {
    get
    {
      return Model.DateOfBirth.ToString("d");
    }
  }
  public string FullName
  {
    get
    {
      switch (_schema)
      {
        case FullNameSchema.LastFirstComma:
          return string.Format(
            "{0}, {1}",
            Model.LastName, Model.FirstName);
        default:
          return string.Format(
            "{0} {1}",
            Model.FirstName, Model.LastName);
      }
    }
  }
}

"FirstName、LastName"から「姓, 名」を切り替えるには、命令によってビューモデルはここで示すように送信されます。

private void SetSchema(FullNameSchema schema)
{
  _schema = schema;
  Messenger.Default.Send(new 
    ChangeFullNameSchemaMessage(_schema));
}

メッセンジャーのクラスで動作している分離方法のために、ビューモデルから移動することは非常に簡単でしょう。 設定クラスの例の後の時点では。

ナビゲーションの設定

それからビューの分離コードのおかげで、ナビゲーションが開始されると、Windows 8 のページ間のナビゲーションはかなり簡単です­サービスのすべてのページで公開されるプロパティ。 ビューモデルから移動するのには、しかし、少しのセットアップは必要。 ナビゲーションのための責任があるフレーム ((Frame)Window.Current.Content)。 静的な方法で公開されているために、それは非常に簡単です。 アプリケーションは、スタンドアロンのナビゲーション サービスを公開できます。

public class NavigationService : INavigationService
{
  public void Navigate(Type sourcePageType)
  {
    ((Frame)Window.Current.Content).Navigate(sourcePageType);
  }
  public void Navigate(Type sourcePageType, object parameter)
  {
    ((Frame)Window.Current.Content).Navigate(sourcePageType, parameter);
  }
  public void GoBack()
  {
    ((Frame)Window.Current.Content).GoBack();
  }
}

コードで図 8 SimpleIoc コンテナーでのナビゲーション サービスの登録方法を示しています。 それはビューモデルのコンス トラクターのパラメーターとして注入し、便利な UI ナビゲーション、ビューモデル層から直接開始するのに使用できます。

ときに、プロパティと呼ばれる SelectedFriend ビューモデルで、ナビゲーションを開始の変更。 このプロパティは、観察可能なプロパティ以前設定されていた他の人と同じようです。 このプロパティ データ UI では、ユーザーの操作によってナビゲーションが開始されるのでバインドされます。 それデータ友達コレクションをビューモデルにバインドは、友人を表示するには、GridView を使用と。 このビューモデル MainPage DataContext として設定されるため、バインディングはここに示すようを作成するには、簡単です。

<GridView
  ItemsSource="{Binding Friends}"
  ItemTemplate="{StaticResource FriendTemplate}"
  SelectedItem="{Binding SelectedFriend, Mode=TwoWay}"/>

別 TwoWay バインド GridView SelectedItem プロパティに記載されたビューモデル SelectedFriend 財産間作成されます図 9。

図 9 SelectedFriend、ビューモデルのプロパティ

public const string 
  SelectedFriendPropertyName = "SelectedFriend";
private FriendViewModel _selectedFriend;
public FriendViewModel SelectedFriend
{
  get
  {
    return _selectedFriend;
  }
  set
  {
    if (Set(SelectedFriendPropertyName, 
      ref _selectedFriend, value)
        && value != null)
    {
      _navigationService.Navigate(typeof (FriendView));
    }
  }
}

最後に、ナビゲーションは選択した友人のため、ユーザーの詳細ページに します。 このページでは、DataContext をビューモデルの SelectedFriend プロパティにバインドされます。 これは、もう一度、良いデザイン時経験を保証されます。 もちろん、デザイン時に、RefreshCommand ビューモデルを構築し、SelectedFriend プロパティを設定すると実行されます。

#if DEBUG
private void CreateDesignTimeData()
{
  if (IsInDesignMode)
  {
    RefreshCommand.Execute(null);
    SelectedFriend = Friends[0];
  }
}
#endif

この時点で、UX は、Expression Blend で設計できます。 デザイン時のコードが実行されるため、デザイン時友人の GridView 追加、MainPage を示すいたようにすべてのブレンドが表示されます図 1。 もちろん、データ テンプレートを作成するいくつかの時間とスキル、かかりますが、それ簡単に視覚的な方法でアプリケーションを実行することなくが行うことができます。

ラッピングする

このすべての開発者は、WPF や Silverlight Windows Phone で MVVM パターンに精通している非常に精通して見えるかもしれません。 Windows を実行時と同様のものです。 これら以前のフレームワークで習得した技能は Windows ストア アプリケーション開発を簡単に譲渡です。 もちろん、（非同期のプログラミングを非同期/待っています) などのいくつかの概念は新しいものし、Windows の実行時にコードを変換するにはいくつかの作業が必要です。 しかし、MVVM パターンと MVVM 光ツールキットなどのヘルパーと、開発者は頭の良いスタートを取得し、完全に分離されたアプリケーション パターンの利点を楽しむことができます。

Laurent Bugnion IdentityMine 株式会社などの Windows プレゼンテーション財団 Silverlight、表面、Windows 8、Windows Phone、UX の技術作業マイクロソフト パートナーのシニア ディレクターであります。彼はスイスのチューリッヒに基づいています。

この記事のレビュー、次技術専門家のおかげで。カール ・ エリクソンと Rohit シャルマ