UWP控件开发：ContentControl模板详解

UWP的用户界面主要由布局容器和内容控件（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></AdaptiveTrigger>
       </ContentControl>
       <ContentControl>
           <Rectangle Fill="Red" Height="50"></Rectangle>
       </ContentControl>
   </StackPanel>

   

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

   下面的示例展示了如何将ScoreModel显示在UI上。

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <Grid.Resources>
           <DataTemplate x:Key="PassTemplate">
               <Border Background="Green">
                   <TextBlock FontSize="20" Foreground="White" HorizontalAlignment="Center" Margin="20" Text="{Binding Score}"></TextBlock>
               </Border>
           </DataTemplate>
       </Grid.Resources>
       <ContentControl ContentTemplate="{StaticResource PassTemplate}">
           <ScoreModel Score="30"></ScoreModel>
       </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的公共属性，并在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 FontSize="20" Foreground="White" HorizontalAlignment="Center" Margin="20" Text="{Binding Score}"></TextBlock>
               </Border>
           </DataTemplate>
           <DataTemplate x:Key="FailTemplate">
               <Border Background="Red">
                   <TextBlock FontSize="20" Foreground="White" HorizontalAlignment="Center" Margin="20" Text="{Binding Score}"></TextBlock>
               </Border>
           </DataTemplate>
           <SimpleDataTemplateSelector FailTemplate="{StaticResource FailTemplate}" PassTemplate="{StaticResource PassTemplate}" x:Key="DataTemplateSelector"></SimpleDataTemplateSelector>
           <Setter Property="ContentTemplateSelector" Value="{StaticResource DataTemplateSelector}"></Setter>
       </StackPanel.Resources>
       <ContentControl>
           <ScoreModel Score="60"></ScoreModel>
       </ContentControl>
       <ContentControl>
           <ScoreModel Score="30"></ScoreModel>
       </ContentControl>
   </StackPanel>

   

4. ContentTransitions：public TransitionCollection ContentTransitions { get; set; }是一个Transition类型的集合，提供Content改变时的过渡动画。

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

   UWP提供了许多优秀的动画效果，适当使用可以提升用户体验。如果没有优秀的UI设计，使用默认的ContentTransitions也是不错的选择。