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

» 2014年01月10日 13時35分 公開
[山本康彦(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クラスにこのコードを追加する。

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

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

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

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

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

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。