关闭

win10 UWP 标签

标签: win10C#uwpxamlwindows10
6455人阅读 评论(0) 收藏 举报
分类:

本文主要翻译: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

5
0
查看评论

【UWP通用应用开发】控件、应用栏

控件的属性、事件与样式资源如何添加控件添加控件的方式有多种,大家更喜欢下面哪一种呢?1)使用诸如Blend for Visual Studio或Microsoft Visual Studio XAML设计器的设计工具。 2)在Visual Studio XAML编辑器中将控件添加到XAML代码中。...
  • NoMasp
  • NoMasp
  • 2015-12-11 14:28
  • 6202

win10 uwp 入门

UWP是什么我在这里就不说,本文主要是介绍如何入门UWP,也是合并我写的博客。
  • lindexi_gd
  • lindexi_gd
  • 2016-07-27 08:55
  • 4427

win10 UWP 应用设置

win10 UWP 应用设置 简单的把设置需要的,放到微软自带的LocalSettings LocalSettings.Values可以存放几乎所有数据 如果需要存放复合数据,一个设置项是由多个值组成,可以使用ApplicationDataCompositeValue将多个合并。 存放一个st...
  • lindexi_gd
  • lindexi_gd
  • 2016-01-12 21:01
  • 2357

win10 uwp 毛玻璃

毛玻璃在UWP很简单,不会和WPF那样伤性能。 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃。毛玻璃可以使用 win2D 方法,也可以使用 Compositor 。使用 win2d 得到软件内控件毛玻璃,而使用 Compositor 可以获得窗口毛玻璃。
  • lindexi_gd
  • lindexi_gd
  • 2017-06-19 09:12
  • 2410

win10 uwp iot

这篇文章主要译: https://msdn.microsoft.com/magazine/mt694090 有很多都是胡说,随便喷,但我不会理。
  • lindexi_gd
  • lindexi_gd
  • 2016-04-24 08:13
  • 5887

解决 Win10 UWP 无法使用 ss 连接

一旦使用了 ss, 那么很多应用就无法连接网络。 本文提供一个方法可以简单使用ss提供的代理
  • lindexi_gd
  • lindexi_gd
  • 2017-04-26 09:12
  • 5099

Win10/UWP 扫描二维码

在Win10开发中,扫描二维码以及拍照都和以前的Windows 8.1 相同,是使用MediaCapture对象来获取图片或者视频预览数据,通过MediaCapture的CapturePhotoToStreamAsync()方法就可以拿到IRandomAccessStream流进行二维码解析或者做其...
  • igweyou
  • igweyou
  • 2015-12-08 09:47
  • 2387

Win10的UWP之进度条

关于UWP的进度条的处理的方案有两种方案 我们新建一个项目,然后处理的界面如下的代码<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowD...
  • zhongyanfu0
  • zhongyanfu0
  • 2016-07-21 19:39
  • 1240

win10 uwp 获取按钮鼠标左键按下

我们可以使用`PointerPressed`获得鼠标右键按下,但是我们如何获得左键?
  • lindexi_gd
  • lindexi_gd
  • 2016-12-29 09:37
  • 2466

UWP——HttpClient模拟浏览器的GET、POST请求之Win10 Mobile测试

上一篇写了我的第一个UWP应用程序,是在电脑上测试的,这篇讲述如何将程序如何部署在手机上。首先还是先看一下原始数据: 这篇的重点在于部署到手机上,代码基本上没有什么变化,所以就不说了。在VS中找到”解决方案平台“—选中ARM,手机调试吗—选中“Device”,然后点击,没想到出错了: 查询资...
  • duyelang
  • duyelang
  • 2016-01-16 23:30
  • 2420
    个人资料
    • 访问:630709次
    • 积分:9208
    • 等级:
    • 排名:第2403名
    • 原创:240篇
    • 转载:16篇
    • 译文:25篇
    • 评论:240条
    博客专栏
    文章分类
    最新评论