[UWP 自定义控件]了解模板化控件(2.1):理解ContentControl

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上。
<StackPanel>
    <ContentControl>
        <AdaptiveTrigger />
    </ContentControl>
    <ContentControl>
        <Rectangle Height="50"
                   Fill="Red" />
    </ContentControl>
</StackPanel>

2. ContentTemplate

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

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <DataTemplate x:Key="PassTemplate">
            <Border Background="Green">
                <TextBlock Text="{Binding Score}"
                           Foreground="White"
                           FontSize="20"
                           Margin="20"
                           HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
    </Grid.Resources>
    <ContentControl ContentTemplate="{StaticResource PassTemplate}">
        <local:ScoreModel Score="30" />
    </ContentControl>
</Grid>

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;
    }
}
<StackPanel>
    <StackPanel.Resources>
        <DataTemplate x:Key="PassTemplate">
            <Border Background="Green">
                <TextBlock Text="{Binding Score}"
                           Foreground="White"
                           FontSize="20"
                           Margin="20"
                           HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="FailTemplate">
            <Border Background="Red">
                <TextBlock Text="{Binding Score}"
                           Foreground="White"
                           FontSize="20"
                           Margin="20"
                           HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
        <local:SimpleDataTemplateSelector PassTemplate="{StaticResource PassTemplate}"
                                          FailTemplate="{StaticResource FailTemplate}"
                                          x:Key="DataTemplateSelector" />
        <Style TargetType="ContentControl">
            <Setter Property="ContentTemplateSelector"
                    Value="{StaticResource DataTemplateSelector}" />
        </Style>
    </StackPanel.Resources>
    <ContentControl>
        <local:ScoreModel Score="60" />
    </ContentControl>
    <ContentControl>
        <local:ScoreModel Score="30" />
    </ContentControl>
</StackPanel>

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

4. ContentTransitions

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

<ContentControl x:Name="ContentControl">
    <ContentControl.ContentTransitions>
        <TransitionCollection>
            <AddDeleteThemeTransition  />
        </TransitionCollection>
    </ContentControl.ContentTransitions>
</ContentControl>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏耕耘实录

虚拟化迁移,你需要特别注意的几个问题

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢。

24930
来自专栏Debian社区

2016 年 Go 语言使用习惯调查

Go 语言官方博客公布了 2016 年 Go 语言使用调查。在 3,595 名被调查者中,89% 称他们在工作中或工作之外用 Go 编程;63% 称他们的工作是...

8630
来自专栏耕耘实录

Windows10更新后,解决C盘空间占用过大的方法

本人有开启自动更新的习惯,最近几天,极客君的电脑动不动就更新,每次都更新很久,并且更新完之后还要求重启呢!到今天为止,更新总算是消停下来了,打开更新完的系统极客...

40680
来自专栏耕耘实录

巧用OpenSSL完成md2、md4、md5、rmd160、sha、sha1等的验证

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

11030
来自专栏Debian社区

Proxmox VE 5.0 Beta1 发布,基于 Debian 9 Stretch

Proxmox 5.0 Beta 1 “Virtual Environment” 发布了,新版基于 Debian 9 “Stretch”,采用了 Linux 4...

12820
来自专栏耕耘实录

Linux下定时任务(系统任务调度、用户任务调度)crontab使用详解

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

20610
来自专栏耕耘实录

两种方法实现Linux不活动用户登录超时后自动登出

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢。

24320
来自专栏Debian社区

Linux: Debian 9 Stretch可能将不支持Secure Boot

Debian 团队宣布 Debian 9 Stretch 在发布时将不太可能会支持 Secure Boot。Debian 9 的代码在今年 2 月冻结,之后开发...

13120
来自专栏Debian社区

Greg Kroah-Hartman批评Ubuntu发行版

Ubuntu根本就是个祸害开源社区发行版。资本家是“无利不起早”的。“新人用Ubuntu系列是最不明智的选择,因为很难利用到别人的经验。Ubuntu修改了太多东...

25650
来自专栏耕耘实录

Linux修改用户名及相关信息(包括root)

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

63920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励