ContentControl是最简单的TemplatedControl,而且它在UWP出场频率很高.ContentControl和Panel是VisualTree的基础,可以说几乎所有VisualTree上的UI元素的父节点中总有一个ContentControl或Panel. 因为ContentControl很简单,如果只实现ContentControl最基本功能的话很适合用来做TemplatedControl的入门.这次的内容就是模仿ContentControl实现一个模板化控件MyConte…

ContentControl是最简单的TemplatedControl,而且它在UWP出场频率很高.ContentControl和Panel是VisualTree的基础,可以说几乎所有VisualTree上的UI元素的父节点中总有一个ContentControl或Panel. 因为ContentControl很简单,如果只实现ContentControl最基本功能的话很适合用来做TemplatedControl的入门.这次的内容就是模仿ContentControl实现一个模板化控件MyConte…

UWP的UI主要由布局容器和内容控件(ContentControl)组成.布局容器是指Grid.StackPanel等继承自Panel,可以拥有多个子元素的类.与此相对,ContentControl则只能包含单个子元素. 在UWP中,Button.CheckBox.ScrollViewer.Frame.ToolTip等都继承自ContentControl,其它控件则不是在ContentTemplate中使用ContentControl,就是被ContentControl使用,可以说Content…

1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大部分,ComboBox,ListBox,ListView,FlipView,GridView等控件都继承自ItemsControl.曾经有个说法:了解ContentControl和ItemsControl才能算是了解WPF的控件,这一点在UWP中也是一样的. 以我的经验来说,通过继承ItemsCon…

1. 概述 来看看这段XMAL: <StackPanel Width="300"> <TextBox Header="TextBox" /> <ComboBox Header="ComboBox" HorizontalAlignment="Stretch"/> <AutoSuggestBox Header="AutoSuggestBox" /> <Tex…

1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentControl.ItemsControl,也可以选择从RangeBase.Selector中. 代码和UI分离:通常控件的开发者不能控制最终用户怎么重写ControlTemplate,尽量做到代码和UI分离可以避免更多的异常.而且先写完所有代码,再用Blend实现UI,会比在代码和UI间交错地工作更高效. 使…

一.前言 最近在弄毕业设计(那时坑爹选了制作个UWP商店的APP),一个人弄得烦躁,在这里记录一些在做毕业设计时的学习过程.由于我的毕业设计是做一个音乐播放器,那么Windows商店上优秀的软件当然是网易云音乐了,为了不用自己去设计一些界面,所以山寨之路走起吧. 二.模仿网易云音乐动画之播放页面切换 直接观察网易云音乐的播放界面切换动图,可以看得出播放界面的变换中心是左小角,通过缩小和放大实现播放界面的切换,同时播放界面是覆盖了原界面上. 模仿这个动画用xaml很容易就可以实现出来,下面一步步实…

1.概述 UWP允许开发者通过两种方式创建自定义的控件:UserControl和TemplatedControl(模板化控件).这个主题主要讲述如何创建和理解模板化控件,目标是能理解模板化控件常见的知识点,并且可以创建扩展性良好的模板化控件. 1.1 ControlTemplate UWP的控件有很多属性,使用这些属性可以为控件定制不同的外观,例如将Button的Border变粗,Background改为红色等,但通过这种改造控件,能做到的仍十分有限. 通过为控件赋予新的ControlTempl…

1. TemplatePart TemplatePart(部件)是指ControlTemplate中的命名元素.控件逻辑预期这些部分存在于ControlTemplate中,并且使用protected DependencyObject GetTemplateChild(String childName)获取它们后进行操作. 以AutoSuggestBox为例,它的ControlTemplate结构如下,可以看到AutoSuggestBox由四个TemplatePart组成,每个TemplatePa…

1. 使用TemplateSettings统一外观 TemplateSettings提供一组只读属性,用于在新建ControlTemplate时使用这些约定的属性. 譬如,修改HeaderedContentControl的ControlTemplate以呈现不同的外观,但各个ControlTemplate之间的HeaderedContentControl中的Margin和FontWeight想要保持统一.为了实现这个目的可以创建一个提供默认Margin和FontWeight值的HeaderedC…

