博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[UWP]了解模板化控件(2.1):理解ContentControl
阅读量:6939 次
发布时间:2019-06-27

本文共 2708 字,大约阅读时间需要 9 分钟。

原文:

UWP的UI主要由布局容器和内容控件(ContentControl)组成。布局容器是指Grid、StackPanel等继承自Panel,可以拥有多个子元素的类。与此相对,ContentControl则只能包含单个子元素。

在UWP中,Button、CheckBox、ScrollViewer、Frame、ToolTip等都继承自ContentControl,其它控件则不是在ContentTemplate中使用ContentControl,就是被ContentControl使用,可以说ContentControl是UWP中最重要的控件。

ContentControl的定义并不复杂,它主要包含这四个属性:Content,ContentTemplate,ContentTemplateSelector,ContentTransitions。

1. Content

Content支持任何类型,它的值即ContentControl要显示的对象。可以将Content的类型大致分为两大类:

  • 未继承自UIElement的类型: ContentControl调用这些类的ToString()方法获取文本然后显示。
  • 继承自UIElement的类型: ContentControl直接将它显示在UI上。

img_fe1af05050e598e6f68505bb46317bc8.png

2. ContentTemplate

要将ContentControl的内容按自己的想法显示出来,可以使用ContentTemplate属性public DataTemplate ContentTemplate { get; set; })。DataTemplate是定义如何显示绑定的数据对象的XAML标记。DataTemplate定义的XAML块中元素的DataContext相当于所在ContentControl的Content。

下面的示例演示了怎么将ScoreModel显示在UI上。

img_b53af356d5a6f6a16632eb7423ebe064.png

3. ContentTemplateSelector

如果需要根据Content动态地选择要使用的ContentTemplate,其中一个方法就是 public DataTemplateSelector ContentTemplateSelector { get; set; } 属性。

要使用ContentTemplateSelector,首先实现一个继承DataTemplateSelector的类,并重写protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) 函数,在此函数中返回选中的DataTemplate。

以下的示例演示了SimpleDataTemplateSelector的功能,它通过判断Score是否大于60,从而选择返回PassTemplate或者FailTemplate。PassTemplate和FailTemplate都是SimpleDataTemplateSelector 的public属性,并在XAML中注入到SimpleDataTemplateSelector。

public class SimpleDataTemplateSelector : DataTemplateSelector{    public DataTemplate PassTemplate { get; set; }    public DataTemplate FailTemplate { get; set; }    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)    {        var model = item as ScoreModel;        if (model == null)            return null;        if (model.Score >= 60)            return PassTemplate;        else            return FailTemplate;    }}

img_0467f7611e546ecb1340a0df6f488be7.png

注意:ContentTemplateSelector的缺点是需要创建多个模板,通常同一组数据的模板只有少部分的差别,可以在同一个模板中通过IValueConverter等方式显示不同的格式。

4. ContentTransitions

public TransitionCollection ContentTransitions { get; set; } 是类型为Transition的集合,提供Content改变时的过渡动画。

UWP提供了很多优秀的动画效果,适当使用可以给人很好的用户体验。如果没有优秀的UI设计,老老实实用默认的ContentTransitions就不会错。

转载地址:http://fvsnl.baihongyu.com/

你可能感兴趣的文章
【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础授权权限
查看>>
自己的第一个网页
查看>>
jquery文本框textarea自适应高度
查看>>
三星泰泽Tizen系统挑战Android系统
查看>>
关于TalkHelper Screen Record软件分析
查看>>
真心老了,记性下降太快了,有些东西还是需要用文字记录下来
查看>>
java算法 第七届 蓝桥杯B组(题+答案) 8.四平方和
查看>>
Eclipse(PDT) + Xdebug
查看>>
文本内容超出父元素一行或多行省略号代替
查看>>
冒泡排序法
查看>>
第五次作业
查看>>
创建外部用户_外部表
查看>>
安徒生的童话《冰雪皇后》原本是这样的
查看>>
[Django学习] Django基础(7)_分类统计
查看>>
第四次作业测试代码+018+李滨
查看>>
五花肉
查看>>
利用jquery将页面中所有目标为“#‘的链接改为其他URL
查看>>
缓冲流
查看>>
PMBOK学习笔记一
查看>>
Python 3.5 socket OSError: [Errno 101] Network is unreachable
查看>>