Windows 8(WinRT)のライブタイル

UI Windows 8は大幅に再設計され、タイル付きのスタート画面が表示されました(タイル-以下の括弧内に使用されている英語の用語を示します)。 アイコンに対するタイルの主な利点の1つは、「ライブ」(ライブタイル)が可能であり、重要な情報をタイル上で直接ユーザーに提供できることです。 さらに、セカンダリタイル(セカンダリタイル)を作成することもできます。これにより、特定のパラメーターを使用してアプリケーションにアクセスしたり、アプリケーションの奥深くにあるページに移動したりできます。 例は、メインタイルに天気を表示し、セカンダリタイルに選択した都市の天気を表示する天気アプリケーションです。



タイルサポートの適切かつ高品質の実装により、アプリケーションの機能が大幅に向上し、ユーザーがアプリケーションにログインして、変更があったことをタイルに書き留めることができます。



この記事では、次の点について説明します。



1.デフォルトでタイル。

2.ライブタイル

2.1。 パターン

2.2。 タイルを実装する方法

2.3。 ライブタイル。 完全な実装。

2.4。 タイル内の画像へのリンク。

3.生きているタイルの寿命を管理する。

3.1。 タイルを無効にする

3.2。 タイルの制限時間を設定します。

3.3。 スケジュールされたタイル表示設定。

3.4。 スケジュールされたタイルリスト管理(リストの取得、削除)

4.タイルのキュー。

5.タイルのイベント(バッジ)のインジケーター

6.タイルの定期的な更新(リモートリソースから)

7.二次タイル

7.1。 セカンダリタイルの保護

7.2。 セカンダリタイルからのアプリケーションのアクティブ化

7.3。 固定タイルを削除する

7.4。 二次タイルの活性化

8.バックグラウンドタスクとプッシュ通知によるライブタイル管理



1.デフォルトでタイル。



Win8では、2つの主要なサイズのタイルを設定できます-正方形150x150(正方形)と幅310x150(幅)。



Package.appxmanifestアプリケーションのマニフェストでは、正方形タイルのみがデフォルトで指定されています。 ワイドタイルのサポートを追加するには、画像サイズ310h150へのリンクを追加するだけです。 この場合、アイコンのコンテキストメニューで、表示モード(正方形またはワイド)を切り替えることが可能になります。



画像



これで、アプリケーションを起動してメインページに移動すると、正方形と反転に切り替えられる幅の広いタイルが表示されます。

画像

画像





背景色は、マニフェストの同じページのBackgroundColorプロパティで変更できます。

たとえば、濃い緑の場合、値を#005500に設定できます。

デフォルトの色はグレー#464646で、後で使用します。



2.ライブタイル



2.1。 パターン


Windows 8は、Windows Phoneのライブタイルと同様に、ライブタイルをサポートしています。 「ライブタイル」に名前が付けられたのは、ユーザーの優先情報でタイルを「再活性化」する可能性があるためです。



WinRT APIは、タイル用の46のテンプレートを提供します。 各テンプレートの詳細な説明は、 MSDNページにあります。



正方形のタイルには10個、幅の広いテンプレートには36個のテンプレートがあります。アプリケーションで幅の広いタイルを使用する予定がない場合は、正方形のタイルの10個のテンプレートで十分です。



さらに、すべてのタイルをテキスト、グラフィック、およびテキスト付きグラフィックに分割できます。 すべての正方形の両面タイルは、画像をテキストに定期的に変更するアニメーションタイルです。



正方形のタイルテンプレート

テキスト グラフィック グラフィックスとテキスト(両面)
TileSquareBlock、

TileSquareText01、

TileSquareText02、

TileSquareText03、

TileSquareText04、

TileSquareImage TileSquarePeekImageAndText01

TileSquarePeekImageAndText02

TileSquarePeekImageAndText03

TileSquarePeekImageAndText04



幅の広いタイルの選択ははるかに大きいです。

同時に、「純粋な」形式のグラフィックは2つだけであり、グラフィックとテキストが1つのタイルに配置された片面タイルもあります。



ワイドタイルテンプレート

テキスト グラフィック テキストとグラフィック
TileWideBlockAndText01

TileWideBlockAndText02

