背水一戰 Windows 10 (111) - 通知（Tile）: secondary tile 模板之圖片, secondary tile 模板之分組

時間 2019-11-05

標籤背水一戰 windows 通知 tile secondary 模板圖片分組欄目 Windows 简体版

原文原文鏈接

做者：webabcd

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

secondary tile 模板之圖片
secondary tile 模板之分組

示例
一、本例用於演示 tile 顯示模板的圖片相關的知識點
Notification/Tile/TemplateImage.xamlc++

<Page
    x:Class="Windows10.Notification.Tile.TemplateImage"
    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" />

            <StackPanel Orientation="Horizontal" Margin="5">
                <ComboBox Name="cmbRemoveMargin">
                    <ComboBoxItem Tag="false" Content="hint-removeMargin='false'" IsSelected="True" />
                    <ComboBoxItem Tag="true" Content="hint-removeMargin='true'" />
                </ComboBox>
                <Button Name="btnSample1" Content="更新 tile 通知" Click="btnSample1_Click" Margin="5 0 0 0" />
            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="5">
                <ComboBox Name="cmbPlacement">
                    <ComboBoxItem Tag="inline" Content="placement='inline'" IsSelected="True" />
                    <ComboBoxItem Tag="background" Content="placement='background'" />
                    <ComboBoxItem Tag="peek" Content="placement='peek'" />
                </ComboBox>
                <Button Name="btnSample2" Content="更新 tile 通知" Click="btnSample2_Click" Margin="5 0 0 0" />
            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="5">
                <ComboBox Name="cmbAlign">
                    <ComboBoxItem Tag="stretch" Content="hint-align='stretch'" IsSelected="True" />
                    <ComboBoxItem Tag="left" Content="hint-align='left'" />
                    <ComboBoxItem Tag="center" Content="hint-align='center'" />
                    <ComboBoxItem Tag="right" Content="hint-align='right'" />
                </ComboBox>
                <Button Name="btnSample3" Content="更新 tile 通知" Click="btnSample3_Click" Margin="5 0 0 0" />
            </StackPanel>

            <Button Name="btnSample4" Content="更新 tile 通知（hint-crop='circle' addImageQuery='true'）" Click="btnSample4_Click" Margin="5" />

            <Button Name="btnSample5" Content="peek 圖片和 background 圖片相結合" Click="btnSample5_Click" Margin="5" />

            <Button Name="btnSample6" Content="peek 圖片和 background 圖片相結合，並指定其 hint-overlay" Click="btnSample6_Click" Margin="5" />

            <StackPanel Orientation="Horizontal" Margin="5">
                <ComboBox Name="cmbPresentation">
                    <ComboBoxItem Tag="none" Content="hint-presentation='none'" IsSelected="True" />
                    <ComboBoxItem Tag="photos" Content="hint-presentation='photos'" />
                    <ComboBoxItem Tag="people" Content="hint-presentation='people'" />
                </ComboBox>
                <Button Name="btnSample7" Content="更新 tile 通知" Click="btnSample7_Click" Margin="5 0 0 0" />
            </StackPanel>

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

Notification/Tile/TemplateImage.xaml.csweb