1. 功能需求 使用TemplatePart实现上篇文章的两个需求(Header为空时隐藏HeaderContentPresenter,鼠标没有放在控件上时HeaderContentPresent半透明),虽然功能已经实现,但这样实现的话基本上也就别想扩展了.譬如开发者做不到通过继承或修改ControlTemplate实现如下功能: 半透明时的Opacity不是0.7,而是0.5. 半透明和不透明之前切换时有渐变动画. 当然也并不是不可以用代码实现这些需求,只是会复杂很多.大部分的开发者都是对C…

1. UserControl vs. TemplatedControl 在UWP中自定义控件常常会遇到这个问题:使用UserControl还是TemplatedControl来自定义控件. 1.1 使用UserControl自定义控件 继承自UserControl. 由复数控件组合而成. 包含XAML及CodeBehind. 优点: 上手简单. 可以在CodeBehind直接访问UI元素. 开发速度很快. 缺点: 不能使用ControlTemplate进行定制. 通常很难继承及扩展. 使用场景:…

1. TemplatePart vs. VisualState 在前面两篇文章中分别使用了TemplatePart及VisualState的方式实现了相同的功能,其中明显VisualState的方式更灵活一些.如果遇到这种情况通常我更倾向使用VisualState.不过在实际应用中这两种实现方式并不是互斥的,很多模板化控件都同时使用这两种方式, 使用VisualState有如下好处: 代码和UI分离. 可以更灵活地扩展控件. 可以使用Blend轻松实现动画. 并不是说VisualState好处这…

以我的经验来说,要让TemplatedControl支持Command的需求不会很多,大部分情况用附加属性解决这个需求会更便利些,譬如UWPCommunityToolkit的HyperlinkExtensions. 如果正在从头设计自定义控件并真的需要提供命令支持,可以参考这篇文章.支持Command的步骤比较简单,所以这篇文章比较简短. 要实现Command支持,控件中要执行如下步骤: 定义Command和CommandParameter属性. 监视Command的CanExecuteChan…

1. 基本需求 之前的ContentView2添加了PointerOver等效果,和TextBox等本来就有Header的控件放在一起反而变得鹤立鸡群. 为了解决这个问题,这次把ContentView2的Header部分分离出来做成一个可复用的控件HeaderView,它继承自Control,并且拥有Header属性及AttachElement属性.把它放到其他控件的ControlTemplate替换原本的HeaderContentPresenter,这样就能统一外观了.在ControlTemp…

UWP自定义控件的入门文章 [UWP 自定义控件]了解模板化控件(1):基础知识 [UWP 自定义控件]了解模板化控件(2):模仿ContentControl [UWP 自定义控件]了解模板化控件(2.1):理解ContentControl [UWP 自定义控件]了解模板化控件(3):实现HeaderedContentControl [UWP 自定义控件]了解模板化控件(4):TemplatePart [UWP 自定义控件]了解模板化控件(5):VisualState [UWP 自定义控件]了解…

1. 前言 博客园终于新增了UWP的分类,我来为这个分类贡献第一篇博客吧. UWP有很多问题,先不说生态的事情,表单.验证.输入.设计等等一堆基本问题缠身.但我觉得最应该首先解决的绝对是Blend,那个随随便便就崩溃.报错.比Silverlight时代还差.不能用的Blend For Visal Studio.不过无论Blend怎么坏都不能让我写漂亮控件的心屈服,毕竟写了这么多年XAML,只靠Visual Studio勉勉强强还是可以写样式的,这篇文章介绍的控件就几乎全靠Visual Studi…

原文:将 C++/WinRT 中的线程切换体验带到 C# 中来(WPF 版本) 如果你要在 WPF 程序中使用线程池完成一个特殊的任务,那么使用 .NET 的 API Task.Run 并传入一个 Lambda 表达式可以完成.不过,使用 Lambda 表达式会带来变量捕获的一些问题,比如说你需要区分一个变量作用于是在 Lambda 表达式中,还是当前上下文全局(被 Lambda 表达式捕获到的变量).然后,在静态分析的时候,也难以知道此 Lambda 表达式在整个方法中的执行先后顺序,不利于分…

UWP的UI主要由布局容器和内容控件(ContentControl)组成.布局容器是指Grid.StackPanel等继承自Panel,可以拥有多个子元素的类.与此相对,ContentControl则只能包含单个子元素. 在UWP中,Button.CheckBox.ScrollViewer.Frame.ToolTip等都继承自ContentControl,其它控件则不是在ContentTemplate中使用ContentControl,就是被ContentControl使用,可以说Content…

