Fermer

mars 5, 2025

Dictionnaires de ressources dans .net Maui

Dictionnaires de ressources dans .net Maui


Apprenez à utiliser des dictionnaires de ressources pour réutiliser les styles et autres données sur votre application basée sur .NET MAUI.

Tout au long de cet article, vous apprendrez quels sont les dictionnaires de ressources et comment vous pouvez les utiliser pour réutiliser les styles et autres données sur votre application basée sur .NET MAUI. Commençons!

Qu’est-ce qu’un dictionnaire de ressources?

La première chose que vous devez savoir est qu’un dictionnaire de ressources est un référentiel de ressources utilisées par une application .NET MAUI qui peut contenir pratiquement n’importe quel type de ressource. Certaines des ressources les plus courantes stockées dans ces dictionnaires sont:

  • Styles
  • Couleurs
  • Modèles de contrôle
  • Modèles de données
  • Déclencheurs
  • États visuels
  • Convertisseurs
  • Et beaucoup d’autres

En ce qui concerne les dictionnaires de ressources, vous devez savoir que tout élément qui dérive de VisualElement (pages, dispositions et commandes) ainsi que le Application La classe contient un Resources propriété de type ResourceDictionary. C’est dans cette propriété que nous pouvons stocker les ressources que nous utiliserons dans l’application.

Quel est l’avantage d’utiliser des dictionnaires de ressources?

Le principal avantage de l’utilisation de dictionnaires de ressources est que nous pouvons centraliser les ressources que nous devons réutiliser constamment. Par exemple, vous pouvez avoir des exigences d’interface utilisateur pour avoir une marge pour le conteneur principal de toutes les pages de votre application, tailles de police définies, styles pour Entry Contrôles, collections, etc. Vous pouvez même définir des thèmes de conception qui modifient complètement l’apparence de votre application!

Par exemple, au lieu d’avoir des contrôles avec beaucoup de propriétés attribuées comme les suivantes:

<VerticalStackLayout Padding="30,0" Spacing="25">
    <Button
        BackgroundColor="DarkBlue"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="100"
        HorizontalOptions="Center"
        Text="Hello world!"
        TextColor="White"
        WidthRequest="200" />
    <Button
        BackgroundColor="DarkBlue"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="100"
        HorizontalOptions="Center"
        Text="Hello world!"
        TextColor="White"
        WidthRequest="200" />
</VerticalStackLayout>

Vous pouvez avoir un code simplifié qui ressemble à ceci:

<ContentPage.Resources>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="DarkBlue" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="HeightRequest" Value="100" />
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="WidthRequest" Value="200" />
    </Style>
</ContentPage.Resources>

<ScrollView>
    <VerticalStackLayout Padding="30,0" Spacing="25">
        <Button Text="Click Me!" />
        <Button Text="Perform action!" />
    </VerticalStackLayout>
</ScrollView>

Cela rend sans aucun doute le code plus propre et plus lisible. Voyons comment définir ces dictionnaires de ressources.

Définir les dictionnaires de ressources au niveau de la vue

Un dictionnaire de ressources sera toujours défini dans un contrôle Resources propriété. La façon complète de le définir est la suivante:

<YourVisualElement.Resources>
    <ResourceDictionary>
        Resources
    </ResourceDictionary>
</YourVisualElement.Resources>

Vous pouvez également omettre l’utilisation du ResourceDictionary Tag, et simplifiez-le comme suit:

<YourVisualElement.Resources>
    Resources    
</YourVisualElement.Resources>

Cela signifie que nous pouvons déclarer un dictionnaire de ressources directement au sein d’un contrôle Resources propriété. Disons que nous créons une conception pour une carte en utilisant le RadBorder contrôle, ajoutant les propriétés de contrôle dans le dictionnaire de ressources de chaque contrôle:

