现代操作系统应用开发：UWP——LiveTileSample：动态磁贴

功能简介

动态磁贴是UWP的一项新功能，具体效果如下，不了解UWP动态磁贴的可以看微软的官方介绍（传送门）

博客示例包括一个MainPage，如下图所示，包括一个Image控件和两个文本框（可以用于输入标题和内容），两个按钮，一个可以更改图片，一个可以添加磁贴；

对于你新建的磁贴，首先，你需要把你的程序拖动到右边（如下面的视频所示），或者右键选择固定到开始屏幕；你可以添加多个磁贴实现滚动效果，但是UWP的磁贴最多只会保存你最后添加的5个磁贴；

实现效果

传送门

实现过程

添加引用Microsoft.Toolkit.Uwp.Notifications

• 在引用右键管理NuGet程序包搜索Microsoft.Toolkit.Uwp.Notifications并安装

在App.xaml.cs的构造函数中添加代码

//App.xaml.cs
public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
     // 每次启动的时候要清空队列
    TileUpdateManager.CreateTileUpdaterForApplication().Clear();
    // 实现通知循环
    TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); 
}

需要注意的地方：

• TileUpdateManager.CreateTileUpdaterForApplication().Clear()；
• TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

新建类LiveTileService

//LiveTileService.cs
public class LiveTileService
{
    //添加动态磁贴，title为磁贴的标题，detail为磁贴的内容，source为背景图片
    public void AddTile(string title, string detail, string source)
    {
        //得到磁贴的对象
        TileContent content = CreateTileContent(title, detail, source);
        var notification = new TileNotification(content.GetXml());
        //添加到磁贴的队列
        TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
    }

    //创建磁贴对象并返回
    private TileContent CreateTileContent(string title, string detail, string source)
    {
        return new TileContent()
        {
            Visual = new TileVisual()
            {
                //这里限于篇幅只写了TileMedium，其实还有TileLarge和TileMedium,TileWide,对应不同磁贴的大小
                TileMedium = new TileBinding() 
                {
                    Content = new TileBindingContentAdaptive()
                    {
                        Children =
                        {
                            new AdaptiveText()
                            {                            
                                Text = title,//设置标题
                                HintStyle = AdaptiveTextStyle.Title
                            },
                            new AdaptiveText()
                            {
                                Text = detail,//设置内容
                                HintStyle = AdaptiveTextStyle.Subtitle
                            }
                        },
                        BackgroundImage = new TileBackgroundImage()
                        {
                            Source = source //设置背景图片
                        }
                    }
                }
            }
        };
    }

}

需要注意的地方：

• AddTile 为添加磁贴的函数
• CreateTileContent中新建TileContent时注意Content不能少

在MainPage.xaml中添加控件

//MainPage.xaml
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <!-- Image的Source指向的是我的Assets文件夹中的图片，在你的代码中需要对此处进行更改 -->
        <Image x:Name="MyImage" Source="ms-appx:///Assets/spider.jpg" Width="280" Height="280"></Image>
        <TextBlock Text="标题" HorizontalAlignment="Center" Margin="5"></TextBlock>
        <TextBox x:Name="MyTitle" Width="380" Margin="5"></TextBox>
        <TextBlock Text="内容" HorizontalAlignment="Center"  Margin="5"></TextBlock>
        <TextBox x:Name="MyDetail" Width="380" Height="50" TextWrapping="Wrap"  Margin="5"></TextBox>
        <Button Content="更改图片" Click="ChangeImage" HorizontalAlignment="Center" Margin="5"></Button>
        <Button Content="添加磁贴" Click="AddTile" HorizontalAlignment="Center" Margin="5"></Button>
    </StackPanel>
</Grid>

在MainPage.xaml.cs文件中添加代码

public sealed partial class MainPage : Page
{
    //新建LiveTileService对象
    private LiveTileService liveTileService;
    //保存图片路径，添加磁贴时将使用该图片路径
    private string source;
    public MainPage()
    {
        liveTileService = new LiveTileService();
        //设置默认值
        source = "ms-appx:///Assets/spider.jpg";
        this.InitializeComponent();
    }

    private void AddTile(object sender, RoutedEventArgs e)
    {
        //添加磁贴
        liveTileService.AddTile(MyTitle.Text, MyDetail.Text, source);
    }

    private async void ChangeImage(object sender, RoutedEventArgs e)
    {
        //选取图片
        FileOpenPicker openPicker = new FileOpenPicker();
        openPicker.FileTypeFilter.Add(".jpg");
        StorageFile file = await openPicker.PickSingleFileAsync();
        if (file != null)
        {
            //设置Image为选择的图片
            BitmapImage bitmap = new BitmapImage();
            using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
            {
                bitmap.SetSource(stream);
            }
            MyImage.Source = bitmap;

            //将图片保存在LocalFolder
            StorageFolder localFolder = ApplicationData.Current.LocalFolder;
            StorageFile fileCopy = await file.CopyAsync(localFolder, file.Name, NameCollisionOption.ReplaceExisting);
        }
        source = "ms-appdata:///local/" + file.Name;
    }

}

需要注意的地方：

• source默认值的设置
• 每次上传图片后需要保存到LocalFolder，添加磁贴时磁贴才能通过Source读取图片，关于文件存储的问题可以参考博客UWP——文件管理（二）

FYI

项目下载：LiveTileSample

项目下载之后记住把Debug模式从ARM换成X86或X64（根据你自己的机型选择），之前一开始学习的时候不知道这一点，从网上下载下来的项目都运行不了，纠结的一逼(╥╯^╰╥)