MAUI新生1.5-XAML语法基础：资源字典ResourceDictionary

每个派生自VisualElement或Application的对象，都有一个Resources属性，属性值为Dictionary<string,object>类型的集合对象，这些集合对象可作为资源，提供给元素及其在控件树中的子元素使用。当元素引用资源时，根据键名延着控件树往上匹配。如果控件树中，有多个键名匹配的资源，则使用最先匹配到的资源；如直到根元素Application（App.xaml），都没有找到，则出现XamlParseException异常。理论上，在资源字典中，可以创建任何对象资源，但一般在资源字典，主要创建样式、颜色、转换器、控件模板、数据模板等资源。

 

一、创建和使用资源

1、创建资源。在App.xaml文件中，定义根元素Application的资源。这里定义的资源，所有xaml文件的元素都可以使用。

<?xml version="1.0" encoding="UTF-8" ?>
<Application
    x:Class="MauiApp7.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <!--  引入外部资源字典文件  -->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!--  颜色资源  -->
            <Color x:Key="PrimaryColor">SkyBlue</Color>
            <Color x:Key="SecondColor">SlateBlue</Color>
            <!--  显示样式资源，有键名  -->
            <Style
                x:Key="ButtonStyle"
                ApplyToDerivedTypes="True"
                TargetType="Button">
                <Setter Property="BackgroundColor" Value="Navy" />
                <Setter Property="TextColor" Value="Azure" />
            </Style>
            <!--  隐式样式资源，无键名  -->
            <Style TargetType="Label">
                <Setter Property="BackgroundColor" Value="AliceBlue" />
                <Setter Property="TextColor" Value="DarkBlue" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

2、使用资源。在MainPage页面中，在StackLayout元素上，也定义了一个样式资源，且与Application上定义的样式资源，TargetType相同，键名要相同，按照匹配机制，优先使用StackLayout上的样式资源。

<ContentPage
    x:Class="MauiApp7.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <StackLayout>
        <!--在StackLayout元素上，也创建一个样式资源-->
        <StackLayout.Resources>
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="TextColor" Value="Red" />
            </Style>
        </StackLayout.Resources>
        
        <Label Text="隐式应用无键名的样式资源" />
        <Label Text="应用颜色资源" TextColor="{StaticResource PrimaryColor}" />
        <Button Style="{StaticResource ButtonStyle}" Text="应用有键名的样式资源，相同键名，优先使用StackLayout上的资源" />
        
    </StackLayout>

</ContentPage>

 

 

二、使用独立的资源字典文件

1、创建独立的资源字典文件。在Resources>Styles目录下，创建MyListDataTemplate.xaml文件（新建项选择.NET MAUI ResourceDictionary文件）。

<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <DataTemplate x:Key="PersonDataTemplate">
        <ViewCell>
            <Grid ColumnDefinitions="5*,2*,3*">
                <Label Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Column="1"
                       Text="{Binding Age}"/>
                <Label Grid.Column="2"
                       Text="{Binding Location}"
                       HorizontalTextAlignment="End" />
            </Grid>
        </ViewCell>
    </DataTemplate>
    
</ResourceDictionary>

 

2、使用独立的资源字典文件

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiApp7.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:models="clr-namespace:MauiApp7.Models"
    xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard">

    <!--引入MyListDataTemplate.xaml资源字典文件-->
    <ContentPage.Resources>
        <ResourceDictionary Source="Resources/Styles/MyListDataTemplate.xaml" />
    </ContentPage.Resources>

    <StackLayout>
        <ListView ItemTemplate="{StaticResource EmployeeDataTemplate}">
            <!--数据源的定义，使用了泛型List<T>，在Models文件夹下创建Employee实体类，用于承载数据-->
            <ListView.ItemsSource>
                <scg:List x:TypeArguments="models:Employee">
                    <models:Employee Name="zs" Age="18" Location="101" />
                    <models:Employee Name="ls" Age="28" Location="102" />
                    <models:Employee Name="ww" Age="38" Location="103" />
                </scg:List>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>

</ContentPage>

 

3、合并多个资源字典文件的方式

<ContentPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/MyListDataTemplate.xaml"/>
                <!--这里可以引用更多资源字典文件-->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
</ContentPage.Resources>