<Grid RowDefinitions="*,*">
    <telerik:RadBorder x:Name="flatBorder" WidthRequest="350">
        <telerik:RadBorder.Resources>
            <Color x:Key="MainColor">#21004f</Color>
            <Thickness x:Key="Thickness">1</Thickness>
            <CornerRadius x:Key="CornerRadius">0, 8, 8, 0</CornerRadius>
            <Style TargetType="telerik:RadBorder">
                <Setter Property="BorderColor" Value="{StaticResource MainColor}" />
                <Setter Property="BorderThickness" Value="{StaticResource Thickness}" />
                <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}" />
            </Style>
        </telerik:RadBorder.Resources>
        <Grid RowDefinitions=".2*,.6*,.2*">
            <Label Margin="8" Text=".NET MAUI Border Overview">
                <Label.Resources>
                    <Color x:Key="MainColor">#21004f</Color>
                    <Style TargetType="Label">
                        <Setter Property="FontSize" Value="25" />
                        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
                        <Setter Property="HorizontalTextAlignment" Value="Center" />
                    </Style>
                </Label.Resources>
            </Label>
            <Label
                Grid.Row="1"
                Margin="8"
                Text="The Telerik UI for .NET MAUI Border enables you to control the look and feel of the border that wraps around your MAUI views. It provides various border thickness types and corner-side radiuses, which can be used for surrounding labels, images, and other elements.">
                <Label.Resources>
                    <Color x:Key="MainColor">#21004f</Color>
                    <Style TargetType="Label">
                        <Setter Property="FontSize" Value="16" />
                        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
                        <Setter Property="HorizontalTextAlignment" Value="Center" />
                    </Style>
                </Label.Resources>
            </Label>
            <Button Grid.Row="2" Text="Learn More">
                <Button.Resources>
                    <Color x:Key="MainColor">#21004f</Color>
                    <Style TargetType="Button">
                        <Setter Property="FontSize" Value="20" />
                        <Setter Property="TextColor" Value="White" />
                        <Setter Property="Margin" Value="10" />
                    </Style>
                </Button.Resources>
            </Button>
        </Grid>
    </telerik:RadBorder>
</Grid>

Dans le code ci-dessus, vous pouvez voir comment chaque contrôle a un dictionnaire de ressources que nous avons modifié pour ajouter des caractéristiques spécifiques à chaque contrôle, y compris Color, Thickness, CornerRadius et Style types.

Dans le cas du Style Tag, nous voyons que le TargetType la propriété équivaut telerik:RadBorderce qui signifie que ce style n’affectera que les contrôles de ce type, en appliquant les propriétés avec leurs valeurs respectives déclarées dans le Setter Tags.

Lors de l’exécution de l’application avec le code ci-dessus, nous obtenons le résultat suivant:

L'application affichant des styles appliqués aux contrôles à l'aide de dictionnaires de ressources

Déclarer les dictionnaires de ressources au niveau de la disposition

Il est important de noter que les ressources déclarées sous le contrôle ne seront accessibles que par ce contrôle spécifique, c’est pourquoi nous avons dû définir le MainColor Ressource au sein de chacun d’eux, ce qui n’est pas du tout pratique.

Dans ces cas, il est préférable de définir les ressources dans un VisualElement avec une hiérarchie plus élevée – par exemple, au niveau de la disposition des conteneurs comme suit:

<Grid RowDefinitions="*,*">
    <Grid.Resources>
        <Color x:Key="MainColor">#21004f</Color>
        <Thickness x:Key="Thickness">1</Thickness>
        <CornerRadius x:Key="CornerRadius">0, 8, 8, 0</CornerRadius>
        <Style TargetType="telerik:RadBorder">
            <Setter Property="BorderColor" Value="{StaticResource MainColor}" />
            <Setter Property="BorderThickness" Value="{StaticResource Thickness}" />
            <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="25" />
            <Setter Property="TextColor" Value="{StaticResource MainColor}" />
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="16" />
            <Setter Property="TextColor" Value="{StaticResource MainColor}" />
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="Margin" Value="10" />
        </Style>
    </Grid.Resources>
    <telerik:RadBorder x:Name="flatBorder" WidthRequest="350">
        <Grid RowDefinitions=".2*,.6*,.2*">
            <Label Margin="8" Text=".NET MAUI Border Overview" />
            <Label
                Grid.Row="1"
                Margin="8"
                Text="The Telerik UI for .NET MAUI Border enables you to control the look and feel of the border that wraps around your MAUI views. It provides various border thickness types and corner-side radiuses, which can be used for surrounding labels, images, and other elements." />
            <Button Grid.Row="2" Text="Learn More" />
        </Grid>
    </telerik:RadBorder>
