数据模板主要作用是定义集合类控件的数据显示外观,和前面几个章节自定义控件的关系不大。数据模板本质上是定义集合的每一个迭代对象的UI,和Vue的v-for或Blazor的foreach类似。数据模板可以直接在控件内部定义(内联数据模板),也可以定义在控件级、页面级或应用级的资源字典中。
一、内联 数据模板的定义和使用
<ContentPage ...... xmlns:model="clr-namespace:MauiApp10.Models"> <VerticalStackLayout> <CollectionView> <!--属性ItemsSource设置数据源,使用泛型Array<T>集合--> <CollectionView.ItemsSource> <x:Array Type="{x:Type model:Employee}"> <model:Employee Id="1" Name="zs" EntryDate="2021-01-01" /> <model:Employee Id="2" Name="ls" EntryDate="2021-05-01" /> <model:Employee Id="3" Name="ww" EntryDate="2021-07-01" /> </x:Array> </CollectionView.ItemsSource> <!--属性ItemTemplate设置数据模板,Item指迭代集合的每一行--> <CollectionView.ItemTemplate> <DataTemplate> <Grid ColumnDefinitions="1*,2*,3*"> <Label Grid.Column="0" HorizontalOptions="Center" Text="{Binding Id}" /> <Label Grid.Column="1" HorizontalOptions="Center" Text="{Binding Name}" /> <Label Grid.Column="2" HorizontalOptions="Center" Text="{Binding EntryDate}" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </VerticalStackLayout> </ContentPage>
二、资源字典 数据模板的定义和使用
<ContentPage ...... xmlns:model="clr-namespace:MauiApp10.Models"> <!--定义页面级资源字典--> <ContentPage.Resources> <ResourceDictionary> <DataTemplate x:Key="employeeTemplate"> <Grid ColumnDefinitions="1*,2*,3*"> <Label Grid.Column="0" HorizontalOptions="Center" Text="{Binding Id}" /> <Label Grid.Column="1" HorizontalOptions="Center" Text="{Binding Name}" /> <Label Grid.Column="2" HorizontalOptions="Center" Text="{Binding EntryDate}" /> </Grid> </DataTemplate> </ResourceDictionary> </ContentPage.Resources> <VerticalStackLayout> <!--直接设置ItemTemplate属性,引用静态资源--> <CollectionView ItemTemplate="{StaticResource employeeTemplate}"> <CollectionView.ItemsSource> <x:Array Type="{x:Type model:Employee}"> <model:Employee Id="1" Name="zs" EntryDate="2021-01-01" /> <model:Employee Id="2" Name="ls" EntryDate="2021-05-01" /> <model:Employee Id="3" Name="ww" EntryDate="2021-07-01" /> </x:Array> </CollectionView.ItemsSource> </CollectionView> </VerticalStackLayout> </ContentPage>
三、控件模板也可以作为数据模板使用
<!--控件模板--> <ContentView ......> <Grid ColumnDefinitions="1*,2*,3*"> <Label Grid.Column="0" HorizontalOptions="Center" Text="{Binding Id}" /> <Label Grid.Column="1" HorizontalOptions="Center" Text="{Binding Name}" /> <Label Grid.Column="2" HorizontalOptions="Center" Text="{Binding EntryDate}" /> </Grid> </ContentView> <!--DataTemplate为控件模板实例化对象--> <CollectionView> <CollectionView.ItemsSource> ...... </CollectionView.ItemsSource> <CollectionView.ItemTemplate> <DataTemplate> <control:EmployeeView /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView>
四、使用DataTemplateSelector(数据模板选择器),根据条件更改Item行样式。类似于在Vue或Blazor的循环中使用的if,但XAML使用for或者if会麻烦非常多,这也是XAML被诟病的地方。以下直接扒文档案例。
1、第一步,定义数据模板选择器类,派生自DataTemplateSelector
public class PersonDataTemplateSelector : DataTemplateSelector { //定义两个数据模板属性 public DataTemplate ValidTemplate { get; set; } public DataTemplate InvalidTemplate { get; set; } //参数item为集合控件的迭代对象,参数container为集合控件对象 protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { //返回值为数据模板 //根据出生日期,使用不同的数据模板 return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate; } }
2、第二步,在资源字典中定义数据模板和数据模板选择器
<ContentPage.Resources> <!--定义数据模板validPersonTemplate--> <DataTemplate x:Key="validPersonTemplate"> ... </DataTemplate> <!--定义数据模板invalidPersonTemplate--> <DataTemplate x:Key="invalidPersonTemplate"> ... </DataTemplate> <!--实例化数据模板选择器对象--> <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector" ValidTemplate="{StaticResource validPersonTemplate}" InvalidTemplate="{StaticResource invalidPersonTemplate}" /> </ContentPage.Resources>
3、第三步,使用数据模板选择器
<CollectionView ItemTemplate="{StaticResource personDataTemplateSelector}" .../>
标签:控件,定义,XAML,3.4,MAUI,DataTemplate,数据,选择器,模板 From: https://www.cnblogs.com/functionMC/p/16955111.html