Élevez votre .net Maui: Support de thèse maintenant disponible

Apprenez à thème vos applications en quelques minutes avec la nouvelle interface utilisateur Telerik pour .NET Maui Mécanisme de théâtre intégré. Venant chaud avec beaucoup d’échantillons de couleurs et une capacité totale de personnalisation!

Bonjour, bonjour! Pour ceux qui ont lu mes blogs, vous savez que ce n’est pas la première fois que je vais parler du sujet d’aujourd’hui. Pourtant, c’est la première fois que j’en parlerai sur les côtes Maui, mais je n’ai pas peur. Le thème d’aujourd’hui est thème. Les thèmes sont une partie inévitable de l’esthétique de toute application moderne et le soutenir est un must pour améliorer l’interface utilisateur et l’UX.

C’est pourquoi je suis plus que ravi de partager avec vous la plus grande nouvelle du progrès Telerik UI 2024 Q4 version: Telerik UI pour .net Maui Offre maintenant un thème intégré avec des échantillons légers et sombres fantaisistes à explorer et à profiter! Et je sais que je suis votre meilleur choix pour vous aider à commencer, alors ne gaspillons pas une minute et plongeons-nous.

Intro aux thèmes et échantillons de Telerik .net Maui

Si vous connaissez déjà le guide officiel de .net Maui sur la façon de thème une applicationalors vous vous sentirez certainement comme un naturel avec une interface utilisateur de Telerik pour le mécanisme de thème de .net Maui. Comme le guide de Microsoft, nos thèmes représentent pratiquement une collection de styles et de modèles dans les fichiers XAML, qui déterminent l’apparence des composants Telerik .net Maui.

J’ai également mentionné que nos thèmes fournissent de nombreux échantillons de fantaisie qui représentent une variation de couleur d’un thème. Tous les échantillons d’un thème donné utilisent les mêmes polices, tailles et dispositions. D’un autre côté, les couleurs des textes, des arrière-plans et des bordures sont différentes.

Toutes les couleurs d’un échantillon sont consommées à travers Dynamicresource et sont disponibles pour que vous puissiez utiliser dans certaines parties de votre application qui ne sont pas des composants Telerik. Nice, hein? Cela vous aidera sûrement à réaliser un aspect et une sensation cohérents à la plus petite partie de votre application .net Maui.

Assez de théorie. Il est temps pour une pratique.

Comment activer Telerik .net Maui Theming

Si vous avez déjà une application configurée pour utiliser l’interface utilisateur Telerik pour les composants .net Maui, alors Ajout de Telerik Themeing Il ne faudra que quelques pas. Sinon, ne vous inquiétez pas – nous avons des articles sur la façon de le faire pour les deux Visual Studio et Code Visual Studio.

Prêt pour un court guide étape par étape? Je promets que les étapes sont rapides et faciles à suivre.

Tout d’abord, accédez au fichier .csproj et ajoutez ce qui suit:

<PropertyGroup>
    <UseTelerikTheming>true</UseTelerikTheming>
</PropertyGroup>

Après cela, reconstruisez l’application pour générer le Producteur Dossier contenant tous les styles et ressources nécessaires pour les commandes Telerik .NET MAUI.

Le Producteur Le dossier contient l’une des ressources les plus importantes qui doivent être ajoutées au App.xaml Fichier de votre application comme étape suivante – le Producteur Dictionnaire de ressources:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            <local:TelerikTheming />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Enfin, définissez le thème Telerik et l’une de ses variations de couleur à l’intérieur du App.xaml.cs déposer:

var telerikTheming = Application.Current.Resources.MergedDictionaries.OfType<TelerikTheming>().Single();
telerikTheming.Theme = TelerikTheming.Themes.Single(t => t.Theme == "Telerik" && t.Swatch == "Ocean Blue");

Et c’est tout! Notre application a maintenant un thème Telerik avec son swatch bleu océan. Ce qui me rappelle, j’ai oublié de mentionner tous les 8 échantillons prédéfinis pour la lumière et l’obscurité que le thème Telerik .net Maui est livré avec—Principal, Dark principal, Bleu de l’océan, Bleu océan foncé, Violet, Violet sombre, Turquoise et Turquoise sombre.

Au cas où j’ai manqué quelque chose d’autre qui pourrait être important pour vous, assurez-vous de vérifier le documentation en ligne à ce sujet.

Avant de frapper F5, je suggère que nous apportons un scénario simple à notre application et pour gagner du temps. J’ai décidé d’ajouter le UI Telerik pour .net Maui Visual Studio Code Extension et ajouter quelques modèles de page prédéfinis avec les écrans de connexion, enregistrer et réinitialiser les écrans de mot de passe. Cela s’est avéré assez rapide et facile – j’ai juste suivi le Ajouter la page d’échafaudage section.

Bien sûr, je ne pouvais pas m’en empêcher et toucher un peu le frontend pour utiliser les Resources dynamiques du thème et de l’échantillon que j’ai choisi, mais je ne vous inonderai pas avec le code. J’ai également enregistré certaines itinéraires et connecté les points entre eux dans les modèles de vue respectifs:

public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute("login", typeof(TelerikLoginPage));
    Routing.RegisterRoute("register", typeof(TelerikRegisterPage));
    Routing.RegisterRoute("resetpassword", typeof(TelerikResetPasswordPage));
}