</Grid>

Dans le code ci-dessus, nous avons extrait toutes les ressources des commandes pour les placer au niveau de la grille principale, réutilisant MainColor. Bien que le code semble correct en principe, il a le problème qu’il existe deux styles avec un TargetType égal à Label:

<Style TargetType="Label">
    <Setter Property="FontSize" Value="25" />
    <Setter Property="TextColor" Value="{StaticResource MainColor}" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="Label">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="TextColor" Value="{StaticResource MainColor}" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

Cela fait que le compilateur ne sait pas quel style appliquer lorsqu’il trouve un Label contrôle dans le code. Voyons comment résoudre ce problème.

Ajouter des clés aux styles

Lorsqu’un style n’a que le TargetType Propriété pointant vers un type de contrôle spécifique, cela signifie que tous les contrôles appliqueront ce style. Il est très probable que dans une application plus large, vous voudrez avoir plusieurs styles pointant vers le même contrôle. Nous y parviendrons en ajoutant le x:Key Propriété à un style, qui nous permettra de le référencer dans un contrôle.

Commençons par ajouter le x:Key propriété aux styles:

<Style TargetType="Label" x:Key="TitleStyle">
    <Setter Property="FontSize" Value="25" />
    <Setter Property="TextColor" Value="{StaticResource MainColor}" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="Label" x:Key="BodyStyle">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="TextColor" Value="{StaticResource MainColor}" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

Ensuite, pour appliquer un style à un contrôle, vous devez utiliser le Style propriété, indiquant la clé du style à utiliser comme suit:

<Label
    Margin="8"
    Style="{StaticResource TitleStyle}"
    Text=".NET MAUI Border Overview" />
<Label
    Grid.Row="1"
    Margin="8"
    Style="{StaticResource BodyStyle}"
    Text="The Telerik UI for .NET MAUI Border enables you to control the look and feel of the border that wraps around your MAUI views. It provides various border thickness types and corner-side radiuses, which can be used for surrounding labels, images, and other elements." />

Avec cela, bien que deux styles indiquent le même Label Type de contrôle, une affectation explicite est faite dont le style sera utilisé dans chacun d’eux.

Ajout de ressources à la page et au niveau de l’application

Un autre endroit où il est également possible de stocker les ressources est au ContentPage Niveau, ce qui se traduirait par un meilleur endroit car nous séparons la section des vues de la définition des ressources comme suit:

<ContentPage.Resources>
    <Color x:Key="MainColor">#21004f</Color>
    <Thickness x:Key="Thickness">1</Thickness>
    <CornerRadius x:Key="CornerRadius">0, 8, 8, 0</CornerRadius>
    <Style TargetType="telerik:RadBorder">
        <Setter Property="BorderColor" Value="{StaticResource MainColor}" />
        <Setter Property="BorderThickness" Value="{StaticResource Thickness}" />
        <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}" />
    </Style>
    <Style x:Key="TitleStyle" TargetType="Label">
        <Setter Property="FontSize" Value="25" />
        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>
    <Style x:Key="BodyStyle" TargetType="Label">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="20" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="Margin" Value="10" />
    </Style>
</ContentPage.Resources>

<Grid RowDefinitions="*,*">
    <telerik:RadBorder x:Name="flatBorder" WidthRequest="350">
        <Grid RowDefinitions=".2*,.6*,.2*">
            <Label
                Margin="8"
                Style="{StaticResource TitleStyle}"
                Text=".NET MAUI Border Overview" />
            <Label
                Grid.Row="1"
                Margin="8"
                Style="{StaticResource BodyStyle}"
                Text="The Telerik UI for .NET MAUI Border enables you to control the look and feel of the border that wraps around your MAUI views. It provides various border thickness types and corner-side radiuses, which can be used for surrounding labels, images, and other elements." />
            <Button Grid.Row="2" Text="Learn More" />
        </Grid>
    </telerik:RadBorder>
