背水一战 Windows 10 (110) - 通知(Tile): secondary tile 模板之基础, secondary tile 模板之文本
作者: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
[源码下载]