基礎 Secondary Tiles 新增及操作

動態磚 ( Live Tile ) 一直是從早期的 Metro Style 到現在 Windows 10 預覽版開放下載後，微軟很重視，且用來審核 App 品質的一項元件，在 App 安裝完成後會在開始畫面釘上應用程式的動態磚，這是應用程式的預設進入點，其他應用程式額外的動態磚，都叫作 Secondary Tile。

建立 Live Tile 可以使用透過簡單的方式建立 SecondaryTile 物件，也可以和 Notification、Badge 一樣的，透過 NotificationExtensions Library 建立樣式較豐富的 Live Tile，但到底建立一個以上的 Live Tile 有什麼好處呢？

其實大部份的目的是透過背景作業來改變動態磚上的資訊例如 Badge Content 或背景圖，達到讓用戶不必進到應用程式就可以快速取得各項簡短資訊。例如天氣的 App 除了應該程式 icon 之外，若提供用戶釘選台北市、宜蘭縣的 Live Tile 在首頁上，並且每 30 分鐘在背景將天氣圖及氣溫更新上去，都是對用戶來說很方便的功能，且 Tile 本身是可以帶參數的，用戶若是點選宜蘭縣的 Tile 在進到 App 後直接開啟宜蘭縣頁面的詳細旅遊天氣及未來一週天氣預測，這些都是很好的用戶體驗。

以下示範如何建立最單純的靜態 Secondary Tile，並且在 App 類別內識別用戶是透過台北市還是宜蘭市的 Tile 開啟，這種 Tile 是沒有動態效果的，通常是讓用戶釘選各功能的進入點，我在 Tile 的參數欄位放了釘磚塊當時的時間做為參數的示範

public sealed partial class MainPage : WindowsLayoutSupportPage
{
    public const String TILE_ID_ELAND = "tile_id_eland";
    public const String TILE_ID_TAIPEI = "tile_id_taipei";

    public MainPage()
    {
        this.InitializeComponent();
    }

    public static Rect GetElementRect(FrameworkElement element)
    {
        GeneralTransform buttonTransform = element.TransformToVisual(null);
        Point point = buttonTransform.TransformPoint(new Point());
        return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));
    }

    private async void OnElandButtonClick(object sender, RoutedEventArgs e)
    {
        SecondaryTile secondaryTile = new SecondaryTile(TILE_ID_ELAND,
                                      "e-land",
                                      DateTime.UtcNow.Ticks.ToString(),
                                      new Uri("ms-appx:///Assets/eland.png"),
                                      TileSize.Square150x150);
     
        // 若是 Windows Phone 則不用設定底下這兩種尺吋的圖片 Uri
        secondaryTile.VisualElements.Wide310x150Logo = new Uri("ms-appx:///Assets/eland-w.png");
        secondaryTile.VisualElements.Square310x310Logo = new Uri("ms-appx:///Assets/eland-f.png");

        secondaryTile.VisualElements.ForegroundText = ForegroundText.Dark;
        secondaryTile.VisualElements.Square30x30Logo = new Uri("ms-appx:///Assets/eland-s.png");
        secondaryTile.VisualElements.ShowNameOnSquare150x150Logo = true;

        // Windows 上建立動態磚時會跳出確認 Dialog，所以需指定從何處顯示 Dialog
        Rect rect = GetElementRect((FrameworkElement)sender);
        Boolean success = await secondaryTile.RequestCreateForSelectionAsync(rect, Placement.Default);

        // 若是 Windows Phone 則是直接透過以下方式建立，不會跳確認的 Dialog 故不需指定位置
        //await secondaryTile.RequestCreateAsync();
    }

    private async void OnTiapeiButtonClick(object sender, RoutedEventArgs e)
    {
        SecondaryTile secondaryTile = new SecondaryTile(TILE_ID_TAIPEI,
                                      "taipei",
                                      DateTime.UtcNow.Ticks.ToString(),
                                      new Uri("ms-appx:///Assets/taipei.png"),
                                      TileSize.Square150x150);

        // 若是 Windows Phone 則不用設定底下這兩種尺吋的圖片 Uri
        secondaryTile.VisualElements.Wide310x150Logo = new Uri("ms-appx:///Assets/taipei-w.png");
        secondaryTile.VisualElements.Square310x310Logo = new Uri("ms-appx:///Assets/taipei-f.png");

        secondaryTile.VisualElements.ForegroundText = ForegroundText.Dark;
        secondaryTile.VisualElements.Square30x30Logo = new Uri("ms-appx:///Assets/taipei-s.png");
        secondaryTile.VisualElements.ShowNameOnSquare150x150Logo = true;

        // Windows 上建立動態磚時會跳出確認 Dialog，所以需指定從何處顯示 Dialog
        Rect rect = GetElementRect((FrameworkElement)sender);
        Boolean success = await secondaryTile.RequestCreateForSelectionAsync(rect, Placement.Default);
    }
}

在按了這兩個按鍵並建立 taipei 和 e-land 的動態磚後，透過這兩個動態磚即可在 App 的 OnLaunched 中利用 LaunchActivatedEventArgs 參數識別動態磚建立時的 TileId 及參數值，例如

public sealed partial class App : Application
{
    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        // 透過應用程式預設 Tile 啟動應用程式時，以下兩個參數值會為空字串
        Debug.WriteLine(e.Arguments); // 得到空字串，或像 635482961996820121 這樣的時間字串
        Debug.WriteLine(e.TileId); // 得到空字串，或 tile_id_taipei、tile_id_eland
    }
}

刪除 Secondary Tile 的方式除了讓用戶在桌面上按右鍵 unpin 之外，也可以透過 SecondaryTile 物件的 RequestDeleteForSelectionAsync 方法來操作，僅需要提供 TileId 即可，簡單的範例如下

private async void OnUnpinSecondaryTileClick(object sender, RoutedEventArgs e)
{
    if (SecondaryTile.Exists(TILE_ID_TAIPEI))
    {
        SecondaryTile secondaryTile = new SecondaryTile(TILE_ID_TAIPEI);
        Boolean isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(GetElementRect((FrameworkElement)sender),  Placement.Below);
    }
}