/*
 * 本例用於演示 tile 顯示模板的圖片相關的知識點
 * 
 * 
 * tile -  磁貼元素
 * visual - 可視元素
 *     addImageQuery
 *         是否將當前的部分環境信息以 url 參數的方式附加到圖片地址中（一個 bool 值，默認值爲 false）
 * binding - 綁定元素
 *     addImageQuery
 *         是否將當前的部分環境信息以 url 參數的方式附加到圖片地址中（一個 bool 值，默認值爲 false）
 *     hint-presentation - 內容的呈現方式
 *         none - 默認值
 *         photos - 讓最多 12 張圖片以幻燈片的方式循環顯示，圖片間切換時會有一些過渡效果（僅支持圖片，不支持文本）
 *         people - 相似 win10 的「人脈」應用，即將多張圖片圓形剪裁併堆在磁貼上，再增長一些動畫效果（僅支持圖片，不支持文本）
 * image - 圖片元素
 *     src - 圖片地址（ms-appx:/// 或 ms-appdata:///local/ 或 http:// 或 https://）
 *     hint-removeMargin - 是否移除圖片的 margin（默認值爲 false）
 *         顯示圖片時，圖片本身默認會帶着 8 個像素的 margin，此屬性用於指定是否將這 8 個像素的 margin 去掉
 *         注：磁貼自帶的 padding 爲 8 個像素，因此即便設置了 hint-removeMargin='true' 圖片和磁貼邊緣仍是有距離的
 *     placement - 圖片顯示方式
 *         inline - 圖片顯示在磁貼內部（默認值）
 *         background - 圖片做爲磁貼的背景
 *         peek - 圖片與文本輪流顯示
 *     hint-overlay - 在圖片上覆蓋一層黑色的遮罩，並設置遮罩的不透明度（0 - 100）
 *         此屬性只對 background 圖片和 peek 圖片有效
 *         在 binding 節點也能夠設置此屬性
 *     hint-align - 圖片對齊方式
 *         stretch - 拉伸（默認值）
 *         left - 居左（圖片以原始分辨率顯示）
 *         center - 居中（圖片以原始分辨率顯示）
 *         right - 居右（圖片以原始分辨率顯示）
 *     hint-crop
 *         none - 圖片不剪裁（默認值）
 *         circle - 圖片剪裁成圓形
 *     addImageQuery
 *         是否將當前的部分環境信息以 url 參數的方式附加到圖片地址中（一個 bool 值，默認值爲 false）
 *         
 *         
 * 注：圖片不能大於 1024x1024 像素，不能大於 200 KB，類型必須爲 .png .jpg .jpeg .gif
 */

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 TemplateImage : Page
    {
        private const string TILEID = "tile_template_image";

        public TemplateImage()
        {
            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();
            }
        }

        // hint-removeMargin
        private void btnSample1_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='{((FrameworkElement)cmbRemoveMargin.SelectedItem).Tag}' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // placement
        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                 <tile>
                    <visual>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='ms-appx:///Assets/hololens.jpg' placement='{((FrameworkElement)cmbPlacement.SelectedItem).Tag}' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // hint-align
        private void btnSample3_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                 <tile>
                    <visual>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='ms-appx:///Assets/hololens.small.jpg' hint-align='{((FrameworkElement)cmbAlign.SelectedItem).Tag}' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // hint-crop='circle' addImageQuery='true'
        private void btnSample4_Click(object sender, RoutedEventArgs e)
        {
            /*
             * 本例中的 addImageQuery 被指定爲 true
             * 因此以本例來講圖片的實際請求地址爲 http://images.cnblogs.com/mvpteam.gif?ms-scale=100&ms-contrast=standard 
             * 若是不指定 addImageQuery 或者將其設置爲 false 則本例的圖片的實際請求地址與 src 設置的一致，就是 http://images.cnblogs.com/mvpteam.gif
             */

            string tileXml = $@"
                 <tile>
                    <visual addImageQuery='true'>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='http://images.cnblogs.com/mvpteam.gif' hint-crop='circle' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // peek 圖片和 background 圖片相結合
        // 「peek 圖片」和「background 圖片 + 文本」輪流顯示
        private void btnSample5_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                 <tile>
                    <visual>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='ms-appx:///Assets/hololens.jpg' placement='peek' />
                            <image src='ms-appx:///Assets/StoreLogo.png' placement='background' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // peek 圖片和 background 圖片相結合，並指定其 hint-overlay
        private void btnSample6_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                 <tile>
                    <visual>
                        <binding template='TileWide'>
                            <text hint-style='caption'>title</text>
                            <image src='ms-appx:///Assets/hololens.jpg' placement='peek' hint-overlay='50' />
                            <image src='ms-appx:///Assets/StoreLogo.png' placement='background' hint-overlay='80' />
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // hint-presentation
        private void btnSample7_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                 <tile>
                    <visual>
                        <binding template='TileWide' hint-presentation='{((FrameworkElement)cmbPresentation.SelectedItem).Tag}'>
                            <image src='ms-appx:///Assets/hololens.jpg' />
                            <image src='ms-appx:///Assets/StoreLogo.png' />
                            <image src='ms-appx:///Assets/hololens.jpg' />
                            <image src='ms-appx:///Assets/StoreLogo.png' />
                            <image src='ms-appx:///Assets/hololens.jpg' />
                            <image src='ms-appx:///Assets/StoreLogo.png' />
                        </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);
        }
    }
}

