Windowsストアアプリケーション用のMVVMをクックする

Windows 8のアプリケーションで作業を開始したとき、このプラットフォーム用のModel-View-ViewModel（MVVM）テンプレートサポートライブラリを探していました。 私たちはインターネットで時間をかけて検索しましたが、結局、そのようなライブラリはまだ自然に存在していないという事実を受け入れました（検索が不十分だったかもしれませんが、今ではそれほど重要ではありません）。 「何をすべきか？」という質問に対する答えは、自分自身に尋ねました...







当社のEastBanc Technologiesの腸内に特別なライブラリが作成されました（コード名EBT.Mvvm ）。 作成の目的は、Windows 8用の複雑なアプリケーションを開発する際の将来の時間を節約することです。ライブラリには、独自の開発と、検索中に出会ったアイデアや例の両方が含まれています。



だから、私たちは何を持っています：テンプレートの主なアイデアは、ViewModel（ビューモデルと呼びます）とビュー自体（ビュー）の間の接続を弱めることであることを誰もが覚えています。 理想的な状態は、分離コードビューにInitializeComponentを持つコンストラクターのみが含まれ、場合によっては、XAMLで定義できない視覚的動作のコードをサポートする場合です。 したがって、開発者はデザイナーにプレゼンテーションを行い、作業とアプリケーションロジックのテストに集中します。



この記事は、Windows 8でのC＃およびXAMLのプログラミングに既に精通している開発者を対象としています。以下では、ライブラリの主な機能について、その使用とコメントのコード例として説明します。 それでは、行きましょう：

1.基本クラスViewModel

MVVMテンプレートについて最初に説明するのは、ビューモデルの基本クラスです。 主な目的は、プロパティが変更されたときにINotifyPropertyChangedインターフェイスと自動通知の便利な機能をサポートすることです。 使用例：

public class SimpleViewModel : ViewModel { private int _number; public int Number { get { return _number; } set { OnPropertyChange(ref _number, value); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここではコメントなしですべてが明確になります。 プロパティが変更されたときに自動通知するためのオーバーロード関数のセットがあることを追加する必要があります。 フィールドへの書き込みをまったく回避する方法もあります。 これは、いわゆるバッキングフィールドを指します。 例は、上記のコード例の_numberフィールドです。 同時に、自動通知をサポートするプロパティを引き続き作成できます。 ビューモデルにバインド用のプロパティが多数ある場合、これは十分便利です。 以下の例は、この機能に基づいてプロパティを作成する方法を示しています（フィールドは必須ではありません）。