TileWideText01

TileWideText02

TileWideText03

TileWideText04

TileWideText05

TileWideText06

TileWideText07

TileWideText08

TileWideText09

TileWideText10

TileWideText11
TileWideImage

TileWideImageCollection
片面

TileWideImageAndText01

TileWideImageAndText02

TileWideSmallImageAndText01

TileWideSmallImageAndText02

TileWideSmallImageAndText03

TileWideSmallImageAndText04

TileWideSmallImageAndText05



二国間(アニメーション化された移行)

TileWidePeekImageCollection01

TileWidePeekImageCollection02

TileWidePeekImageCollection03

TileWidePeekImageCollection04

TileWidePeekImageCollection05

TileWidePeekImageCollection06

TileWidePeekImageAndText01

TileWidePeekImageAndText02

TileWidePeekImage01

TileWidePeekImage02

TileWidePeekImage03

TileWidePeekImage04

TileWidePeekImage05

TileWidePeekImage06



2.2。 タイルを実装する方法


ライブタイルのサポートの追加は非常に簡単です。 MSDNのリンクの下に、xmlテンプレートの説明があります。



TileSquareBlock正方形タイルをXML記述で追加する例を考えてみましょう。



<tile> <visual> <binding template="TileSquareBlock"> <text id="1">Text Field 1</text> <text id="2">Text Field 2</text> </binding> </visual> </tile>
      
      







テンプレートは、数値情報を表示するのに最適です。 要素内のタグは、必要な値を設定するために使用されます。

最初のフィールドに値25を、2番目のフィールドに度を指定します。



 <tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> </visual> </tile>
      
      





テンプレートを決定したら、コードの記述を始めましょう。

タイルを実装する3つの異なる方法があります。



2.2.1。 「手動」実装


このメソッドの本質は、必要なXmlドキュメントを手動で生成し、それに基づいてタイルを作成することです。

 var xml = @"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> </visual> </tile>"; var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(xml); var notification=new TileNotification(xmlDocument); TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
      
      







2.2.2。 事前定義されたテンプレートによる


WinRTには既製のテンプレートがあります。 WinRT API“ TileUpdateManager.GetTemplateContent”を使用して、XmlDocumentテンプレートを使用して任意のテンプレートXmlDocumentをロードし、値を変更できます。



 var xmlDocument = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock); var nodes = xmlDocument.GetElementsByTagName("binding").First().ChildNodes; nodes[0].InnerText = "25"; nodes[1].InnerText = "Degrees"; var notification = new TileNotification(xmlDocument); TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
      
      







おそらく最も時間のかかるオプションです。 テンプレートの構造を記憶するだけでなく、値を設定するためのコードをさらに記述する必要があります。



2.2.3。 NotificationsExtensionsライブラリの使用


公式のには、タイルの操作を簡単にするために設計されたNotificationsExtensionsライブラリが付属しています。 ライブラリはWinRT APIのラッパーであり、必要なxmlドキュメントを収集します。 このライブラリを使用したタイル実装の外観を見てみましょう。



 ITileSquareBlock tileContent = TileContentFactory.CreateTileSquareBlock(); tileContent.TextBlock.Text = "25"; tileContent.TextSubBlock.Text = "Degrees"; TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
      
      







ご覧のとおり、このライブラリにより、タイルの操作が少し簡単になります。 この記事の後半では、主に最初の方法を検討します。これにより、プロセスの理解が深まり、2番目と3番目の方法を正しく使用するために必要な知識が得られるためです。

実装方法を決定したら、次の複雑でない小さなロゴをマニフェストに追加します。 (小さなロゴはオプションであり、必須ではありません)。

画像

これで、アプリケーションを起動した後、メインタイルが「生き返り」、コンテンツを含むタイルに画像が変更されます(タイルモードが「正方形」になった場合)。



画像



「ワイド」タイルについては、変更はありませんが、タイルを正しく実装する方法をさらに検討します。



2.3。 ライブタイル。 完全な実装。


正方形のタイルだけでなく、幅の広いタイルもサポートできます。

ワイドとスクエアの両方のタイルサポートを追加するには、それらを1つのxml要素に結合する必要があります。

