第9回 効果的に情報を提示する：連載：Windowsストア・アプリ開発入門（6/7 ページ）

Windowsストアアプリの「タイル」や「トースト通知」などの情報提示手段について学び、「ライブタイル」と「セカンダリタイル」を実装してみよう。

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

記事一覧画面にアプリバーとPinButtonコントロールを追加する

　「FeedPage.xaml」ファイルに、次のようにXAMLコードを追記するだけである。

<Page
  x:Name="pageRoot"
  x:Class="AtmarkItReader.FeedPage"
  ……省略……
  d:DataContext="{Binding Feeds[0], Source={d:DesignData Source=/SampleData/FeedsDataSample.json, Type=dm:FeedsData}}"
  xmlns:tl="using:AtmarkItReader.Tile"
  >
  <!-- 【第9回】xmlns:tlを追加 -->

  <Page.Resources>
  ……省略……
  </Page.Resources>

  <!-- 【第9回】アプリバーと「ピン留め」ボタンを追加 -->
  <Page.BottomAppBar>
    <CommandBar Background="#00a2e8" >
      <CommandBar.PrimaryCommands>
        <tl:PinButton />
      </CommandBar.PrimaryCommands>
    </CommandBar>
  </Page.BottomAppBar>

  ……省略……

記事一覧画面にアプリバーとPinButtonコントロールを追加する（XAML）
太字の部分を追加する。

　これで実行すると、記事一覧画面でアプリバーを出せて、その右端には［ピン留めする］ボタンが表示されるはずだ。ただし、このボタンをタップしても何も起こらない。次に［ピン留めする］ボタンをタップしたときの処理を実装しよう。

セカンダリタイルを登録／解除するコード

　PinButtonコントロールに戻って、セカンダリタイルを登録／解除するコードを実装しよう。

　まず、イベントを受けて処理本体を呼び出す部分から（次のコード）。

protected override void OnKeyUp(Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
  base.OnKeyUp(e);

  // スペースキーかエンターキーを押されたときは処理本体を呼び出す（Clickイベントの代わり）
  if (e.Key == Windows.System.VirtualKey.Space || e.Key == Windows.System.VirtualKey.Enter)
    ProcessPin();
}

protected override void OnTapped(Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
  base.OnTapped(e);

  // マウスクリックか指でタップされたときは処理本体を呼び出す（Tappedイベント）
  ProcessPin();
}

private async void ProcessPin()
{
  // フラグを見て呼び出す処理本体を振り分ける
  if (!_isUnPin)
    await CreateSecondaryTileAsync();
  else
    await RemoveSecondaryTileAsync();
}

PinButtonコントロールでイベントを受けて処理本体を呼び出すコード（C#）
PinButtonクラスにこのコードを追加する。処理本体のメソッドを実装していないので、まだビルドできない。

　「ピン留めする」ためのCreateSecondaryTileAsyncメソッドは、次のようになる。

private async System.Threading.Tasks.Task CreateSecondaryTileAsync()
{
  FixAppBar(); // このメソッドについては後述

  // セカンダリタイルのオブジェクトを作る
  var secondaryTile = new Windows.UI.StartScreen.SecondaryTile()
    {
      TileId = this.TileId, // 【必須】タイルを識別するID。削除時にも使う
      DisplayName = this.DisplayName, // 【必須】タイルの左下に表示するテキスト
      Arguments = this.Arguments, // セカンダリタイルからの起動時に渡される引数
      RoamingEnabled = true,  // 既定でtrue（＝ローミングされる）
    };

  // 背景色や画像などの設定
  secondaryTile.VisualElements.BackgroundColor = Windows.UI.Color.FromArgb(0x00,0x92,0xd0,0x50); // 背景色を緑色に
  secondaryTile.VisualElements.ForegroundText = Windows.UI.StartScreen.ForegroundText.Light; // 表示するテキストの色

  secondaryTile.VisualElements.ShowNameOnSquare150x150Logo = true; // 中タイルにテキストを表示する
  secondaryTile.VisualElements.ShowNameOnWide310x150Logo = true; // ワイドタイルにテキストを表示する
  secondaryTile.VisualElements.ShowNameOnSquare310x310Logo = true; // 大タイルにテキストを表示する

  secondaryTile.VisualElements.Square70x70Logo = new Uri("ms-appx:///Assets/MiniLogo.png"); // 小タイルの画像
  secondaryTile.VisualElements.Square150x150Logo = new Uri("ms-appx:///Assets/Logo2nd.png"); // 【必須】中タイルの画像
  secondaryTile.VisualElements.Wide310x150Logo = new Uri("ms-appx:///Assets/WideLogo.png"); // ワイドタイルの画像
  secondaryTile.VisualElements.Square310x310Logo = new Uri("ms-appx:///Assets/LargeLogo.png"); // 大タイルの画像

  // エンドユーザーにピン留めの許可を求めるリクエストを発行する
  var success = await secondaryTile.RequestCreateForSelectionAsync(
                  GetElementRect(this),  // このメソッドについては後述
                  Windows.UI.Popups.Placement.Below
                );

  if (success)
  {
    // ピン留めできたので、表示を切り替える
    _isUnPin = true;
    base.Icon = _unPinIcon;
    base.Label = _unPinLabel;
  }

  FreeAppBar(); // このメソッドについては後述
}

