本文主要翻译:http://visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx http://depblog.weblogs.us/2015/02/18/how-to-add-a-tag-list-into-winrt-universal-apps/

我们需要给用户很多标签,我们需要使用一个控件,他的长度是变化,可以快速放,这样好像wrapPancel就是我们需要,因为这个我直接写如果看起来不懂,可以看

我们点添加就会添加标签,我们删除标签就很快排版。

我们使用RichBox,这个可以做我们标签

源代码因为作者写的和UWP不一样,我改UWP,放在https://github.com/lindexi/TagList

运行效果

点击按钮

删除

软件使用,先add

跳到让用户选择,这里如果让用户输入,使用有点难,可以使用用户在跳转输入,输入自动变为预设一样

源.Add(new Tag() {Id = "id",Label = "用户输入"});

选择标签,选择完成保存

可以看到首页

标签使用在跳转MainPage

if (e.NavigationMode == NavigationMode.Back)

我们把选择保存

General.GetInstance().TagSelection

SetTags是本算法的主要

我们搜索全部新加和被删除

var tagParagraph = (Paragraph) (from paragraph in TagRichTextBlock.Blocks
    where paragraph.Name.StartsWith("Tags")
    select paragraph).FirstOrDefault();

var tagIds = from tag in General.GetInstance().TagSelection.Tags
    select tag.Id;

var buttonsToRemove = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()
    where !tagIds.Contains(((Button) item.Child).Name)
    select item;

foreach (InlineUIContainer container in buttonsToRemove)
    tagParagraph.Inlines.Remove(container);
IEnumerable<string> buttonIds = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()
                    select ((Button) item.Child).Name;

                IEnumerable<Tag> tagsToAdd = from item in General.GetInstance().TagSelection.Tags
                    where !buttonIds.Contains(item.Id)
                    select item;

                foreach (Tag tag in tagsToAdd)
                {
                    InlineUIContainer container = new InlineUIContainer();
                    RichTextBlock inlineRichTextBlock = new RichTextBlock()
                    {
                        IsTextSelectionEnabled = false
                    };
                    Paragraph inlineParagraph = new Paragraph();
                    inlineParagraph.Inlines.Add(new Run()
                    {
                        Text = string.Format("{0} ", tag.Label),
                        FontSize = 14
                    });
                    inlineParagraph.Inlines.Add(new Run()
                    {
                        Text = "\uE106",
                        FontFamily = new FontFamily("Segoe UI Symbol"),
                        FontSize = 10
                    });
                    inlineRichTextBlock.Blocks.Add(inlineParagraph);

                    Button tagButton = new Button()
                    {
                        Content = inlineRichTextBlock,
                        Style = (Style) Application.Current.Resources["TagButtonStyle"],
                        Name = tag.Id
                    };
                    tagButton.Click += OnTagButtonClicked;
                    container.Child = tagButton;

                    tagParagraph.Inlines.Add(container);
                }

点击删除按钮,删除id

            string tagId = ((Button) sender).Name;
            General.GetInstance()
                .TagSelection.Tags.Remove(General.GetInstance().TagSelection.Tags.Single(item => item.Id.Equals(tagId)));
            SetTags();

源码:https://github.com/Depechie/TagList

win10 UWP 标签的更多相关文章

  1. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  2. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  3. Win10 UWP开发实现Bing翻译

    微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...

  4. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

  5. 【Win10 UWP】后台任务与动态磁贴

    动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...

  6. 【Win10 UWP】URI Scheme(一):Windows Store协议的解析和使用

    协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...

  7. 【Win10 UWP】QQ SDK(二):SDK的回调处理

    上一讲,我们介绍了QQ SDK的使用方法,请看<[Win10 UWP]QQ SDK(一):SDK基本使用方法> 一. 回调的基本形式 从前面的介绍中我们知道,我们的应用和QQ客户端之间需要 ...

  8. Win10 UWP应用发布流程

    简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...

  9. 【Win10 UWP】QQ SDK(一):SDK基本使用方法

    每当开发一个应用需要社交分享的应用时,总是心里咯噔一下:到底什么时候分享能加上QQ和微信?除了WP8.0版本的微信SDK,官方似乎从未正面发布过适应时代发展的QQ SDK,就连后台,也没有一个可以创建 ...

随机推荐

  1. 201521123004 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:从ArrayList ...

  2. Java第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 ...

  3. 201521123063 《JAVA程序设计》 第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 上周学习了继承和多态,满足is-a条件,但是发现会导致继承的滥用,如果只是但以的 ...

  4. 201521123024 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商 ...

  5. Java 第三周总结

    1.本周学习总结 2.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pub ...

  6. 201521123026 《Java程序设计》第一周学习总结

    1. 本章学习总结 1.简要了解JAVA的发展史以及其特点(面向对象.跨平台性,健壮性,安全性,可移植性,多线程性,动态性等) 2.认识JAVA三大平台(Java SE,Java EE,JavaME) ...

  7. 201521123057《Java程序设计》第14周学习总结

    0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 数据库基本操作(目前为止主要介绍了表的基本操作) 创建表 CREATE ...

  8. 安装wampserve之前需要安装vc++2012.

    本人是64位系统下载了wampserver3.0.6之后安装好,启动报错缺少msvcr110.dll. 于是从网上下载了msvcr110.dll放到了windows的syswow64文件夹下,甚至还重 ...

  9. day18<集合框架+>

    集合框架(Map集合概述和特点) 集合框架(Map集合的功能概述) 集合框架(Map集合的遍历之键找值) 集合框架(Map集合的遍历之键值对对象找键和值) 集合框架(Map集合的遍历之键值对对象找键和 ...

  10. linux文件权限解析(摘)

    用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建 ...