[源碼下載]

作者：webabcd


介紹
背水一戰 Windows 10 之 通知（Tile）

• secondary tile 模板之基礎
• secondary tile 模板之文本

示例
1、本例用於演示 tile 顯示模板的基礎
Notification/Tile/TemplateBasic.xaml

<Page
    x:Class="Windows10.Notification.Tile.TemplateBasic"
 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable
 
="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <Button Name="btnSample1" Content="為不同規格的磁貼指定不同的顯示內容" Click="btnSample1_Click" Margin="5" />

            <Button Name
 
="btnSample2" Content="在 binding 節點指定磁貼左下角的名稱顯示和右下角的圖標顯示" Click="btnSample2_Click" Margin="5" />

            <Button Name="btnSample3" Content="在 visual 節點指定磁貼左下角的名稱顯示和右下角的圖標顯示" Click="btnSample3_Click" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Notification/Tile/TemplateBasic.xaml.cs

/*
 * 本例用於演示 tile 顯示模板的基礎
 * 
 * 
 * tile -  磁貼元素
 * visual - 可視元素
 *     branding - 如何顯示磁貼左下角的名稱和右下角的圖標
 *         none - 不參與（默認值）
 *         logo - 顯示右下角的圖標
 *         name - 顯示左下角的名稱
 *         nameAndLogo - 顯示左下角的名稱和右下角的圖標
 *     displayName - 指定顯示在磁貼左下角的名稱（不指定且設置為顯示時，則顯示的是 SecondaryTile 對象的 DisplayName）
 * binding - 綁定元素
 *     template - 指定 tile 的規格（小，中，寬，大）
 *     branding - 如何顯示磁貼左下角的名稱和右下角的圖標
 *         none - 不參與（默認值）
 *         logo - 顯示右下角的圖標
 *         name - 顯示左下角的名稱
 *         nameAndLogo - 顯示左下角的名稱和右下角的圖標
 *     displayName - 指定顯示在磁貼左下角的名稱（不指定且設置為顯示時，則顯示的是 SecondaryTile 對象的 DisplayName）
 */

using System;
using Windows.Data.Xml.Dom;
using Windows.UI.Notifications;
using Windows.UI.StartScreen;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Windows10.Notification.Tile
{
    public sealed partial class TemplateBasic : Page
    {
        private const string TILEID = "tile_template_basic";

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

        // 在開始屏幕固定一個 secondary tile 磁貼
        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            Uri square150x150Logo = new Uri("ms-appx:///Assets/Square150x150Logo.png");
            Uri wide310x150Logo = new Uri("ms-appx:///Assets/Wide310x150Logo.png");
            Uri square310x310Logo = new Uri("ms-appx:///Assets/Square310x310Logo.png");
            SecondaryTile secondaryTile = new SecondaryTile(TILEID, "name", "arguments", square150x150Logo, TileSize.Wide310x150);
            secondaryTile.VisualElements.Wide310x150Logo = wide310x150Logo;
            secondaryTile.VisualElements.Square310x310Logo = square310x310Logo;

            try
            {
                bool isPinned = await secondaryTile.RequestCreateAsync();
                lblMsg.Text = isPinned ? "固定成功" : "固定失敗";
            }
            catch (Exception ex)
            {
                lblMsg.Text = "固定失敗: " + ex.ToString();
            }
        }

        // 為不同規格的磁貼指定不同的顯示內容
        private void btnSample1_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template=‘TileSmall‘>
                            <text>Small（小）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                        <binding template=‘TileMedium‘>
                            <text>Medium（中）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                        <binding template=‘TileWide‘>
                            <text>Wide（寬）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                        <binding template=‘TileLarge‘>
                            <text>Large（大）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 在 binding 節點指定磁貼左下角的名稱顯示和右下角的圖標顯示
        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template=‘TileWide‘ branding=‘nameAndLogo‘ displayName=‘name 2‘>
                            <text>Wide（寬）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                        <binding template=‘TileLarge‘ branding=‘nameAndLogo‘ displayName=‘name 3‘>
                            <text>Large（大）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 在 visual 節點指定磁貼左下角的名稱顯示和右下角的圖標顯示
        private void btnSample3_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual branding=‘nameAndLogo‘ displayName=‘name 4‘>
                        <binding template=‘TileWide‘>
                            <text>Wide（寬）{DateTime.Now.ToString("HH:mm:ss")}</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }


        private void UpdateTileNotification(string tileXml)
        {
            XmlDocument tileDoc = new XmlDocument();
            tileDoc.LoadXml(tileXml);

            TileNotification tileNotification = new TileNotification(tileDoc);

            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForSecondaryTile(TILEID);
            tileUpdater.Update(tileNotification);
        }
    }
}

2、本例用於演示 tile 顯示模板的文本相關的知識點
Notification/Tile/TemplateText.xaml