public class TelerikLoginPageViewModel : NotifyPropertyChangedBase
{
    // Omitted code here ...

    private async void ExecuteForgotPassword(object obj)
    {
        await Shell.Current.GoToAsync("resetpassword");
    }

    private async void ExecuteSingUp(object obj)
    {
        await Shell.Current.GoToAsync("register");
    }
}

La star du spectacle

Prêt pour un début? Je dis F5 il! ▶ ️

Je sais que certaines personnes préfèrent utiliser uniquement l’obscurité. D’autres – en mode léger. Et il y a aussi des gens qui aiment utiliser certaines applications dans la lumière et d’autres dans l’obscurité. Cette décision est fortement personnelle, mais il est bon d’avoir la capacité de le faire. Je pense personnellement qu’il est indispensable pour votre application de répondre aux changements de thème du système; Cependant, l’une des options les plus utilisées est de pouvoir basculer entre les modes clairs et sombres dans l’application. Suivez-moi jusqu’à la section suivante où je vais vous montrer comment faire les deux avec nos thèmes.

Allumer et éteindre les lumières

Pour cette section, la promesse que je dois tenir est de montrer comment répondre aux changements du système. Et puis comment mettre le contrôle entre les mains de l’utilisateur.

Répondre aux changements de thème du système

Cette partie nécessite une souscription Demande d’hémecage Événement de notre application, qui se fera dans le constructeur. Pour plus de commodité (et pour m’aider pour la partie suivante), j’ai également créé un Thème qui gérera le changement réel du thème.

public static class ThemeHelper
{
    public static void ChangeTheme(string themeName)
    {
        Application.Current!.Resources.MergedDictionaries.OfType<TelerikTheming>().Single()
            .Theme = TelerikTheming.Themes.Single(t => t.FullName == themeName);
    }
}

public App()
{
    InitializeComponent();

    Application.Current.RequestedThemeChanged += (s, e) => ThemeHelper.ChangeTheme(e.RequestedTheme == AppTheme.Dark ? "Telerik Ocean Blue Dark" : "Telerik Ocean Blue");
    ThemeHelper.ChangeTheme(Application.Current.RequestedTheme == AppTheme.Dark ? "Telerik Ocean Blue Dark" : "Telerik Ocean Blue");
}

Voyons le résultat:

Basculer entre clair / sombre dans l’application

C’est la partie où un bouton ou quelque chose doit être ajouté à travers lequel l’utilisateur aura la possibilité de déterminer le mode de l’application lui-même. À cette fin, j’ai choisi d’ajouter un Barbe à outils qui changera son IconimageSource Basé sur le mode. J’ai également créé un commun Thème Blece Tent Page qui s’occupera de cela et servira de cours de base pour toutes mes pages.

Lorsque l’utilisateur clique sur l’élément de la barre d’outils, c’est ce qui se passe:

switchThemeToolbarItem.Clicked += (s, e) =>
{
    Application.Current.UserAppTheme = Application.Current.RequestedTheme == AppTheme.Light ? AppTheme.Dark : AppTheme.Light;
};

Et sur RequestedThemeChanged Comme dans la sous-section précédente, le ChangeTheme Méthode de la ThemeHelper est appelé, et l’icône de l’élément de la barre d’outils est mise à jour:

switchThemeToolbarItem.IconImageSource = new FontImageSource() { FontFamily = "Glyphs", Size = 16, Glyph = Application.Current.RequestedTheme == AppTheme.Dark ? "\ue901" : "\ue900" };

Essayons-nous:

Beau. 💓

Beaucoup plus à explorer

Tous ces écrans de connexion, enregistrement et réinitialisation du mot de passe ne contiennent qu’un petit mais essentiel de blocs de construction d’une application, c’est-à-dire des entrées (représentées par Entrée) et les boutons (représentés par Templatedbutton). Il y a beaucoup d’autres composants qui, je crois, méritent votre attention et sont tous présentés Telerik .net Maui ControlSs Samples App. Choisissez simplement votre préféré dans le Tous les commandes Liste et accédez à son exemple de thème.

Il y a encore une chose que je ne vous ai pas montrée, car je crois que les informations sont déjà beaucoup et vous laisseront explorer à votre rythme – la capacité de personnaliser les thèmes. Ceci est également bien documenté et couvert d’exemples dans le Personnalisation d’un thème article.

Continuer à grandir

Un millier merci à tous ceux qui ont atteint cette partie et ont lu mon blog! J’espère que cela vous a laissé désireux de découvrir la gestion du thème Master dans vos superbes applications .net Maui. Et restez à l’écoute en tant qu’interface utilisateur Telerik intégrée pour le thème .net Maui et ses échantillons sont actuellement en avant-première, il y a donc beaucoup plus à venir dans les prochaines versions. 😊

N’oubliez pas de vérifier également les derniers ajouts au Telerik UI pour .net MauiLa famille en pleine croissance des membres de plus de 60 ans qui est garantie pour vous aider à répondre à toutes les exigences de l’application multiplateforme pour la gestion des données, les performances, l’UX, la conception et bien plus encore.

Si par hasard vous n’utilisez pas déjà la bibliothèque .net Maui, vous pouvez Essayez-le complètement gratuit pendant 30 jours! Donnez-lui un coup de feu et profitez à quel point il est facile et rapide de développer des chefs-d’œuvre .net Maui.

Essayer maintenant