結合は非常に単純です-タグを1つのxmlに結合する必要があります。

つまり 正方形タイルのテンプレートを選択した場合:



 <tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> </visual> </tile>
      
      







ワイドタイルのテンプレート:



 <tile> <visual> <binding template="TileWideText03"> <text id="1">25 degrees</text> </binding> </visual> </tile>
      
      







結合されたバージョンは次のようになります。



 <tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> <binding template="TileWideText03"> <text id="1">25 degrees</text> </binding> </visual> </tile>
      
      







小さなヘルパーメソッドを追加します。これは記事の後半で使用して、コードの量を減らします。



 private TileNotification CreateNotification(string xml) { var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(xml); return new TileNotification(xmlDocument); }
      
      







これで、ワイドタイルとスクエアタイルの実装は次のようになります。



 var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">25 degrees in Moscow</text> </binding> </visual> </tile>"); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
      
      







ワイドタイルとスクエアタイルのコンテンツが作成されたため、「ワイド」タイルモードに切り替えると、次のテキストが表示されます。



画像



NotificationExtensionsライブラリは、幅広で正方形のタイルを指定する機能もサポートしています。 このライブラリを使用した同様の例を考えてみましょう。



 ITileSquareBlock squareTile = TileContentFactory.CreateTileSquareBlock(); squareTile.TextBlock.Text = "25"; squareTile.TextSubBlock.Text = "Degrees"; ITileWideText03 wideTile = TileContentFactory.CreateTileWideText03(); wideTile.TextHeadingWrap.Text = "25 degrees in Moscow"; wideTile.SquareContent = squareTile; TileUpdateManager.CreateTileUpdaterForApplication().Update(squareTile.CreateNotification());
      
      







ここでは、2種類のタイルの「バンドル」が、正方形タイルwideTile.SquareContent = squareTileへの参照を示すことによって実行されます。



2.4。 タイル内の画像へのリンク。


グラフィック情報は、多くの場合、リビングタイルの主要または重要なコンポーネントです。 グラフィックを表示する機能を提供するテンプレートの1つを検討してください。 幅の広いタイルの場合はTileWideImageタイル、squareの場合はTileSquareImageとします。

さまざまなソースのグラフィックを表示する方法を検討してください。



これらの画像を表示する小さなヘルパーメソッドを追加します。



 private void ImageLiveTile(string squareImageUri, string wideImageUri) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareImage""> <image id=""1"" src=""{0}"" alt=""alt text""/> </binding> <binding template=""TileWideImage""> <image id=""1"" src=""{1}"" alt=""alt text""/> </binding> </visual> </tile>",squareImageUri,wideImageUri)); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); }
      
      







まず、アプリケーションのAssetsフォルダーにあるタイルを表示する方法を見ていきます。



 ImageLiveTile(@"Assets\SquareTileLogo.png", @"Assets\WideTileLogo.png");
      
      







その後、次のタイルを確認できます。



画像

画像





相対パスの代わりに、絶対パスに沿ってプロジェクト内のリソースにアクセスする可能性もあります。 したがって、次のアドレスでも同様の結果が得られます。



 ImageLiveTile(@"ms-appx:///Assets/SquareTileLogo.png", @"ms-appx:///Assets/WideTileLogo.png");
      
      