<Page
    x:Class="Windows10.Notification.Tile.TemplateText"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <Button Name="btnSample1" Content="文本的樣式" Click="btnSample1_Click" Margin="5" />

            <Button Name="btnSample2" Content="水平對齊方式和文本換行" Click="btnSample2_Click" Margin="5" />

            <Button Name="btnSample3" Content="垂直對齊方式" Click="btnSample3_Click" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Notification/Tile/TemplateText.xaml.cs

/*
 * 本例用於演示 tile 顯示模板的文本相關的知識點
 * 
 * 
 * tile -  磁貼元素
 * visual - 可視元素
 * binding - 綁定元素
 *     hint-textStacking - 垂直對齊方式
 *         top - 頂部對齊（默認值）
 *         center - 垂直居中
 *         bottom - 底部對齊
 * text - 文本元素
 *     hint-style - 文本樣式
 *     hint-align - 水平對齊方式
 *         left - 居左（默認值）
 *         center - 居中
 *         right - 居右
 *     hint-wrap - 是否可換行（默認值為 false）
 *     hint-minLines - 最小行數
 *     hint-maxLines - 最大行數
 *     
 *     
 * 
 * 
 * 
 * 關於 hint-style 的詳細說明如下
 * 
 * 1、基本樣式（epx - effective pixels 有效像素）
 * caption:   12epx 常規
 * body:      15epx 常規
 * base:      15epx 半粗
 * subtitle:  20epx 常規
 * title:     24epx 半細
 * subheader: 34epx 細體
 * header:    46epx 細體
 * 
 * 2、基本樣式的 Numeral 變體（減小了行高）
 * titleNumeral, subheaderNumeral, headerNumeral
 * 
 * 3、“基本樣式”和“基本樣式的 Numeral 變體”的 Subtle 變體（透明度 60%）
 * captionSubtle, bodySubtle, baseSubtle, subtitleSubtle, titleSubtle, titleNumeralSubtle, subheaderSubtle, subheaderNumeralSubtle, headerSubtle, headerNumeralSubtle
 */

using System;
using Windows.Data.Xml.Dom;
using Windows.UI.Notifications;
using Windows.UI.StartScreen;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Windows10.Notification.Tile
{
    public sealed partial class TemplateText : Page
    {
        private const string TILEID = "tile_template_text";

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

        // 在開始屏幕固定一個 secondary tile 磁貼
        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            Uri square150x150Logo = new Uri("ms-appx:///Assets/Square150x150Logo.png");
            Uri wide310x150Logo = new Uri("ms-appx:///Assets/Wide310x150Logo.png");
            Uri square310x310Logo = new Uri("ms-appx:///Assets/Square310x310Logo.png");
            SecondaryTile secondaryTile = new SecondaryTile(TILEID, "name", "arguments", square150x150Logo, TileSize.Wide310x150);
            secondaryTile.VisualElements.Wide310x150Logo = wide310x150Logo;
            secondaryTile.VisualElements.Square310x310Logo = square310x310Logo;

            try
            {
                bool isPinned = await secondaryTile.RequestCreateAsync();
                lblMsg.Text = isPinned ? "固定成功" : "固定失敗";
            }
            catch (Exception ex)
            {
                lblMsg.Text = "固定失敗: " + ex.ToString();
            }
        }

        // 文本的樣式
        private void btnSample1_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template=‘TileWide‘>
                            <text hint-style=‘base‘>base</text>
                            <text hint-style=‘baseSubtle‘>baseSubtle</text>
                            <text hint-style=‘captionSubtle‘>captionSubtle</text>
                            <text hint-style=‘titleNumeral‘>titleNumeral</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 水平對齊方式和文本換行
        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template=‘TileWide‘>
                            <text hint-style=‘caption‘ hint-align=‘center‘>hint-align=‘center‘</text>
                            <text hint-style=‘caption‘ hint-wrap=‘true‘ hint-minLines=‘1‘ hint-maxLines=‘10‘>hint-wrap=‘true‘ hint-minLines=‘1‘ hint-maxLines=‘10‘</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 垂直對齊方式
        private void btnSample3_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template=‘TileWide‘ hint-textStacking=‘bottom‘>
                            <text hint-style=‘caption‘>caption 1</text>
                            <text hint-style=‘caption‘>caption 2</text>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }


        private void UpdateTileNotification(string tileXml)
        {
            XmlDocument tileDoc = new XmlDocument();
            tileDoc.LoadXml(tileXml);

            TileNotification tileNotification = new TileNotification(tileDoc);

            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForSecondaryTile(TILEID);
            tileUpdater.Update(tileNotification);
        }
    }
}

OK
[源碼下載]

背水一戰 Windows 10 (110) - 通知（Tile）: secondary tile 模板之基礎, secondary tile 模板之文本