[UWP]了解模板化控件(2.1):理解ContentControl
2017-03-28 08:44
453 查看
UWP的UI主要由布局容器和内容控件(ContentControl)组成。布局容器是指Grid、StackPanel等继承自Panel,可以拥有多个子元素的类。与此相对,ContentControl则只能包含单个子元素。
在UWP中,Button、CheckBox、ScrollViewer、Frame、ToolTip等都继承自ContentControl,其它控件则不是在ContentTemplate中使用ContentControl,就是被ContentControl使用,可以说ContentControl是UWP中最重要的控件。
ContentControl的定义并不复杂,它主要包含这四个属性:Content,ContentTemplate,ContentTemplateSelector,ContentTransitions。
未继承自UIElement的类型: ContentControl调用这些类的ToString()方法获取文本然后显示。
继承自UIElement的类型: ContentControl直接将它显示在UI上。
下面的示例演示了怎么将ScoreModel显示在UI上。
要使用ContentTemplateSelector,首先实现一个继承DataTemplateSelector的类,并重写
以下的示例演示了SimpleDataTemplateSelector的功能,它通过判断Score是否大于60,从而选择返回PassTemplate或者FailTemplate。PassTemplate和FailTemplate都是SimpleDataTemplateSelector 的public属性,并在XAML中注入到SimpleDataTemplateSelector。
注意:ContentTemplateSelector的缺点是需要创建多个模板,通常同一组数据的模板只有少部分的差别,可以在同一个模板中通过IValueConverter等方式显示不同的格式。
UWP提供了很多优秀的动画效果,适当使用可以给人很好的用户体验。如果没有优秀的UI设计,老老实实用默认的ContentTransitions就不会错。
在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就不会错。
相关文章推荐
- [UWP]了解模板化控件(2.1):理解ContentControl
- [UWP]了解模板化控件(3):实现HeaderedContentControl
- [UWP]了解模板化控件(2):模仿ContentControl
- [UWP]了解模板化控件(3):实现HeaderedContentControl
- [UWP 自定义控件]了解模板化控件(2):模仿ContentControl
- [UWP]了解模板化控件(5.1):TemplatePart vs. VisualState
- [UWP 自定义控件]了解模板化控件(1):基础知识
- [UWP]了解模板化控件(5):VisualState
- [UWP]了解模板化控件(5.2):UserControl vs. TemplatedControl
- [UWP]了解模板化控件(5.2):UserControl vs. TemplatedControl
- [UWP]了解模板化控件(5.1):TemplatePart vs. VisualState
- [UWP]了解模板化控件(6):使用附加属性
- [UWP]了解模板化控件(6):使用附加属性
- [UWP]了解模板化控件(10):原则与技巧
- [UWP]了解模板化控件(5):VisualState
- [UWP]了解模板化控件(7):支持Command
- [UWP]了解模板化控件(7):支持Command
- [UWP]了解模板化控件(2):模仿ContentControl
- [UWP]了解模板化控件(4):TemplatePart
- [UWP]了解模板化控件(4):TemplatePart