Webリソースから画像を表示する機能もあります。 たとえば、150x150の正方形のタイルと320x159の幅のタイルの同じ写真をflickrで撮影します。



 ImageLiveTile(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e.jpg", @"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e_n.jpg");
      
      







画像

画像





心に留めておくべき唯一のことは、写真が適切なサイズでなければならないということです。 大きすぎる画像は表示されず、小さなタイルはストレッチ後の品質が低下します。



ローカルストレージ内のタイルを参照することもできます。 これを行うには、 ms-appdataプレフィックスを使用します:/// local /



たとえば、インターネット上の指定されたアドレスから指定されたファイル名のファイルストレージにファイルを保存する小さなシンプルなヘルパーメソッドを追加します。



 private async Task SaveImage(string url, string fileName) { var client = new HttpClient(); var bytes = await client.GetByteArrayAsync(url); var file= await ApplicationData.Current.LocalFolder.CreateFileAsync(fileName,CreationCollisionOption.ReplaceExisting); var writeStream = await file.OpenAsync(FileAccessMode.ReadWrite); var streamWriter = new BinaryWriter(writeStream.AsStreamForWrite()); streamWriter.Write(bytes); streamWriter.Flush(); }
      
      







これで、ローカルストレージに画像を保存できます



 await SaveImage(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e.jpg", "squareTile.jpg"); await SaveImage(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e_n.jpg", "wideTile.jpg");
      
      







ライブタイルを作成するときに彼に目を向ける



 ImageLiveTile(@"ms-appdata:///local/squareTile.jpg", @"ms-appdata:///local/wideTile.jpg");
      
      







3.生きているタイルの寿命を管理する。



上で見たように、タイルは何らかの情報を取得します。 この情報の有効期間を制御し、タイルの表示時間を制御することができます。



3.1。 タイルを無効にする


まず、タイルを無効にする方法を検討します。



 TileUpdateManager.CreateTileUpdaterForApplication().Clear();
      
      







このメソッドを実行した後、タイルはデフォルトのタイルに置き換えられます。



3.2。 タイルの制限時間を設定します。


また、タイルが作成されるときに、その寿命を設定することもできます。 たとえば、これは、しばらくしてから関連性を失うイベント(たとえば、現在のブロードキャストに関する情報をブロードキャストで表示する)に使用できます。



例として、10秒後にライブタイルをオフにしましょう。

 var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">40</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">40 degrees in Moscow</text> </binding> </visual> </tile>"); tile.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
      
      







コードを実行してアプリケーションを最小化すると、10秒後にライブタイルがどのように表示され、表示されなくなるかがわかります。



3.3。 スケジュールされたタイル表示設定。


たとえば、イベントが1時間で始まる場合、おそらく、このイベントが発生したときにタイルを今すぐではなく、1時間で表示する必要があります。



たとえば、10秒後にタイルをインストールする場合、次のコードを記述します。



 var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">10</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">10 degrees in Moscow</text> </binding> </visual> </tile>"); var scheduledTileNotification = new ScheduledTileNotification(tile.Content, DateTimeOffset.UtcNow.AddSeconds(10)); TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(scheduledTileNotification);
      
      







ScheduledTileNotificationメソッドは、XmlDocumentを受け入れます。 (この場合、tile.ContentにはXmlDocumentが含まれています)。



同様に、スケジュールされた起動とタイルの有効期間を組み合わせることができます。

たとえば、15秒から10秒後にタイルを作成するコードは次のようになります。



 var scheduledTileNotification = new ScheduledTileNotification(tile.Content, DateTimeOffset.UtcNow.AddSeconds(10)); scheduledTileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(25); TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(scheduledTileNotification);
      
      







3.4。 スケジュールされたタイルリスト管理(リストの取得、削除)


スケジュールで一度に複数のタイルを使用する予定がある場合は、この機会を利用してタイルに識別子を割り当てる必要があります。



 scheduledTileNotification.Id = "1";
      
      







TileUpdateManager.CreateTileUpdaterForApplication()メソッドを使用して、スケジュールに従ってインストールされているすべてのタイルのリストを取得できます。



 var scheduledTiles = TileUpdateManager.CreateTileUpdaterForApplication();
      
      







識別子ごとにそれぞれタイルにアクセスできます



 var tile = scheduledTiles.FirstOrDefault(i => i.Id == "1");
      
      







これで、たとえば、必要に応じてこのタイルを削除できます。



 if(tile!=null) { TileUpdateManager.CreateTileUpdaterForApplication().RemoveFromSchedule(tile); }
      
      







4.タイルのキュー。



WinRT APIには、最大5タイルのキューを設定する機能があり、周期的に表示されます。



必要なのは、キューサポートメソッドを有効にすることだけです。



 TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
      
      







したがって、キューを無効にするには、値falseを渡す必要があります。

タイルにはさまざまなパターンを使用できますが、簡単にするために、同じパターンの小さな例を考えます。

タイルを設定するための小さなヘルパーメソッドを作成しましょう。



 private void SetTile(int value) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">{0}</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">{0} degrees in Moscow</text> </binding> </visual> </tile>",value)); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); }
      
      







次に、周期的に表示されるいくつかのタイルのキューを設定します。



 TileUpdateManager.CreateTileUpdaterForApplication().Clear(); TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); SetTile(15); SetTile(25); SetTile(35);
      
      