「ピン留めする」ためのCreateSecondaryTileAsyncメソッド（C#）
PinButtonクラスにこのコードを追加する。「ピン留め解除」メソッドを実装していないので、まだビルドできない。
また、コード中のFixAppBar／GetElementRect／FreeAppBarメソッドについては後述。

　上のコードに出てきたFixAppBar／GetElementRect／FreeAppBarの3つのヘルパーメソッドのコードは次のようなものだ。

// GetElementRect：UIコントロールの表示位置を取得するメソッド
public static Windows.Foundation.Rect GetElementRect(Windows.UI.Xaml.FrameworkElement element)
{
  Windows.UI.Xaml.Media.GeneralTransform buttonTransform
    = element.TransformToVisual(null);
  Windows.Foundation.Point point
    = buttonTransform.TransformPoint(new Windows.Foundation.Point());
  return new Windows.Foundation.Rect(
               point,
               new Windows.Foundation.Size(element.ActualWidth, element.ActualHeight)
             );
}

// FixAppBar：下側のアプリバーを開いたままにする
private void FixAppBar()
{
  var appBar = GetBottomAppBar();
  if (appBar != null)
    appBar.IsSticky = true;
}

// FreeAppBar：下側のアプリバーを閉じられるようにする
private void FreeAppBar()
{
  var appBar = GetBottomAppBar();
  if (appBar != null)
    appBar.IsSticky = false;
}

private AppBar GetBottomAppBar()
{
  var f = Windows.UI.Xaml.Window.Current.Content as Frame;
  if (f == null)
    return null;

  var p = f.Content as Page;
  if (p == null)
    return null;

  return p.BottomAppBar;
}

「ピン留めする」メソッドで使うヘルパーメソッド（C#）
PinButtonクラスにこのコードを追加する。「ピン留め解除」のメソッドを実装していないので、まだビルドできない。

　最後に、「ピン留め解除」のためのRemoveSecondaryTileAsyncメソッドは、次のようになる。

private async Task RemoveSecondaryTileAsync()
{
  FixAppBar();

  // セカンダリタイルのオブジェクトを作る（解除時はTileIdの指定だけでよい）
  var secondaryTile
    = new Windows.UI.StartScreen.SecondaryTile(this.TileId);

  // エンドユーザーにピン留め解除の許可を求めるリクエストを発行する
  bool success
    = await secondaryTile.RequestDeleteForSelectionAsync(
                  GetElementRect(this), Windows.UI.Popups.Placement.Above);
  if (success)
  {
    // ピン留め解除できたので、表示を切り替える
    _isUnPin = false;
    base.Icon = _pinIcon;
    base.Label = _pinLabel;
  }

  FreeAppBar();
}

「ピン留め解除」ためのRemoveSecondaryTileAsyncメソッド（C#）
PinButtonクラスにこのコードを追加する。

　これで、記事一覧画面のアプリバーの［ピン留めする］ボタンが機能するようになったはずだ。

　実行してボタンをタップすると、ピン留めの許可を求めるフライアウトが出てくる（次の画像）。ここでタイルサイズを選び、必要ならタイルに表示されるテキストを編集してから、［スタート画面にピン留めする］ボタンをタップすると、スタート画面にセカンダリタイルが表示される。

記事一覧画面で［ピン留めする］ボタンをタップした様子

　スタート画面にセカンダリタイルが表示された状態では、ボタンが［ピン留め解除］に切り替わっている。タップすると、ピン留め解除の許可を求めるフライアウトが出てくる（次の画像）。

記事一覧画面で［ピン留め解除］ボタンをタップした様子