</Grid>

Maintenant, au cas où vous souhaitez pouvoir réutiliser cette ressource sur plusieurs ContentPageS, vous avez un fichier à la racine de votre projet appelé App.xamlque vous pouvez modifier pour ajouter la section Ressources comme suit:

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="MainColor">#21004f</Color>
        <Thickness x:Key="Thickness">1</Thickness>
        <CornerRadius x:Key="CornerRadius">0, 8, 8, 0</CornerRadius>
        <Style TargetType="telerik:RadBorder">
            <Setter Property="BorderColor" Value="{StaticResource MainColor}" />
            <Setter Property="BorderThickness" Value="{StaticResource Thickness}" />
            <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}" />
        </Style>
        <Style x:Key="TitleStyle" TargetType="Label">
            <Setter Property="FontSize" Value="25" />
            <Setter Property="TextColor" Value="{StaticResource MainColor}" />
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>
        <Style x:Key="BodyStyle" TargetType="Label">
            <Setter Property="FontSize" Value="16" />
            <Setter Property="TextColor" Value="{StaticResource MainColor}" />
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="Margin" Value="10" />
        </Style>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

N’oubliez pas d’ajouter toutes les références de contrôle afin que vous n’ayez pas de problèmes avec le code ci-dessus. Maintenant, bien que le code ci-dessus fonctionne sans problème, il fait le App.xaml Le fichier est un peu désordonné, surtout parce que plus vous ajoutez de styles à votre application, plus vous aurez de code XAML ici.

Ce que nous pouvons faire, c’est ajouter un nouveau fichier en cliquant avec le bouton droit sur le Resources | Styles dossier, sélectionnant le .NET MAUI catégorie et enfin sélectionner le .NET MAUI ResourceDictionary (XAML) modèle, comme indiqué ci-dessous:

Le modèle sélectionné dans Visual Studio 2022 pour créer un nouveau dictionnaire de ressources

Dans ce nouveau dictionnaire de ressources, nous ajouterons notre code de styles comme suit:

<ResourceDictionary
    x:Class="DictionariesDemo.Resources.Styles.MyStyles"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">

    <Color x:Key="MainColor">#21004f</Color>
    <Thickness x:Key="Thickness">1</Thickness>
    <CornerRadius x:Key="CornerRadius">0, 8, 8, 0</CornerRadius>
    <Style TargetType="telerik:RadBorder">
        <Setter Property="BorderColor" Value="{StaticResource MainColor}" />
        <Setter Property="BorderThickness" Value="{StaticResource Thickness}" />
        <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}" />
    </Style>
    <Style x:Key="TitleStyle" TargetType="Label">
        <Setter Property="FontSize" Value="25" />
        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>
    <Style x:Key="BodyStyle" TargetType="Label">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="TextColor" Value="{StaticResource MainColor}" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="20" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="Margin" Value="10" />
    </Style>
</ResourceDictionary>

Enfin, dans App.xaml Nous allons ajouter la référence au nouveau dictionnaire de ressources comme suit:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
    <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
    <ResourceDictionary Source="Resources/Styles/MyStyles.xaml" />
</ResourceDictionary.MergedDictionaries>

Cela permet au nouveau dictionnaire de ressources d’être fusionné et les ressources définies à l’intérieur peuvent être utilisées tout au long de l’application.

Conclusion

Tout au long de cet article, vous avez appris quelles sont les dictionnaires de ressources, les types de ressources qu’ils peuvent stocker et comment les définir dans différentes parties d’un projet .net Maui. Il est temps de pratiquer et de tester ces connaissances pour améliorer vos propres projets.

Progrès Telerik UI pour .net Maui La bibliothèque de composants est livrée avec un essai gratuit de 30 jours.

Essayez Telerik UI pour .net Maui

Le meilleur outil 2023 pour ta croissance Instagram !



Source link