[Windowsストアアプリ開発]セカンダリタイルの作成

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

目次に移動

セカンダリタイルって何?

Windowsストアアプリにはセカンダリタイルという機能がありますが、Windows8を使っていても名前を知らない人もいると思いますので、まず最初に何なのか説明します。 セカンダリタイルはモダンUI版のIEに実装されているので、起動して見てみましょう。起動後に何かページを開いてから、アプリバーのピンアイコンをクリックして「スタート画面にピン留めする」を選択します。

スタート画面に以下のように新しいタイルが追加されます。これがセカンダリタイルです。
このタイルをクリックするとIEが起動しますが、最初に開かれるページがピン留めした際に表示していた画面になります。


ボタンをピンのアイコンにする

それでは簡単なサンプルを作ってみましょう。まずは新しいプロジェクトを作成します。次にアプリバーにボタンを追加しましょう。
アプリバーへボタンを追加する方法は以下のページで書きました。
アプリバーにボタンを追加する

次にボタンの見た目をIEのピンのアイコンと同じにします。このピンのアイコンは元々用意されているものなので
Main.xamlを開いて追加したButtonを以下のように修正して下さい。

<Button HorizontalAlignment="Left"
        Style="{StaticResource AppBarButtonStyle}"
        Content="" 
        AutomationProperties.AutomationId="PinAppBatButton"
        AutomationProperties.Name="ピン留め"
        Click="AddPinButton_Click"/>


アプリバーが追加できたらTextBoxを画面に追加します。私はMyTextという名前にしました。画面は以下のような感じになります。


セカンダリタイルの追加

それではセカンダリタイルを追加する処理を実装します。まずは以下の名前空間をusingディレクティブに追加してください。

using Windows.UI.StartScreen;

SecondaryTileのインスタンスを生成します。コンストラクタの引数には以下の情報を渡します。
第1引数:タイルの一意のID
第2引数:短い名前
第3引数:表示名
第4引数:アクティブ化されるときに渡されるパラメータ
第5引数:タイルのオプション
第6引数:ロゴ イメージ

第4引数はTextBoxの文字列にします。第6引数の"ms-appx:///"というのはプロジェクトのフォルダを差しています。
インスタンスを生成後、RequestCreateAsyncメソッドを呼び出すと画面に確認画面が表示されます。

private async void AddPinButton_Click(object sender, RoutedEventArgs e)
{
    SecondaryTile secondaryTile = new SecondaryTile(
        MyText.Text,
        "セカンダリタイルサンプル1",
        "セカンダリタイルサンプル2",
        MyText.Text,
        TileOptions.ShowNameOnLogo,
        new Uri("ms-appx:///Assets/Logo.png"));

    await secondaryTile.RequestCreateAsync();
}


これでアプリバーのボタンを押すと、セカンダリタイルを追加するか、確認するウインドウが表示されます。
次にセカンダリタイルから起動した場合にTextBoxに文字列を表示する処理を追加します。Main.xaml.xs の OnNavigatedTo の引数(NavigationEventArgs) は SecondaryTile のコンストラクタで渡したパラメータを保持しているので、MyTextのTextプロパティに代入します。
アプリのタイルから起動した場合はParameterプロパティは空になっています。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    MyText.Text = (string)e.Parameter;
}


実装できたので、動かしてみましょう。TextBoxに何か文字列を入力したらアプリバーのピンアイコンをクリックします。


セカンダリタイルをスタート画面に追加するか、確認するウインドウが表示されるので、「スタート画面にピン留めする」ボタンをクリックします。タイル上の文字列はSecondaryTile のコンストラクタの第3引数で渡した文字列ですが、変更することも可能です。


スタート画面に追加されたセカンダリタイルをクリックします。ピン留めした際にTextBoxに入力されていた文字列が復元されていたら成功です。

目次に移動