そして、3つのタイルが周期的に相互に置き換えられていることを確認できます。 キューをクリアするにはClearメソッドが必要です。そうしないと、次にコードを実行したときに、2つの同一のタイルを持つ5つのタイルのスタックができます。これにより、タイルは定期的に同じタイルに置き換えられます。

この方法を使用する場合、スケジュールされたタイルはスタックにヒットするだけで前のタイルと「スピン」するため、スケジュールされたタイルの動作をより慎重に確認する必要があります。



5.タイルのイベント(バッジ)のインジケーター



タイル(独立してライブまたはデフォルトのタイル)にイベントインジケーターを表示する機能があります。 イベントインジケータは右下隅に表示され、数字(1から99、たとえば未読メッセージの数)またはグリフ(アプリケーションの状態)を表示できます。



イベントインジケーターの詳細については、ロシア語のMSDNページをご覧ください。 ここでは、イベントインジケーターの実装を検討します。



インジケーターを操作するために、APIがTileUpdateManager APIとほぼ同一のBadgeUpdateManagerがあります。



イベントインジケーターに12番を表示する方法を考えてみましょう。そのために、 MSDN />ページから対応するテンプレートを取得します



 var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(@"<badge value=""12""/>")); var badgeNotification = new BadgeNotification(xmlDocument); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeNotification);
      
      







これで、デフォルトタイルとライブタイルの両方で値が12のインジケーターを確認できます。



画像

画像





グリフを表示するには、xmlの値12を識別子の1つで置き換える必要があります。 たとえば、「注意」



 xmlDocument.LoadXml(@"<badge value=""attention""/>"));
      
      





画像

タイルと同様に、イベントインジケーターの時間制限を設定できます。



 badgeNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);
      
      







そして、同様に、インジケーターを削除できます

 BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
      
      







6.タイルの定期的な更新(リモートリソースから)



多くの場合、サービス/サイトからのデータでタイルを更新する必要があります。 たとえば、天気が日中に変化する場合、おそらく現在の気温を1時間に1回更新する必要があります。



簡単にするために、現在のタイムタイルを提供する新しいWebアプリケーションを作成します。 これがASP.NETアプリケーションの場合、現在の時刻を含むxmlタイルを返すHttpHandlerを追加します。



 public class TileHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/xml"; context.Response.Write(String.Format(@"<tile> <visual> <binding template=""TileSquareText02""> <text id=""1"">{0}</text> <text id=""2"">current time</text> </binding> <binding template=""TileWideText03""> <text id=""1"">Time: {0}</text> </binding> </visual> </tile> ",DateTime.Now.ToShortTimeString())); } public bool IsReusable {get { return false; }} }
      
      







これで、たとえば、ハンドラーがlocalhost :28457 / TileHandler.ashxにある場合、このアドレスを使用して通知を受信できます。



アプリケーションの次のコードは、30分ごとにタイルのチェックと更新を開始します。



 TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileHandler.ashx"),PeriodicUpdateRecurrence.HalfHour);
      
      







タイルの更新はすぐにではなく、指定した時間後に開始できます。 たとえば、次のコードは3時間後にタイルのチェックと更新を開始します。



 TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileHandler.ashx"), DateTimeOffset.UtcNow.AddHours(10), PeriodicUpdateRecurrence.HalfHour);
      
      







これで、アプリケーションを実行すると、ワイドタイルと正方形タイルに次のタイルが表示されます。



画像

画像





タイルの「キュー」を確立することもできます(「タイルのキュー」セクションで説明)。 構文はほぼ同じであり、単一のUriの代わりに、最大5つの要素のUriのコレクションを指定できます。



まず、キューのサポートを有効にする必要があります。



 TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); Uri[] uriCollection=new [] { new Uri("http://localhost:28457/TileHandler1.ashx"), new Uri("http://localhost:28457/TileHandler2.ashx"), new Uri("http://localhost:28457/TileHandler3.ashx"), new Uri("http://localhost:28457/TileHandler4.ashx"), new Uri("http://localhost:28457/TileHandler5.ashx"), }; TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdateBatch(uriCollection,PeriodicUpdateRecurrence.HalfHour);
      
      