 public string Text { get { return GetPropertyValue(() => Text); } set { SetPropertyValue(() => Text, value); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.チーム

使い慣れた必要なRelayCommandコマンドハンドラー。 ButtonBase基本クラス（ボタン、メニュー項目、ハイパーリンク）のCommandプロパティにバインドされ、ICommandインターフェイスをサポートします。 かけがえのないものであり、長い間実装されてきました。 ただし、次のことに注意する必要があります。

 public class SimpleViewModel : ViewModel { public SimpleViewModel() { SampleCommand = new RelayCommand(OnSample); } public RelayCommand SampleCommand { get; private set; } private void OnSample() { // TODO Do something here. } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <Button Command="{Binding SampleCommand}" Content="Button Text" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.イベントハンドラーのバインド

イベントハンドラを便利にバインドする機能を追加しました。 MVVMは、UIイベント処理をビューモデル側で行う必要があることを意味します。 ちょっとしたトリックなしでこれを行うことは不可能です。 ユーザーインターフェイス要素の添付プロパティをバインドすることで構成されます。 現在、ライブラリは多数のイベントの処理をサポートしています。 リストは、必要に応じて、開発者自身が拡張できます。 例として、TextBlock要素のTappedイベントの処理を次に示します。

 public class SimpleViewModel { public SimpleViewModel() { TappedCommand = new EventCommand<Point>(OnTapped); } public IEventCommand TappedCommand { get; private set; } private void OnTapped(Point point) { TappedCommand.PreventBubbling = point.X < 100; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <TextBlock Mvvm:EventBinding.Tapped="{Binding TappedCommand}" Text="Tap me"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、TappedCommand.PreventBubbling = point.X <100の行に注意する価値があります。実際、対応するフラグを設定することにより、イベントのさらなる処理（処理済み）をキャンセルする機能を提供しています。



現在、イベントのサポートがあります：SelectionChanged、Click、ItemClick、KeyDown、KeyUp、PointerReleased、PointerPressed、PointerMoved、PointerCanceled、PointerEntered、PointerExited、PointerCaptureLost、Tapped、RightTapped、PointerWheelChanged、ManipulationStartted、ManipulationStarttedt、 、ロード済み。

4.さまざまな画面モードをサポート

私たちの意見では、これはライブラリの最も興味深い機能です。 対象となるタブレット向けのアプリケーションには不可欠です！ 4つの画面モードがあり、それらすべてをサポートすることは良いトーンであることを忘れないでください。 現在の画面モードに応じて、ユーザーインターフェイス要素の表示を変更する2つのメカニズムがあります。

• 可視性管理。 特定の各要素の可視性の変更に基づいており、簡単なシナリオに便利です。
• スタイルの変更。 パフォーマンスの観点から、これは複雑なユーザーインターフェイスシナリオにとってより効率的な方法である場合があります。

 <TextBlock behaviors:OrientationBehavior.Orientations="Landscape,Filled,Portrait" Text="Not snapped"/> <TextBlock behaviors:OrientationBehavior.Orientations="Snapped" Text="Snapped"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の例では、画面モードに応じてリストの向きを変更します。

 <GridView ItemsSource="{Binding YourItems}"> <behaviors:OrientationBehavior.LandscapeStyle> <!-- This style will be applied in landscape, filled and portrait modes. --> <Style TargetType="ListViewBase"/> </behaviors:OrientationBehavior.LandscapeStyle> <behaviors:OrientationBehavior.SnappedStyle> <!-- This style will be applied in the snapped mode. --> <Style TargetType="ListViewBase"> <Style.Setters> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </behaviors:OrientationBehavior.SnappedStyle> </GridView>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素のスタイルを変更する方法は、非常に便利で強力な機能です。 使用するときは、次のことを覚えておく必要があります。

• この機能を使用する場合、要素にStyleプロパティを使用できません。
• 画面モードの1つに適用された場合、少なくともこのスタイルは、他のモードが指定されない限り、すべてのモードに適用されます。
• 画面モードごとに、これらのスタイルがそれぞれ優先されます。 たとえば、ポートレートの向きとスナップのスタイルがある場合、ポートレートスタイルが横モードと塗りつぶしモードに適用されます。 スタイルが1つだけ指定されている場合、すべてのモードで適用されます。

スタイル変更メソッドを使用することの良い結果は、ContentControl / ContentPresenterを使用してこのアプローチを使用すると、ビューテンプレートを完全に変更できることです。 以下にこれを行う方法を示します。

 <Grid Name="main"> <ContentControl> <behaviors:OrientationBehavior.LandscapeStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Landscape"/> <!-- Something in landscape mode --> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.LandscapeStyle> <behaviors:OrientationBehavior.PortraitStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Portrait"/> <!-- Something in portrait mode --> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.PortraitStyle> <behaviors:OrientationBehavior.SnappedStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Snapped. Only text here"/> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.SnappedStyle> </ContentControl> </Grid>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、この方法で、不必要な問題なくスナップモードに切り替えることができます。

5. ViewModelからViewメソッドを呼び出す

ビューモデルからユーザーインターフェイスメソッドを呼び出す必要がある場合があります。 例として、特定のフィールドに入力フォーカスを設定する必要があります。 これは、ControlWrapperを使用して実行できます。

 public class SimpleViewModel : ViewModel { public SimpleViewModel() { TextBoxWrapper = new ControlWrapper(); } public ControlWrapper TextBoxWrapper { get; private set; } public void GotoField() { TextBoxWrapper.Focus(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <TextBox Mvvm:ElementBinder.Wrapper="{Binding TextBoxWrapper}"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6.アニメーションのイベントトリガー

このメカニズムにより、ビュー要素でイベントが発生したときにアニメーションを開始できます。 繰り返しになりますが、コードビハインドの1行のコードではありません。 このメソッドは、イベントハンドラーのバインドに基づいています。 XAMLでは、特別なTriggerCommandコマンドを定義する必要があります。

 <Grid> <FrameworkElement.Resources> <Storyboard x:Key="FadeOut"> <PointerDownThemeAnimation Storyboard.TargetName="MyElement"/> </Storyboard> <Storyboard x:Key="FadeIn"> <PointerUpThemeAnimation Storyboard.TargetName="MyElement"/> </Storyboard> </FrameworkElement.Resources> <Border x:Name="MyElement" Width="100" Height="100" Background="Red"> <mvvm:EventBinding.PointerPressed> <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/> </mvvm:EventBinding.PointerPressed> <mvvm:EventBinding.PointerReleased> <mvvm:TriggerCommand Storyboard="{StaticResource FadeIn}"/> </mvvm:EventBinding.PointerReleased> </Border> </Grid>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

7.コンテキストメニューのバインド

ContextMenuBehaviorを使用すると、タッチスクリーンを右クリックまたはタップすることで、コンテキストメニューをすばやく便利に表示できます。 ビューでは、コンテキストメニューが呼び出される要素にバインディングを作成するだけです。 モデルで、コマンドとハンドラーのリストを定義します。

 public class MyViewModel : ViewModel { private IList<UICommand> _contextMenuCommands; private string _text; public string Text { get { return _text; } set { OnPropertyChange(ref _text, value); } } public IList<UICommand> ContextMenuCommands { get { return _contextMenuCommands ?? (_contextMenuCommands = new List<UICommand> { new UICommand("Copy", OnCopy), new UICommand("Paste", OnPaste), }); } } private void OnCopy(IUICommand command) { var content = new DataPackage(); content.SetText(Text); Clipboard.SetContent(content); } private async void OnPaste(IUICommand command) { var content = Clipboard.GetContent(); Text = await content.GetTextAsync(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <TextBlock behaviors:ContextMenuBehavior.Commands="{Binding ContextMenuCommands}" Text="{Binding Text}" MinWidth="300" Height="40"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

8.スナップポップアップ

PopupBehaviorでは、マウスの右ボタンをクリックするか、タッチスクリーンをタップすると、ポップアップ表示機能を作成できます。 以下のコード例からすべてが明確になるはずです。

 <TextBlock Text="Tap or right click here for more information" behaviors:PopupBehavior.Placement="Above"> <behaviors:PopupBehavior.Content> <DataTemplate> <TextBlock Text="More information..."/> </DataTemplate> </behaviors:PopupBehavior.Content> </TextBlock>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

9.インタースティシャルナビゲーション

開発者にとっての問題の1つはページナビゲーションです。ビューからFrameを呼び出して遷移を行う場合、分離コードの純度を維持することはあまり便利ではありません。 また、ほとんどの場合、ビューモデルでナビゲートイベントとナビゲートイベントを処理する必要があります。



目標を達成するために、アプリケーションのメインモデルを作成します。

 public class RootModel { public RootModel() { NavigationState = new NavigationState(); HomePageModel = new HomePageModel(this); } public NavigationState NavigationState { get; set; } public HomePageModel HomePageModel { get; set; } public bool CanGoBack { get { return NavigationState.CanGoBack; } } public void GoBack() { NavigationState.GoBack(); } public void GoToHomePage() { NavigationState.Navigate(typeof (HomePage)); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションを起動するときに、メインモデルをオブジェクトのビジュアルツリーの最上位要素のコンテキストとして設定し、NavigationStateラッパークラスをフレームに関連付けます。

 sealed partial class App : Application { ... public RootModel RootModel { get; private set; } protected override void OnLaunched(LaunchActivatedEventArgs args) { RootModel = new RootModel(); var frame = new Frame { DataContext = RootModel }; // Bind the NavigationState and the frame using the ElementBinder class. // You can also do this in XAML. ElementBinder.SetWrapper(frame, RootModel.NavigationState); Window.Current.Content = frame; Window.Current.Activate(); RootModel.GoToHomePage(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、HomePageModelビューモデルはOnNavigatingおよびOnNavigatedイベントを処理できます。 また、_rootModelへの保存されたリンクを介して他のページに移動します。 OnNavigatingは遷移キャンセルをサポートしていることに注意してください（ref bool cancelパラメーター）。

 public class HomePageModel : PageModel // Or implement IPageModel. { private RootModel _rootModel; // You can call _rootModel.NavigationState.Navigate(…) public HomePageModel(RootModel rootModel) { _rootModel = rootModel; } public override void OnNavigated() { // TODO Do something here to initialize/update your page. } public override void OnNavigating(ref bool cancel) { // TODO Do something here to clean up your page. } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

XAMLで、バインディングが正しく機能するように正しいDataContextページを設定します。

 <Page x:Class="YourNamespace.HomePage" ... DataContext="{Binding HomePageModel}"> <!-- Your page content goes here --> </Page>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべて、結果が達成されました。 これで、ページを作成し、それらをビューモデルにリンクできます。 後者はOnNavigatingおよびOnNavigatedイベントを処理し、ナビゲーションを制御します。

10.スケルトンプロジェクトを生成するためのテンプレート

ライブラリを使用して、プロジェクトのフレームワークをすばやく作成する機会を提供しました。 プロジェクトテンプレートはVisual Studioに埋め込まれ、Windowsストアプロジェクトに表示されます。 このテンプレートは、Visual Studioプロジェクトテンプレートのオンラインライブラリでも入手できます。

今のところ

まあ、これは1つの記事に十分なようです。 実際、ライブラリの機能のすべてではありませんが、ほとんどがリストされていますが。 また、状態を保存および復元するコンバーター、チャームパネルのアシスタントもあります。 Habrachitateliは、このプロジェクトを直接インストールして使用することで、残りを独立して学習できるようになります。 次の項目にスムーズに進んでください：

どこからダウンロードできますか？

興味のある飼育者は、説明されているライブラリの動作を確認したいと思うでしょう。 とても簡単です。 ライブラリはNuget Packageとしてダウンロードできます。 プロジェクトはCodePlexでも開始されます。



スタジオにインストールする最も速い方法は、[ツール]-> [拡張機能と更新プログラム]を使用して12のスタジオで検索を使用することです。 [オンライン]を選択し、検索バーにWindows 8 MVVMキーワードを入力します。

最後に

「EBT.Mvvmライブラリは、「に基づいて配布されます」、「基本、開発者は起こりうる結果について責任を負いません...」



しかし、真剣に、私たちのライブラリが若いWindows 8プラットフォームのアプリケーション開発者を助けて、私たちが遭遇した問題を克服する時間を節約できたら嬉しいです。 私たちの能力と能力を最大限に発揮するために、私たちはこのソフトウェアプロジェクトを常に修正および改善しています。 あなたの提案やコメントはこれに役立ちます。



開発に携わるすべての開発者の幸運を祈っています。 Windowsストア用のアプリケーションをさらに作成しましょう！