背水一战 Windows 10 (111) - 通知（Tile）: secondary tile 模板之图片, secondary tile 模板之分组
背水一战 Windows 10 (111) - 通知（Tile）: secondary tile 模板之图片, secondary tile 模板之分组
作者：webabcd
介绍
背水一战 Windows 10 之 通知（Tile）
- secondary tile 模板之图片
- secondary tile 模板之分组
示例
1、本例用于演示 tile 显示模板的图片相关的知识点
Notification/Tile/TemplateImage.xaml
<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.cs
/* * 本例用于演示 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); } } }
2、本例用于演示 tile 显示模板的分组相关的知识点
Notification/Tile/TemplateGroup.xaml
<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.cs
/* * 本例用于演示 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
[源码下载]
