第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"
>


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


<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();
}