Fork me on GitHub

UWP-tile&&share

发表于 | 分类于 | 阅读次数:

Week5

需求如下：

  1. 制作磁贴

    • 要求使用标准的处理 XML DOM 方式创建动态磁贴
    • 要求采用 Adaptive Tile （覆盖至少 small、medium、wide）
    • 实现效果：要求每添加一条项目，磁贴能进行更新，并且更新的内容循环展示

  2. App-to-App communication
    在 MenuFlyoutItem 中增加 Share 选项，点击后相应条目能以邮件方式进行共享（不要求动态共享图片）

磁贴Tile

磁贴是 Windows 10 提出的新概念，应用可以在开始菜单拥有一个磁贴，用来展示一些概括内容或提供一个快速启动入口。主要利用两件事：一个 xml 文档构造磁贴，一个 cs 文件指定展示内容。对于磁贴的 xml 文档，在 Notifications Visualizer 软件有模板，这里我们就直接复制粘贴啦。

直接看代码还是很容易看懂的，不同的 template 绑定一个磁贴样式，然后其中的内容可以被 cs 代码更改。对于背景图和 item 图片可以看宽屏状态下的代码。我们可以指定图片为背景图，然后对于 item 图片，可以在 group 中划分一个 subgroup 来存放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8" ?>
<tile>
    <visual branding="nameAndLogo" displayName="MyList">

    <binding template="TileSmall" >
        <!--more-->
    </binding>

    <binding template="TileMedium">
        <!--more-->
    </binding>

    <binding template="TileWide"  displayName="MyList">
        <image placement="background" src="Assets/background.jpg"  />
        <group>
        <subgroup>
            <image  hint-align="stretch"  src="Assets/photo.jpg" />
        </subgroup>
        <subgroup>
            <text hint-style="caption" hint-align="center">我是标题</text>
            <text hint-style="captionsubtle" hint-align="center" hint-wrap="true">我是内容</text>
        </subgroup>
        </group>
    </binding>

    <binding template="TileLarge"  displayName="MyList">
        <!--more-->
    </binding>

    </visual>
</tile>

cs 代码如下。这里处理的方式是很不优雅的。学过 web 的同学，肯定知道，这相当于代码之间的越界。其实可以考虑使用绑定的方法来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private void Tile_Click(object sender, RoutedEventArgs e) {
    XmlDocument document = new XmlDocument();
    document.LoadXml(System.IO.File.ReadAllText("Tile.xml"));
    XmlNodeList textElements = document.GetElementsByTagName("text");
    var count = ViewModel.AllItems.Count;
    if (count == 0) return;
    textElements[0].InnerText = ViewModel.AllItems[count - 1].title;
    textElements[2].InnerText = ViewModel.AllItems[count - 1].title;
    textElements[3].InnerText = ViewModel.AllItems[count - 1].detail;
    textElements[4].InnerText = ViewModel.AllItems[count - 1].title;
    textElements[5].InnerText = ViewModel.AllItems[count - 1].detail;
    textElements[6].InnerText = ViewModel.AllItems[count - 1].title;
    textElements[7].InnerText = ViewModel.AllItems[count - 1].detail;
    var tileNotification = new TileNotification(document);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
    TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
}

效果如图：
Tile

分享Share

share功能，实现将我们的 item 通过 mail 发送出去。这个功能的实现还是很简单的。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private void ShareClick(object sender, RoutedEventArgs e) {
    dynamic temp = e.OriginalSource;
    ViewModel.SelectedItem = (ListItem)(temp.DataContext);
    DataTransferManager.ShowShareUI();
}
void OnShareDataRequested(DataTransferManager sender, DataRequestedEventArgs args) {
    DataRequest request = args.Request;
    request.Data.Properties.Title = ViewModel.SelectedItem.Title;
    request.Data.Properties.Description = ViewModel.SelectedItem.detail;
    request.Data.SetBitmap(RandomAccessStreamReference.CreateFromUri(new Uri("path")));
    DataRequestDeferral deferal = request.GetDeferral();
    request.Data.SetText(ViewModel.SelectedItem.detail);
    deferal.Complete();
}

效果如图：
Share