1.5-XAML语法基础:资源字典ResourceDictionary

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>
这是个xaml页面,给每行代码加上注释 <Window x:Class="JAFRSAO.JAFRSAO05006.Views.JAFRSAO05006View" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:lib="clr-namespace:JAFCommon.UserControls;assembly=JAFCommon" xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors" xmlns:local="clr-namespace:JAFRSAO.JAFRSAO05006.Views" mc:Ignorable="d" Title="ComCustomSubWindow" Height="650" Width="400" WindowStyle="None" AllowsTransparency="True" VerticalAlignment="Top"> <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/JAFCommon;component/UserControls/Generic.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> </Grid.RowDefinitions> <!-- Header --> <Border x:Name="Header" Background="{x:Static lib:JAFCommonConstants.SOLIDCOLOR_COMMON_BASE}" Height="35" VerticalAlignment="Top" Panel.ZIndex="1"> <TextBlock x:Name="SubWindowTitle" Text="JAFアプリチャット画面" VerticalAlignment="Center" Margin="5,5,5,5" FontSize="{x:Static lib:JAFCommonConstants.FONT12}" FontFamily="{x:Static lib:JAFCommonConstants.COMMON_FONTFAMILY}" Foreground="White" Panel.ZIndex="2"/> </Border> <!-- Close Button --> <Button x:Name="BtnClose" Background="#FCF0FE" Foreground="{x:Static lib:JAFCommonConstants.SOLIDCOLOR_COMMON_BASE}" FontWeight="Black" FontSize="{x:Static lib:JAFCommonConstants.FONT18}" FontFamily="{x:Static lib:JAFCommonConstants.COMMON_FONTFAMILY}" Width="30" Height="30" Panel.ZIndex="10" HorizontalAlignment="Right" Click="CloseButton_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0,2,0,0" Margin="5,0,5,0"> <TextBlock VerticalAlignment="Center">×</TextBlock> </Button> <!-- Footer --> <Border x:Name="Footer" Background="LightGray" Height="34" VerticalAlignment="Top" Panel.ZIndex="1" Margin="0,0,0,0" Grid.Row="2"> <TextBlock x:Name="FooterMessage" Text="" VerticalAlignment="Center" Margin="5,5,5,5" FontSize="{x:Static lib:JAFCommonConstants.FONT11}" FontFamily="MS Gothic" Foreground="Black" Panel.ZIndex="30"/> </Border> <!-- Main Content --> <Grid Grid.Row="1"> <!-- Customer Label --> <lib:JAFCommonTextBlock x:Name="txtblkCustomer" Text="お客様" HorizontalAlignment="Left" Margin="33,6,0,0" VerticalAlignment="Top" Width="54" /> <!-- Customer Name --> <lib:JAFCommonTextBox x:Name="txtCustomerName" HorizontalAlignment="Center" Margin="0,5,0,0" VerticalAlignment="Top" Width="216" Text="{Binding Guest}" Foreground="White" Background="Red" IsReadOnly="True"/> <!-- Conversation Data Grid --> <lib:JAFCommonDataGridView x:Name="txtblkConversation" Margin="10,35,10,96" RowHeight="450" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" ItemsSource="{Binding ConversationDT}" SelectedItem="{Binding SelectedItem}" SelectionChanged="GroupList_SelectionChanged"> <lib:JAFCommonDataGridView.Columns> <DataGridTextColumn Header="会話" Binding="{Binding shosaiCont}" Width="358"/> </lib:JAFCommonDataGridView.Columns> </lib:JAFCommonDataGridView> <!-- Send Text Box --> <lib:JAFCommonTextBox x:Name="txtboxSendText" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="291" Height="54" Background="White" Text="{Binding SendText, UpdateSourceTrigger=PropertyChanged}" TextChanged="SendTextBox_TextChanged" IsEnabled="{Binding IsSendTextEnabled}" MaxLength="200" Foreground="Black"/> <!-- Send Button --> <lib:JAFCommonButton x:Name="btnSend" HorizontalAlignment="Left" Margin="306,0,0,10" VerticalAlignment="Bottom" Height="54" Width="84" Content="送信" Click="BtnSend_Click" IsEnabled="{Binding IsSendEnabled}"/> <!-- Response Button --> <lib:JAFCommonButton x:Name="btnRespond" HorizontalAlignment="Left" Margin="306,0,0,68" VerticalAlignment="Bottom" Height="24" Width="84" Content="対応" Click="BtnRespond_Click" IsEnabled="{Binding IsTaiouEnabled}"/> <!-- Template Button --> <lib:JAFCommonButton x:Name="btnTeikeibun" HorizontalAlignment="Left" Margin="10,0,0,68" Width="291" Content="定型文" Height="24" VerticalAlignment="Bottom" Click="BtnTeikeibun_Click" IsEnabled="{Binding IsTeikeibunEnabled}"/> <!-- Sample Chat Messages (for display purposes) --> <lib:JAFCommonTextBox Margin="74,78,30,0" TextWrapping="Wrap" Text="受付者:2024/10/10 10:10:10 お困りのところ恐縮ですが、現地の写真を送っていただけないでしょうか" VerticalAlignment="Top" Foreground="Black" IsReadOnly="True" Height="70"/> <lib:JAFCommonTextBox HorizontalAlignment="Left" Margin="11,156,0,0" TextWrapping="Wrap" Text="お客様:2024/10/10 10:11:12 写真を送ります" VerticalAlignment="Top" Width="296" Foreground="Black" Height="92" IsReadOnly="True"/> <lib:JAFCommonTextBox Margin="0,253,30,0" TextWrapping="Wrap" Text="受付者:2024/10/10 10:12:10 ありがとうございます。" VerticalAlignment="Top" Foreground="Black" HorizontalAlignment="Right" Width="296" IsReadOnly="True" Height="70"/> <lib:JAFCommonTextBox HorizontalAlignment="Left" Margin="11,385,0,0" TextWrapping="Wrap" Text="お客様:2024/10/10 10:13:12 そうです。別の写真も送りますね。" VerticalAlignment="Top" Width="296" Foreground="Black" Height="91" IsReadOnly="True"/> <lib:JAFCommonTextBox Margin="0,307,30,0" TextWrapping="Wrap" Text="受付者:2024/10/10 10:12:30 写真を拝見いたしましたが、〇×病院の裏でしょうか?" VerticalAlignment="Top" Foreground="Black" HorizontalAlignment="Right" Width="296" IsReadOnly="True" Height="70"/> <!-- Camera Icons --> <lib:JAFCommonTextBlock HorizontalAlignment="Left" Margin="27,193,0,0" TextWrapping="Wrap" Text=" " VerticalAlignment="Top" Width="60" Height="60" MouseLeftButtonUp="CameraIcon_Click"> </lib:JAFCommonTextBlock> <lib:JAFCommonTextBlock HorizontalAlignment="Left" Margin="27,422,0,0" TextWrapping="Wrap" Text=" " VerticalAlignment="Top" Width="60" Height="60" MouseLeftButtonUp="CameraIcon_Click"> </lib:JAFCommonTextBlock> </Grid> </Grid> </Window>
最新发布
09-10
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值