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

Article
01/08/2013

皆様、こんにちは。

このシリーズ、途中で（先日のリストにはあったと思いますがｗ）単発ものを入れますね。シナリオとしては、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 を開き、次の追加ステートメントを使用します。

 using Windows.UI.StartScreen;

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

 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 コマンド

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

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

タスク2 – OnLaunched を修正する

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

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

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

 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 メソッドの中で、SuggestionsRequested と CommandsRequested のイベントのリスナーの後に、次のステートメントを追加します。アプリからセカンダリタイルが開始され、既に実行中ではなかった場合、これらのステートメントのレシピのページに移動します。

 // 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止めし、ポップアップウィンドウを表示します。

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

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

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

鈴木章太郎

Share via

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

Additional resources