1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大部分,ComboBox,ListBox,ListView,FlipView,GridView等控件都继承自ItemsControl.曾经有个说法:了解ContentControl和ItemsControl才能算是了解WPF的控件,这一点在UWP中也是一样的. 以我的经验来说,通过继承ItemsCon…

1. 概述 来看看这段XMAL: <StackPanel Width="300"> <TextBox Header="TextBox" /> <ComboBox Header="ComboBox" HorizontalAlignment="Stretch"/> <AutoSuggestBox Header="AutoSuggestBox" /> <Tex…

1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentControl.ItemsControl,也可以选择从RangeBase.Selector中. 代码和UI分离:通常控件的开发者不能控制最终用户怎么重写ControlTemplate,尽量做到代码和UI分离可以避免更多的异常.而且先写完所有代码,再用Blend实现UI,会比在代码和UI间交错地工作更高效. 使…

1. 为什么需要ProgressRing 虽然我认为这个控件库的控件需要模仿Aero2的外观,但总有例外,其中一个就是ProgressRing.ProgressRing是来自UWP的控件,部分代码参考了 这里.ProgressRing的使用方式运行效果如下: <kino:ProgressRing IsActive="True" Height="40" Width="40" Margin="8" MinHeight=&qu…

1. 一键三连 什么是一键三连? 哔哩哔哩弹幕网中用户可以通过长按点赞键同时完成点赞.投币.收藏对UP主表示支持,后UP主多用"一键三连"向视频浏览者请求对其作品同时进行点赞.投币.收藏. 去年在云之幻大佬的 哔哩 项目里看到一键三连的 UWP 实现,觉得挺有趣的,这次参考它的代码重新实现一次,最终成果如下: 下面这些是一键三连的核心功能: 可以控制并显示进度 有普通状态和完成状态 可以点击或长按 当切换到完成状态时弹出写泡泡 点击切换状态 长按 2 秒钟切换状态,期间有进度显示 这篇…

我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少页面元素数量,提高性能. 假设我们的UWP APP为左右分开两列,左边为ListView显示集合,右边为ListView中选中项的明细页面.左侧ListView会列出每一项的Avatar,共分三种:1.有图像的显示图像.2.没图像有名字显示首字母,3.图像名字都没有,显示两个圈圈.同时在ListVi…

1. 简单的HeaderedContentControl 上周五收到反馈,在一个ContentControl的ControlTemplate中放两个ContentPresenter会出错.出错的例子是我以前博客中HeaderedContentControl的代码,这个控件是UWP最简单的控件之一,它最简化的实现代码如下: public class HeaderedContentControl : ContentControl { public HeaderedContentControl() {…

1.概述 UWP允许开发者通过两种方式创建自定义的控件:UserControl和TemplatedControl(模板化控件).这个主题主要讲述如何创建和理解模板化控件,目标是能理解模板化控件常见的知识点,并且可以创建扩展性良好的模板化控件. 1.1 ControlTemplate UWP的控件有很多属性,使用这些属性可以为控件定制不同的外观,例如将Button的Border变粗,Background改为红色等,但通过这种改造控件,能做到的仍十分有限. 通过为控件赋予新的ControlTempl…

1. TemplatePart TemplatePart(部件)是指ControlTemplate中的命名元素.控件逻辑预期这些部分存在于ControlTemplate中,并且使用protected DependencyObject GetTemplateChild(String childName)获取它们后进行操作. 以AutoSuggestBox为例,它的ControlTemplate结构如下,可以看到AutoSuggestBox由四个TemplatePart组成,每个TemplatePa…

1. 使用TemplateSettings统一外观 TemplateSettings提供一组只读属性,用于在新建ControlTemplate时使用这些约定的属性. 譬如,修改HeaderedContentControl的ControlTemplate以呈现不同的外观,但各个ControlTemplate之间的HeaderedContentControl中的Margin和FontWeight想要保持统一.为了实现这个目的可以创建一个提供默认Margin和FontWeight值的HeaderedC…

原文:[UWP]为什么ContentControl的ContentTemplate里放两个ContentPresenter会出问题(绕口) 1. 简单的HeaderedContentControl 上周五收到反馈,在一个ContentControl的ContentTemplate中放两个ContentPresenter会出错.出错的例子是我以前博客中HeaderedContentControl的代码,这个控件是UWP最简单的控件之一,它最简化的实现代码如下: public class Heade…