背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组
2021-04-03 06:25
标签:manage 必须 ons 屏幕 syn lock nsa eid partial [源码下载] Notification/Tile/TemplateImage.xaml.cs Notification/Tile/TemplateGroup.xaml.cs 背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组 标签:manage 必须 ons 屏幕 syn lock nsa eid partial 原文地址:https://www.cnblogs.com/webabcd/p/9206990.html
作者:webabcd
介绍
背水一战 Windows 10 之 通知(Tile)
示例
1、本例用于演示 tile 显示模板的图片相关的知识点
Notification/Tile/TemplateImage.xamlPage
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>
/*
* 本例用于演示 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 = $@"
2、本例用于演示 tile 显示模板的分组相关的知识点
Notification/Tile/TemplateGroup.xamlPage
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>
/*
* 本例用于演示 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 = $@"
OK
[源码下载]
文章标题:背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组
文章链接:http://soscw.com/index.php/essay/71703.html