MAUI的模版

控件模版

作用：定义自定义控件的视觉结构，分离自定义控件的逻辑和UI

这样一个功能控件，可以对应多个视觉结构。

如何使用

1. 创建一个自定义控件

public class CardView : ContentView
{
   // No any visual structure
}

1. 使用控件模板定义控件的UI，可以内联定义，以静态资源的形式

<ContentPage.Resources>
   <ControlTemplate :key="CardViewControlTemplate">
   <Frame BindingContext="{Binding Source={RelativeSource TemplateParent}}"
            BackgroundColor="{Binding CardColor}"
            ></Frame>
   </ControlTemplate>
</ContentPage.Resources>

1. 在使用自定义控件类时，将控件模板应用到该控件。

<StackLayout>
   <controls:CardView CardColor="White"
                     CardTitle="xxx"
                     ControlTemplate="{StaticResource CardViewControlTemplate}" />
</StackLayout>

其他小技巧

1. 使用TemplateBinding 替代模板绑定。
2. 使用Style绑定控件模板
3. 可以再定义一个兼容自定义控件的控件模板，来实现不同视觉样式。
4. ContentPresenter实现类似插槽的功能。
5. 在使用到自定义控件的页面，可以使用OnApplyTemplate()钩子，在模板加载完成后，执行一些动作，例如调用GetTemplateChild来获取模版中命名的组件。

数据模板

作用：自定义数据类型的展示格式，一种典型的使用方法，就是为CollectionView等组件，配置ItemTemplate的显示格式。

使用方法

1. 内联方式，直接在需要使用模版的标签内部例如ItemTemplate中定义

<CollectionView>
   <CollectionView.ItemSource>
   <!-- 定义一些数据源 -->
   </CollectionView.ItemSource>
   <CollectionView.ItemTemplate>			
   <DataTemplate>
      <Grid>
         <Label Text="{Binding Name}" />
      </Grid>
      </DataTemplate>
   </CollectionView.ItemTemplate>
</CollectionView>

1. 从ContentView派生强类型的数据模板。

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               x:Class="DataTemplates.PersonView">
      <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.2*" />
            <ColumnDefinition Width="0.3*" />
         </Grid.ColumnDefinitions>
         <Label Text="{Binding Name}" FontAttributes="Bold" />
         <Label Grid.Column="1" Text="{Binding Age}" />
         <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
      </Grid>
</ContentView>

1. 以资源方式创建数据模板

<ContentPage.Resources>
   <DataTemplate x:Key="personTemplate">
      <Grid>
         ...
      </Grid>
   </DataTemplate>
</ContentPage.Resources>

1. 数据模板选择器，动态的选择不同的模板

public class PersonDataTemplateSelector : DataTemplateSelector
{
      public DataTemplate ValidTemplate { get; set; }
      public DataTemplate InvalidTemplate { get; set; }

      protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
      {
         return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;
      }
}

<ContentPage.Resources>
   <DataTemplate x:Key="template1"></DataTemplate>
   <DataTemplate x:Key="template2"></DataTemplate>
   <local:PersonDataTemplateSelector x:Key="selector" 
                                    ValidTemplate="{}"
                                    InvalidTemplate="{}"/>
</ContentPage.Resources>
<CollectionView ItemTemplate="{StaticRources selector}"/>

区别

数据模板和控件模板是完全不一样的。数据模板是继承自ContentView的，是一种描述数据展示方式的特殊控件，而控件模板是一种静态资源。