イベント識別子は同じ方法で更新されます。



たとえば、 localhostアドレスがある場合:28457 / BadgeHandler.ashxは/>の形式のxmlを返します



次のコードは、30分ごとにインジケーターステータスを要求および更新します。



 BadgeUpdateManager.CreateBadgeUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileBadgeHandler.ashx"),PeriodicUpdateRecurrence.HalfHour);
      
      







7.二次タイル



セカンダリタイルにより、特定のパラメーターを使用して特定のページでアプリケーションを実行できます。 セカンダリタイルの操作のかなり詳細な例は、 MSDNの例からダウンロードできます。 セカンダリタイルの使用を検討してください。



7.1。 セカンダリタイルの保護


セカンダリタイルの修正は非常に簡単です。



たとえば、タイルを固定するためのボタンがある場合、タイルを固定するためのボタンに次のハンドラを記述します(簡単にするために、デフォルトのタイルと同じロゴを使用します)。



 private async void PinToStart_Click(object sender, RoutedEventArgs e) { SecondaryTile secondaryTile = new SecondaryTile() { TileId = "MyTileId", ShortName = "Tile short name", DisplayName = "Tile display name", Arguments = "MyTileArgument", TileOptions = TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo, Logo = new Uri("ms-appx:///assets/SquareTileLogo.png"), WideLogo = new Uri("ms-appx:///assets/WideTileLogo.png"), }; bool isPinned = await secondaryTile.RequestCreateAsync(); }
      
      







TileIdはタイルの一意の識別子であり、後で特定のタイルを操作するために使用されます(削除、更新、開始など)



メインタイルには、一意の識別子「App」が使用されます。 この識別子は予約済みと見なすことができ、そのような識別子でタイルを修正しても機能しません(明らかにそのようなタイルは既に存在するため)。 このような識別子を持つタイルを削除しようとすると、開始画面とプログラムのリストからリンクが失われ、セカンダリタイルでさらに作業する可能性が完全に「なくなります」。



明らかに、このバグは、おそらく修正されるでしょうが、いずれにしても、識別子として「App」を使用しないことを強くお勧めします。

ボタンをクリックすると、タイルを修正するための次のダイアログボックスが表示されます。



画像



7. 2.セカンダリタイルからのアプリケーションのアクティブ化


セカンダリタイルを作成したら、セカンダリタイルによるアプリケーションのアクティブ化を処理する必要があります。

これを行うには、AppXaml.csメソッドで、argsスタートアップ引数を処理できます。 このパラメーターからTileIdタイル識別子と引数を取得できます。 簡単にするために、タイルによってアクティブ化されたときにアプリケーションの特別なページが開くシナリオを実装します。

これを行うには、OnLaunchメソッド内の同じファイルApp.xaml.csで、メソッドの最初に別のページに切り替えるためのコードを追加します(セカンダリタイルからアクティブ化される場合)。



 protected override void OnLaunched(LaunchActivatedEventArgs args) { var tileId= args.TileId; if (tileId == "MyTileId") { if(Window.Current.Content ==null) { Window.Current.Content=new Frame(); } var secondaryTileArgument = args.Arguments; ((Frame)Window.Current.Content).Navigate(typeof(SecondaryTilePage), secondaryTileArgument); Window.Current.Activate(); return; } … }
      
      







これで、アプリケーションがセカンダリタイルからアクティブ化されると、タイルを含むページへの遷移が実行され、タイルを修正するときに使用される値が引数として渡されます。



上記のコードには重大な欠点があります。 セカンダリタイルによってアプリケーションをアクティブにし、特別なページに切り替えた後、メインタイルからアプリケーションを起動しようとすると、再びセカンダリタイルのページに移動します。 この問題には多くの解決策があります。 1つの解決策は、アプリケーションがセカンダリタイルによってアクティブ化されたことを思い出し、次にプライマリタイルによってアクティブ化したときに、前のページが存在する場合は前のページに移動してみることです。 それ以外の場合は、デフォルトのシナリオに従ってアプリケーションを実行します。



