ビジネス Windows ストアアプリ開発とアーキテクチャー : セカンダリタイルを組み込む

皆様、こんにちは。

このシリーズ、途中で(先日のリストにはあったと思いますがw)単発ものを入れますね。シナリオとしては、Contoso Cookbook アプリを用いて、商品詳細ページのApp Bar にコマンドを追加し、ユーザーがセカンダリ タイルを使ってお気に入りのレシピをスタート画面に固定できるようにします。また、Contoso Cookbookにロジックを追加して、アプリ セカンダリ タイルからアクティブになったときに対応するレシピを表示します。

タスク1 – App Bar の変更

最初に必要なのは、 Pin コマンドをアプリケーション バーに追加することです。そこで、現在表示されているレシピを示すセカンダリ タイルを作成するハンドラーを書きます。

1. 以前も使った ContosoCookbook プロジェクトをダウンロードし、Visual Studioで開きます。どれでも良いのですが、App Bar が組み込み済みのもの(後半の方)が望ましいと思います。

2. ItemDetailPage.xaml を開き、アプリケーション バーの"LeftCommands"の部分の末尾に次のステートメントを追加します。

XAML

 <Button x:Name="PinRecipeButton" 
     HorizontalAlignment="Left" 
     Style="{StaticResource PinAppBarButtonStyle}" 
     Click="OnPinRecipeButtonClicked" 
 />

3. StandardStyles.xaml を開き、コメント アウトされた スタイル要素キー PinAppBarButtonStyle を探します。次のようになるように、その箇所をアンコメントします。

XAML

 <!--
         <Style x:Key="RenameAppBarButtonStyle" TargetType="ButtonBase" 
         BasedOn="{StaticResource AppBarButtonStyle}">
         <Setter Property="AutomationProperties.AutomationId" Value="RenameAppBarButton"/>
         <Setter Property="AutomationProperties.Name" Value="Rename"/>
         <Setter Property="Content" Value="&#xE13E;"/>
         </Style> -->
         <Style x:Key="PinAppBarButtonStyle" TargetType="ButtonBase" 
         BasedOn="{StaticResource AppBarButtonStyle}">
         <Setter Property="AutomationProperties.AutomationId" Value="PinAppBarButton"/>
         <Setter Property="AutomationProperties.Name" Value="Pin"/>
         <Setter Property="Content" Value="&#xE141;"/>
         </Style>
 <!--
 &lt;Style x:Key="MusicInfoAppBarButtonStyle" 
     TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">

4. ItemDetailPage.xaml.cs を開き、次の追加ステートメントを使用します。

C#

 using Windows.UI.StartScreen;

5. ItemDetailPage クラスに下記のメソッドを追加します。

C#

 private async void OnPinRecipeButtonClicked(object sender, RoutedEventArgs e)
 {
     var item = (RecipeDataItem)this.flipView.SelectedItem;
     var uri = new Uri(item.TileImagePath.AbsoluteUri);
  
     var tile = new SecondaryTile(
             item.UniqueId,              // Tile ID
             item.ShortTitle,            // Tile short name
             item.Title,                 // Tile display name
             item.UniqueId,              // Activation argument
             TileOptions.ShowNameOnLogo, // Tile options
             uri                         // Tile logo URI
         );
  
     await tile.RequestCreateAsync();
 }

注意:このステップの タイル ロゴUriが参照するのは、イメージフォルダー内の 150 x 150 ピクセルの画像です。セカンダリ タイルの画像は、ローカルでロードする必要があります。それらは普通の画像でできるようにリモートで読み込むことができません。

6. アプリを起動し、ItemDetail ページに移動するためのレシピをタップします。

7. 図 1 に示すように、アプリケーション バーにPin コマンドが含まれていることを、確認します。

図1 pin コマンド

image

8. Windows キーを押しながら D キーを押して Visual Studio に戻って、 [デバッグ] メニューの [デバッグの停止] をクリックします。

※タッチ スクリーンを使用している場合は、画面の左端から左から右へスワイプすることで、Visual Studio に戻ることができます。

タスク2 – OnLaunched を修正する

セカンダリ タイルを作成するのは簡単ですが、アプリがセカンダリ タイルからアクティブ化された場合、ItemDetail ページに移動してレシピを表示する必要があることも認識しておかないといけません。

1. App.xaml.cs を開いて、OnLaunched メソッドを探します。

2. 下記のコードを、if(rootFrame == null) 節の前に挿入します。

C#

 if (args.PreviousExecutionState == ApplicationExecutionState.Running)
 {
     if (!String.IsNullOrEmpty(args.Arguments))
         ((Frame)Window.Current.Content).Navigate(typeof(ItemDetailPage),  
      args.Arguments);
     Window.Current.Activate();
     return;
  
 }

注: Windows ストアアプリケーションが開始されると、LaunchActivatedEventArgs.Kindでなぜそれが開始されたかがわかり、LaunchActivatedEventArgs.PreviousExecutionState で当該アプリがその前の実行後にアプリが終了したかどうかがわかります。同様に、アプリからセカンダリ タイルが開始されると、LaunchActivatedEventArgs.Arguments はアクティベーション引数を提供し、それらはSecondaryTileのコンス トラクター への4 番目のパラメーターに渡されます。ここでは、ユーザー がセカンダリ タイルをタップすると既にアプリケーションが実行されていた場合、ItemDetail ページに移動してレシピを表示します。

3. OnLaunched メソッドの中で、SuggestionsRequestedCommandsRequested のイベントのリスナーの後に、次のステートメントを追加します。アプリからセカンダリ タイルが開始され、既に実行中ではなかった場合、これらのステートメントのレシピのページに移動します。

C#

 // If the app was activated from a secondary tile, show the recipe
 if (!String.IsNullOrEmpty(args.Arguments))
 {
     rootFrame.Navigate(typeof(ItemDetailPage), args.Arguments);
     Window.Current.Content = rootFrame;
     Window.Current.Activate();
     return;
 }

タスク3 レシピをピン止めする

レシピをスタート画面に固定して、タイルからアプリが起動するとき、正しいレシピが表示されていることを確認することによって、今までの修正をテストしてみましょう。

1. F5 を押してアプリケーションをデバッグ実行します。

2. お好みのレシピを表示するには、ItemDetail ページに移動します。

3. App Bar を画面の下からスライドさせて (または Windows ロゴ キーをキー + Z を押して) 、Pinボタンをタップします。

4. Pin to Start をタップしてスタート画面にPin止めし、 ポップアップウィンドウを表示します 。

image

5. セカンダリ タイルをタップするとContoso Cookbookが起動し、対応するレシピが表示されることを確認します。

6. Alt+F4 を押してアプリを終了します。

以上です。次回は、RestServicesをホストしたWindows ストアアプリの完成版かな?

鈴木 章太郎