二、本例用於演示 tile 顯示模板的分組相關的知識點
Notification/Tile/TemplateGroup.xamlexpress

<Page
    x:Class="Windows10.Notification.Tile.TemplateGroup"
    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/TemplateGroup.xaml.cswindows

/*
 * 本例用於演示 tile 顯示模板的分組相關的知識點
 * 
 * 
 * tile -  磁貼元素
 * visual - 可視元素
 * binding - 綁定元素
 * group/subgroup - 組元素/子組元素
 *     一個 binding 內能夠包含多個 group，一個 group 內能夠包含多個 subgroup 且 group 的子節點只能是 subgroup
 *     不一樣的 group 在垂直方向上排列，不一樣的 subgroup 在水平方向上排列
 *     在磁貼上顯示多 group 數據時，若是後面的 group 的內容沒法顯示徹底的話則可能不會被顯示
 * subgroup - 子組元素
 *     hint-weight - 多 subgroup 水平排列時，每列 subgroup 所佔用空間的權重
 *     hint-textStacking - 垂直對齊方式
 *         top - 頂部對齊（默認值）
 *         center - 垂直居中
 *         bottom - 底部對齊
 */

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 TemplateGroup : Page
    {
        private const string TILEID = "tile_template_group";

        public TemplateGroup()
        {
            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='TileLarge'>
                            <group>
                                <subgroup>
                                    <text hint-style='caption'>caption 1</text>
                                    <text hint-style='captionSubtle'>captionSubtle 1</text>
                                </subgroup>
                            </group>
                            <text />
                            <group>
                                <subgroup>
                                    <text hint-style='caption'>caption 2</text>
                                    <text hint-style='captionSubtle'>captionSubtle 2</text>
                                </subgroup>
                            </group>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 水平分組（能夠指定每列的空間權重）
        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template='TileWide'>
                            <group>
                                <subgroup hint-weight='1'>
                                    <text hint-style='caption'>caption 1</text>
                                    <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='true'/>
                                    <text hint-style='captionSubtle'>captionSubtle 1</text>
                                </subgroup>
                                <subgroup hint-weight='1'>
                                    <text hint-style='caption'>caption 2</text>
                                    <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='true'/>
                                    <text hint-style='captionSubtle'>captionSubtle 2</text>
                                </subgroup>
                            </group>
                        </binding>
                    </visual>
                </tile>";

            UpdateTileNotification(tileXml);
        }

        // 水平分組（能夠指定每列的空間權重，以及每列的垂直對齊方式）
        private void btnSample3_Click(object sender, RoutedEventArgs e)
        {
            string tileXml = $@"
                <tile>
                    <visual>
                        <binding template='TileWide'>
                            <group>
                                <subgroup hint-weight='2'>
                                    <text hint-style='caption'>caption 1</text>
                                    <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='true'/>
                                    <text hint-style='captionSubtle'>captionSubtle 1</text>
                                </subgroup>
                                <subgroup hint-weight='1' hint-textStacking='center'>
                                    <text hint-style='caption'>caption 2</text>
                                    <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='true'/>
                                    <text hint-style='captionSubtle'>captionSubtle 2</text>
                                </subgroup>
                                <subgroup hint-weight='1' hint-textStacking='bottom'>
                                    <text hint-style='caption'>caption 3</text>
                                    <image src='ms-appx:///Assets/hololens.jpg' hint-removeMargin='true'/>
                                    <text hint-style='captionSubtle'>captionSubtle 3</text>
                                </subgroup>
                            </group>
                        </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
[源碼下載]app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。