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

目次に移動

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

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

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

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

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

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

<Button HorizontalAlignment="Left"
        Style="{StaticResource AppBarButtonStyle}"
        Content="&#xE141;" 
        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に入力されていた文字列が復元されていたら成功です。

目次に移動