7. 3.固定タイルの削除


ユーザーは、タイルコンテキストメニューから独立して、開始画面からタイルの固定を解除できます。 必要に応じて、タイルのリリースを自分でリクエストできます。 ユーザーは、タイルの固定解除を明示的に確認する必要があります。



[固定解除]ボタンとハンドラーをボタンに追加します。



 private async void UnPinFromStart_Click(object sender, RoutedEventArgs e) { if(Windows.UI.StartScreen.SecondaryTile.Exists("MyTileId")) { SecondaryTile secondaryTile = new SecondaryTile("MyTileId"); bool unpinned = await secondaryTile.RequestDeleteAsync(); } }
      
      







SecondaryTile.Exists()メソッドを使用すると、デスクトップ上の固定タイルを確認できます。

このコードを実行するとき、ユーザーはセカンダリタイルを削除することを確認する必要があります。その後、タイルが削除されます



画像



7. 4.セカンダリタイルの「復活」


セカンダリタイルをライブにすることもできます。 セカンダリタイルのAPIは、プライマリタイルと同じです。



セカンダリタイルを使用するには、TileUpdateManager.CreateTileUpdaterForSecondaryTile(tileId)メソッドを使用します。



セカンダリタイルの同様の例



 var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">25 degrees in Moscow</text> </binding> </visual> </tile>"); TileUpdateManager.CreateTileUpdaterForSecondaryTile("MyTileId").Update(tile);
      
      







8.バックグラウンドタスクとプッシュ通知によるライブタイル管理



BackgroundTaskおよびPushNotificationトピックは、それぞれ個別の記事に値します。

ここでは、両方のトピックのタイルを操作する原理を検討します。



8.1。 バックグラウンドタスク


バックグラウンドタスクの作成の簡単な紹介は、 MSDNにあります。



OnCompletedメソッドでは、バックグラウンドタスクがトリガーされると、LiveTileを設定できます



 void OnCompleted(BackgroundTaskRegistration sender, BackgroundTaskCompletedEventArgs args) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareText04""> <text id=""1"">{0}</text> <text id=""2""></text> </binding> <binding template=""TileSquareText02""> <text id=""1"">{0}</text> <text id=""2""></text> </binding> </visual> </tile>", DateTime.Now.ToString("hh:mm:ss"))); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); }
      
      







8. 2.プッシュ通知


Windows 8では、プッシュ通知がより安全になり、操作が少し難しくなりました。

サーバーからWNSサーバーにログインしてプッシュ通知を送信する方法は、MSDNページで説明されています文書の最後に、完成したコードが記載されています。ここでは、メソッドシグネチャのみを示し



ます。public string PostToWns(string secret、string sid、string uri、string xml、string type =“ wns / toast”){}



タイプとして、値「wns / tile」

をxml値として渡し、テンプレートを渡しますタイル。



例:

 string xml = @"<tile> <visual> <binding template=""TileSquareText04""> <text id=""1"">Tile text1</text> <text id=""2"">Tile text2</text> </binding> <binding template=""TileSquareText02""> <text id=""1"">Tile text1</text> <text id=""2"">Tile text2</text> </binding> </visual> </tile>";
      
      







唯一の注意点-msdnページで指定したメソッドは、Content-TypeとContentLengthを追加するまで機能しませんでした。



 request.Headers.Add("X-WNS-Type", type); request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.AccessToken)); request.ContentType = "text/xml"; request.ContentLength = xml.Length;
      
      







ドキュメントの最後には、WNSサーバーでのチャネルと承認の説明を作成して開くためのリンクがあります。

secretおよびsidパラメーターは次の形式の値です

。sid: "ms-app:// s-1-23-2-3112458577-1770873644-3250801218-3829720502-2556658560-167841413-2364691272";

秘密:「DcQWqb7eL7oIwVCr8yIOo-aQQRplPDL3」;



実際、タイルAPIが提供するのはこれだけです。



PS記事を書くに貴重なアドバイス、ヘルプ、サポートをしてくれたhabrazer Stas Pavlov stasusとSergey Urusov petrishko感謝します。



All Articles