CommunityToolkit Maui - Module SpeechToText

Ce qui est très fort maintenant avec GitHub c'est que vous pouvez suivre en direct les développements de la Community Open Source.

Donc ce matin, je reprends mes développement avec .NET Maui et je me rends compte que dans CommunityToolkit.Maui.Samples que je n'ai pas la page Pages.Essentials.SpeechToTextPage. Cela signifie que je suis sur la branch main mais que des commits ont été réalisés depuis.

Je me promène dans mon Fork en remontant les commits jusqu'à ce je vois apparaître la Page SpeechToTextPage.xaml. Puis je fais un Checkout et là je vois toutes les différences qui ont conduit à la livraison d'un exemple du module SpeechToText dans CommunityToolkit Maui :

Commit SpeechToText #808 (#1127)

Dans les Changes, je vois tout le code que Vladdislav Antonyuk a ajouté pour livrer le module SpeechToText.

Je ne sais pas vous mais moi je trouve cela très instructif ....

Ce que j'aimerais faire, c'est isoler ce développement, le comprendre pour intégrer une page SpeechToText dans mon application :

github - mabyre - MauiAppToolkit

MauiProgram.cs

Commençons par le commencement la création de l'application Maui dans MauiProgram.cs

Utilisation de :

using CommunityToolkit.Maui.Media;

pour l'ajout des deux services : SpeechToText et TextToSpeech

mabyre - MauiAppToolkit at integrate-speech-to-text

On vérifie que l'application fonctionne toujours.





Développement .NET MAUI stabilité de la plateforme de développement

Je développement avec Visual Studio Community 2022 et MAUI le successeur de Xamarin ... Et je vois devant moi la plateforme prendre des initiatives comme ajouter des Using fantaisistes pour compléter le code que je suis en train d'écrire.

Je suis surpris, je trouve cela un peu trop intrusif d'autant que vous ajoutez un using par ci par là mais la plateforme joue aussi beaucoup avec les packages qu'elle installe aussi automatiquement en fonction des projets que vous ouvrez.

Alors tout ceci est-il bien stable ? C'est une question dont je viens d'avoir la réponse.

Voici la réponse à la question, la plateforme de développement Microsoft .NET MAUI est-elle stable ?

La plateforme de développement Microsoft .NET MAUI est-elle stable ?
La plateforme de développement Microsoft .NET MAUI est-elle stable ?

Cela fait déjà un petit moment que je trouve les initiatives de la plateforme ... comment dire ? mal à propos et ce matin voilà ça y est c'est planté !

Ce matin, j'ai bien peur de retomber dans :

L'Enfer du DotNET !

Error dans Xamarin Tools

Pourquoi Xamarin ? Je croyais que l'on en avait plus besoin...

1 - C:\Program Files\dotnet\packs\Microsoft.Android.Sdk.Windows\33.0.46\tools\Xamarin.Android.Aapt2.targets

Une erreur avec Xamarin, alors c'est curieux parce qu'il est stipuler lorsque vous débutez MAUI que c'est le successeur de Xamarin mais qui n'a pas besoin de Xamarin d'ailleurs quand vous installez le Développement .NET MAUI Xamarin est facultatif certainement pour migrer des anciens projets Xamarin.

Xamarin est-il nécessaire à la MAUI Plateforme ?
Xamarin est-il nécessaire à la MAUI Plateforme ?

Une fois de plus je vais trouver la solution mais c'est navrant de constater que ce n'est pas encore sec tout ça. Il y a surement encore des liens trop ténus avec Xamarin et sa foultitude de tools qui ne fonctionnent pas.

Bien sûr je vais vous trouver une solution, stay tude.

Have a nice day! Me I go to the beach!


Découvrir rapidement MSTest et faire du TDD

Alors depuis toujours je fais des Tests, des TU, des TI et même des TV, évidemment ;) Mais après la découverte du Software Craftsmanship et ce nouveau concept de développement logiciel, me voici en train de me remettre à jour sur les Tests.

Pour moi, il n'y a aucune raison de ne pas choisir MSTest V2.

Voici mon projet MSTest de démarrage :

GitHub - dotnet/samples/tree/main/core/getting-started/unit-testing-using-mstest

J'ouvre la solution : unit-testing-using-mstest.sln

En suite, je lance les trois commandes pour installer les packages dans PowerShell :

PS>Install-Package MSTest.TestAdapter
PS>Install-Package MSTest.TestFramework
PS>Install-Package Microsoft.NET.Test.Sdk

Une fois les packages installés, tout se passe dans le menu Test de Visual Studio :

MSTest avec Visual Studio
MSTest avec Visual Studio

Tout se trouve dans la fenêtre suivante :

MSTest exécution dans la fenêtre de Visual Studio
MSTest exécution dans la fenêtre de Visual Studio

En 1 : Je trouve les Annotations et notamment DataRow qui indique simplement que le test sera exécuté avec comme paramètre la valeur -1 puis 0 puis 1.

En 2 : J'exécute tous les tests, ils sont au vert.

Lambdatest - MSTest Framework Tutorial Using .Net Core

Et voilà, c'est parti pour le TDD ! Maintenant, quand je vais concevoir mon soft, je vais d'abord penser aux tests qu'est ce que je voudrais que mon logiciel passe comme tests.

Don't forget to go to the beach!

MAUI - Comment déployer mon application sur les différentes plateformes

Je développe mon application MAUI depuis quelques jours déjà. Je lance son exécution depuis Visual Studio mais j'ai remarqué un exécutable. Je me retrouve avec un EXE sur lequel quand je clique dessus... Rien ! Absolument rien...

Je regarde Ici :

Microsoft Learn - .NET MAUI - Déboggage sur Windows

Et rien le mode développeur était déjà activé sur ma machine ;-)

Pour développer n'oubliez pas ce cocher le "Mode développeur"
Pour développer n'oubliez pas ce cocher le "Mode développeur"

Alors avec MAUI quand je clique sur l'EXE il ne se passe rien.... Je tombe sur un tas de site obscures qui m'explique que l'extension .EXE n'est pas associée au bon fichier.

Microsoft Learn -.NET MAUI - Publish app to a folder for Windows

C'est tout un bazar, comme d'hab ... créer un coffre avec des clefs dans l'Azure Cloud mais cela peut coûter, il vous faut choisir un mode de paiement.

Donc je créé un Certificat ...

Et puis le bazar continue ...

Déployer mon application MAUI
Déployer mon application MAUI

Error :

Impossible de vérifier le certificat d’éditeur de ce package d’application. Contactez votre administrateur système ou le développeur d’applications pour obtenir un nouveau package d’application avec des certificats vérifiés. Le certificat racine et tous les certificats immédiats de la signature dans le package d’application doivent être vérifiés (0x800B010A)

Vous souhaitez aller au bout du déploiement de votre application MAUI ?

J'ai la solution, n'hésitez pas à me contacter ;)

That's All Folks!

Développement avec .NET MAUI (Multi-platform App UI) - Le graal ?

Me voici plongé dans le développement avec la technologie MAUI de Microsoft.NET et pour l'instant tout va bien ma petite application qui ouvre un fichier pour l'afficher, le modifier et le sauvegarder, va très bien, c'est très fun! Je trouve même le moyen de particulariser l'AppIcon.

GitHub - Mabyre - MauiAppToolkit

Jusqu'à ce que je déploie mon application sur mon téléphone Android. Là encore c'est très fun, le lien de débeug entre ma plateforme de Dev (Visual Studio Community 2022) et mon Cellular est parfaite je peux déboguer mon application tournant sur mon Cellular et je step le code depuis mon Visual.

Trop fort.

Mais quand je souhaite sauvegarder mon fichier, plouf ! Rien !

Alors en cherchant un peu, je trouve :

.net MAUI write to external storage - Stack Overflow

Et là je rigole bien, le pauvre, sa question n'intéresse personne et il n'y a pas de réponse à son problème parce que la réponse est trop vaste.

Une partie de la solution se trouve dans le Commit :

GitHub - try to find solution on storage problem - MauiAppToolkit@81339a5

MAUI - File - External Storage

C'est un vrai problème en effet. La difficulté, c'est que le FilePicker ne result pas le chemin réel du fichier Pické. Sur Android, il s'agit d'un chemin fictif menant au cache donc lorsque vous sauvegardez le fichier que vous avez modifié il est dans le cache !

/storage/emulated/0/Android/data/com.companyname.mauiapptoolkit/cache/2203693cc04e0be7f4f024d5f9499e13/92c9d622ed3d489a8a37b988f0c003c1/

Alors comment faire ?

Autre difficulté le FilePicker ne prend pas de Path en paramètre, il va où il veut...

Le début de la solution certainement Ici :

Microsoft Learn - FolderPicker - .NET MAUI Community Toolkit

Alors qu'avons-nous dans CommunityToolkit.Maui.Storage :

CommunityToolkit.Maui.Storage

A comparer avec Microsoft.Maui.Storage :

Microsoft.Maui.Storage

Donc pour ma part j'ai trouvé ce qu'il faut faire. Vous souhaitez en savoir, plus n'hésitez pas à me contacter les réseaux sont là pour ça.

SoDevLog - Prestations

That's All Folks!




C'est quoi .NET MAUI (Multi-platform App UI) ?

La dernière nouveauté des frameworks .NET de Microsoft, c'est maintenant .NET MAUI. Alors allons y démarrons le développement de notre application avec .NET MAUI. Ce qui est vraiment cool maintenant avec Microsoft, c'est que c'est gratuit et open source.

Learn Microsoft - Qu’est-ce que .NET MAUI ?
Learn Microsoft - Qu’est-ce que .NET MAUI ?

.NET MAUI serait-il enfin le Graal ? L'environnement de développement Multiplateforme, un seul code et la possibilité de déployer pour toutes les plateformes, iOS, Android, Windows, Mac, Linux, ...

C'est parti !

Téléchargez Visual Studio 2022, et cochez la case Développement .NET Multi-Platform App UI :

Microsoft .NET MAUI
Microsoft .NET MAUI

Et voilà c'est partie, alors je vois la mise à jour possible de Visual Studio 2022 17.5 vers 17.5.4 avec tout un tas de choses concernant .NET MAUI donc mise à jour de Visual Studio 2022 en version 17.5.4.

Learn Microsoft - Exemples de Codes MAUI

Donne un panel de ce qu'il va falloir débroussailler. 

Je créé mon premier Template d'application, j'ai deux possibilités soit rien, soit Blazor ... Pour l'instant, je choisie rien.

Je dois créer un émulateur Android :

.NET MAUI - Exécution de l'application

Voici toutes les possibilités pour exécuter mon application MAUI des émulateurs des simulateurs cela semble prometteur en tous plus qu'au début de Xamarin où cela ne fonctionnait pas bien ...

Me voilà donc en train d'installer un simulateur Android :

Visual Studio 2022 - Installation du Simulateur Android
Visual Studio 2022 - Installation du Simulateur Android

C'est long ... sur mon AMD Radzen 5 3500U 2.10 GHz.

Au moment de cliquer sur le bouton "Démarrer" :

Hyper-V n'est pas configuré
Hyper-V n'est pas configuré

Il faut activer une nouvelle fonctionnalité de Windows :

Learn Microsoft - Accélération matérielle pour les performances de l’émulateur (HaXM Hyper-V & )

Alors on ne se souvient jamais, puisque les ingés de Redmond changent tout le temps, où se trouve les fonctionnalités de windows, seulement la doc est un peu vieille, moi voici ce que j'ai à la place, j'ai tapé dans  la recherche "fonctionnalités de windows" et voici  :

Fonctionnalités de Windows - Prise en charge de l'accélération Hyper-V
Fonctionnalités de Windows - Prise en charge de l'accélération Hyper-V

Je coche la case et je relance l'exécution de mon application. C'est long, mais au bout de quelques minutes, voici ce que j'obtiens :

Androi Emulator pixel_5

Quelques instants après, mon App MAUI s'exécute et j'obtiens le résultat suivant :

MAUI sur Emulator Android - Hello, World!

Ce n'est que le début, cette expérience ressemble trait pour trait avec celle que l'on a peut avoir avec Xamarin. Maintenant MAUI c'est une refonte et le digne successeur de Xamarin alors espérons que les choses seront un peu plus faciles.

Tutorials and Samples for MAUI

La documentation MAUI sur le GitHub est vraiment très complète, il y a tout pour débuter :

GitHub - MAUI - Samples

(GitHub - MAUI - Samples 6.0 - Fundamentals) transféré dans 7.0 ?

GitHub - MAUI - Samples 7.0 - Tutorials - CreateNetMauiApp

...

Apprentissage

Microsoft Learn - Ressources d’apprentissage pour .NET MAUI

Il faudra très certainement regarder par Ici :

GitHub - CommunityToolkit/Maui - help make your life as a .NET MAUI developer easier

Dotnet architecture en microservice

Si vous souhaitez aller directement à un exemple whaou d'application professionnelle MAUI :

GitHub - dotnet-architecture - eshop-mobile-client: microservices

dotnet architecture MAUI en microservices

Une fois passé l'effet whaou de tout ces émulateurs, simulateurs iOS, Android, etc. et qui sont encore extrêmement lents à l'initialiser et s'exécuter du moins la première fois il faut être patient, mon objectif c'est d'avoir une première application sur mon téléphone.

Déployer sur mon Cellulaire Android

Je voudrais bien déployer mon application sur mon cellulaire... Si j'arrive à ce résultat, je serais déjà bien plus avancé qu'avec le Xamarin de l'époque.

Microsoft Learn - Configurer un appareil Android pour le débogage

Mais je sens que cela va peut être, être une galère ;) donc je configure mon téléphone HUAWEI pour le débogage via USB comme indiqué.

Passez en mode développeur

Sur le Desktop de votre téléphone (Bureau) :

Roue Crantée (Paramètres) -> Système -> A propos du téléphone -> Tapez 7 fois sur le numéro de Build.

Pour passer Développeur sur votre téléphone ... c'est comme ça !

A noter que vous devrez passer en mode développeur sur l'Emulateur Android ...

Publiez votre application

Microsoft Learn - Publier une application .NET MAUI pour Android

Il me semble qu'il va me falloir générer un APK pour Android PacKage.

fandroid - Comment installer un fichier APK sur un smartphone ou une tablette Android ?

Je tente une commande dans PowerShell :

>dotnet build -f net6.0-android

Mais toujours pas d'APK sauf en debug ?

Un lien un peu plus sérieux :

Microsoft Learn - NET MAUI - Utiliser l’interface CLI pour publier pour Android

Pour l'instant, je n'arrive pas encore à refaire la manipe mais à un moment donné, j'ai vu mon appareil HUAWEI apparaître dans la liste des devices disponibles pour une exécution de l'application MAUI de la façon suivante :

Mon Cellulaire connecté par le port USB

Je choisie mon cellulaire pour exécuter l'application, je me retrouve avec une nouvelle icône sur le desktop de mon cellulaire celle de l'application MAUI Calculator, trop fort !

Après moultes essais, il me semble qu'il me faille dans mon Cellulaire, activer d'abord la coche :

Débogage ADB en mode Charger Uniquement

J'active cette coche avant de cocher :

Débogage USB

Alors le cellulaire de demande d'autoriser le débogage USB, je clique sur Ok, à ce moment l'ordinateur sur lequel est connecté mon cellulaire par le câble USB fait le bruit de connexion d'un périphérique USB et me présente une petite boite "systray" :

Exécuter mon application MAUI sur mon Cellulaire
Exécuter mon application MAUI sur mon Cellulaire

Mon Cellulaire apparaît alors dans la liste des appareils sur lesquels je peux lancer l'exécution de mon application MAUI. A la fin de la génération et de l'exécution de l'application, j'ai une nouvelle application sur mon Cellulaire :

Déboguer une application MAUI sur Android

Je retrouve l'application installée sur le Desktop de mon Cellulaire.

Voilà, je suis parti pour créer mon application que je peux charger sur mon Cellulaire.

That's All Folks!

Blend pour Visual Studio 2022

Avec Blazor et Radzen, je trouve des outils RAD que valent-ils ? Mais je trouve cela toujours un peu ... curieux de vouloir se faire plus beau que le roi ? Qui peut aujourd'hui rivaliser en développement logiciel avec Visual Studio, du coup j'ai Blend qui me revient à l'esprit.

Mais que devient Blend ? Existe t-il toujours, Blend était un outil de design graphique d'application WPF tellement complexe que personne n'était capable de l'utiliser... Oui, ça, c'était au début de WPF et de Blend en 2010 ;-) Alors  c'est quoi Blend aujourd'hui ?

Icône Blend

Il est toujours installé avec Visual Studio et lorsque j'exécute Blend, j'ai le furieuse impression d'exécuter Visual Studio :

Blend for Visual Studio 2022
Blend for Visual Studio 2022

Heureusement qu'il y a "Blend" en haut à droite, sinon c'est la même fenêtre que Visual Studio ...

J'ouvre une application Template Blazor que puis-je faire avec Blend ? Rien du coup j'ouvre une application Template WPF. Dans le menu, il y a des tools pour les éditeurs :

Blend for Visual Studio ...

On voit bien des Tools supplémentaire autour de la page en mode design mais à part cela ... 

Du coup, je me rabats vers la documentation :

Microsoft Learn - Visite guidée de la fonctionnalité Blend pour Visual Studio

Bas c'est bien ça : Blend et ajoute des concepteurs visuels pour des tâches avancées telles que les animations et les comportements. Pour obtenir une comparaison entre Blend et Visual Studio, consultez Conception XAML dans Visual Studio et Blend pour Visual Studio.

Blend est bien l'outil indispensable si vous souhaitez réaliser des animations graphiques en XAML. 

Il va falloir que je m'y mette.













Comment savoir qu'elle version du C Sharp (C#) vous utilisez ?

Je suis avec Visual Studio 2022 Community, et je développe une application Blazor alors que je cherche à utiliser une bibliothèque JavaScript depuis mon Blazor je tombe sur une bizarrerie :

Visual Studio vous demande d'utiliser C# 11.0 ou une version ultérieure ?!!
Visual Studio vous demande d'utiliser C# 11.0 ou une version ultérieure ?!!

Mais du coup je voudrais savoir comment installer C# 11.0 ou découvrir comment savoir qu'elle version du C Sharp j'utilise.

La réponse est peu évidente, il faut aller lancer une commande au fin fond de l'install de votre Visual Studio :

>C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\Roslyn\csc.exe /langversion:?

Ce qui me donne le résultat suivant :

Commande pour savoir qu'elle version du CSharp vous utilisez
Commande pour savoir qu'elle version du CSharp vous utilisez

Avec une sourire je découvre que j'utiliser la version du CSharp (C#) 11.0.

Je retourne lire attentivement le message délivré par Visual Studio et je lis "version du langage 11.0 ou ultérieure" !? "ultérieur" me fais sourire. 

Mais maintenant je sais qu'elle version du Langage CSharp (C#) j'utilise.

Venez découvrir comment j'ai corrigé cette erreur : 

La fonctionnalité "littéraux de chaîne brute n'est pas disponible en C# 9.0. Utilisez la version de langage 11.0 ou une version ultérieure.

Dans :

GitHub - mabyre - My BlazingPizza

Have fun!

WPF Modern UI Comparative Architectures

Je cherche à découvrir les structures (ou les architecture) des applications WPF, j'ai découvert plusieurs Templates d'applications WPF avec des Galeries de Composants Graphiques Utilisateurs et je vois beaucoup de code derrière alors à quoi sert-il, pourquoi tout ce code ?

Je zoom sur Wpf.UI du projet :

GitHub WPF-UI Lepo.co

WPF-UI se trouve en package nuget téléchargeable indépendamment : 

NuGet Gallery | WPF-UI 2.0.3

Pour la Librairie WPF-UI utilisée en référence dans le projet :

\Lepoco-WpfUI\src\Wpf.Ui.Gallery\Wpf.Ui.Gallery.csproj

On trouve la structure suivante :

Lepo Wpf.UI - Structure
Lepo Wpf.UI - Structure

La seule dépendance de Wpf.Ui en dehors du framework c'est : System.Drawing.Common

Microsoft Learn - System.Drawing.Common .NET

En essayant de comparer la structure de cette application WPF avec le projet :

GitHub-Kinnara - ModernWpf

Qui lui ne fait aucune référence à System.Drawing.Common...

Je vais utiliser un troisième modèle de comparaison car Kinnara me semble ne pas utiliser les structures nécessaires pour utiliser le modèle MvvM qui est acquis maintenant.

Et la base de tous certainement :

GitHub - MahApps

On ne conçoit pas de développer une application conséquente sans structuration par MvvM, injection des dépendances, ... aussi je me lance dans un premier template :

GitHub-mabyre/WpfAppRibbonTemplateStudio

A partir de TemplateStudio le modèle Ribbon - Prism

Il me semble qu'en démarrant directement un projet à l'aide de TemplateStudio, je passe à côté de nombreuses problématiques, du coup je vais décrire les Samples des projets que j'ai déjà récoltés. Afin d'en découvrir la structure.

A force de me promener dans ces différents projets, je trouve un truc que je crois être cool, pour traiter les icônes dans : 

\\Visual Studio 2022\Samples\Kinnara-ModernWPF\ModernWPF Net6-7\ModernWPF\ModernWpf\IconElement\Symbol.cs

Mais cela va me mener encore plus bas dans l'OS MS... dans le traitement des icônes.

Les projets de Modern UI pour WPF ont tous une grosse librairie associée dont voici une description succincte des dépendances afin de mieux saisir comment elles sont imbriqués dans l'OS MS ou framework :

Fluent.Ribbon

System.Windows.Documents.Adorner

System.Windows.FrameworkElement

System.Windows.DependencyObject

System.Windows.DependencyProperty

System.ComponentModel.INotifyPropertyChanged

System.Windows.Automation.Peers.FrameworkElementAutomationPeer

System.Collections.ObjectModel.ObservableCollection

System.Windows.Controls.ItemsControl

System.Windows.RoutedEventArgs : EventArgs

System.Windows.Data.IValueConverter

System.Windows.Data.IMultiValueConverter

MahApps.Metro

System.Windows.FrameworkElement

Microsoft.Xaml.Behaviors.TriggerAction<T>

Microsoft.Xaml.Behaviors.Behavior<T>

ControlzEx.Behaviors.WindowChromeBehavior

System.Windows.DependencyObject

System.Window.VisualStateManager : DependencyObject 

System.Windows.DependencyProperty

System.Windows.Automation.Peers.FrameworkElementAutomationPeer

System.Windows.Point

System.Windows.Controls.Primitives

System.Windows.FreezableCollection<T>

System.Windows.Controls.Control : FrameworkElement

System.IEquatable<T>

System.Windows.Controls.ContentControl

System.Windows.Controls.HeaderedContentControl : ContentControl

System.Windows.RoutedEventArgs : EventArgs

System.Resources.ResourceManager

System.Windows.Data.IValueConverter

System.Windows.Markup.MarkupExtension

Wpf.Ui Lepo

System.Windows.Input.ICommand

System.Action<T?> 

System.PlatformID

System.Windows.Controls.ContentControl

System.Windows.Clipboard

System.Windows.RoutedEventHandler

System.Windows.RoutedEvent

System.Windows.DependencyProperty

System.Drawing.ToolboxBitmap

System.Windows.Window

System.Windows.Interop.WindowInteropHelper

System.Windows.Data.IValueConverter

System.Windows.Data.IMultiValueConverter

System.Windows.SystemParameters

System.Windows.Point

System.Windows.Media.RenderCapability

System.Runtime.InteropServices

System.Windows.Interop

La partie de la Lib Wpf.Ui concernant l'Interop (interopérabilité) est instructive je vous la conseil

System.Windows.ResourceDictionary

System.ComponentModel

System.Windows.Markup

System.Windows.DynamicResourceExtension

ModernWPF by Kinnara

Cette Librairie modern WPF semble prendre ses racines encore plus loin dans l'OS MS. Voici donc quelques références loin loin dans le framework MS.

Je note ici les dépendances qui ne sont pas dans les autres projets (ou que je n'ai pas trouvé).

System.WeakReference<T> : ISerializable where T : class (allow object to control its own serial/deserial)

System.Resources.ResourceManager gestion de la localization

TypedEventHandler<TSender, TResult>(TSender sender, TResult args)

System.Windows.Freezable : DependencyObject

System.Windows.Media.Geometry

System.Windows.Controls.ContentPresenter : FrameworkElement

System.Windows.CornerRadius : IEquatable<CornerRadius>

...

Dépendances des Librairies Modern UI

C'est un travail fastidieux mais il permet de rendre compte de l'imbrication de ces librairies avec le framework (ou les frameworks .NET Framework 4.6.2 - 4.7 .NET Core 3.1). 

Des trois librairies Wpf.Ui est un peu différentes car elle ne s’appuie que sur le framework .NET 6.0. mais Wpf.Ui descend très profondément dans la tripaille de Windows, avec des objets comme Interop et InterropServices qui sont bas dans l'OS et en redéfinissant par exemple le "Point".

Fluent.Ribbon est la plus simple des trois librairies c'est certainement lié au fait qu'elle ne se préoccupe que de l'objet Ribbon.

On peut constater que les ModernWpfUI ont encore besoin de beaucoup de code pour fonctionner.

WPF Modern Application - Structure

A ce stade, il est important de faire la liste des sujets que l'on va aborder Ici. Car petit à petit en progressant, je me rends compte qu'ils sont nombreux. Les différentes documentation sont pléthoriques.

Donc quels sont les grands sujets concernant l'architecture des applications WPF ? 

Microsoft Learn - Vue d’ensemble des bibliothèques runtime

Cette page nous propose les sujets de structuration de votre application WPF suivants :

Contenu conceptuelPackage NuGet
ConfigurationMicrosoft.Extensions.Configuration
Injection de dépendances    Microsoft.Extensions.DependencyInjection
Globbing de fichiersMicrosoft.Extensions.FileSystemGlobbing
Hôte génériqueMicrosoft.Extensions.Hosting
HTTPMicrosoft.Extensions.Http
LocalisationMicrosoft.Extensions.Localization
LoggingMicrosoft.Extensions.Logging

Voilà déjà une liste des sujets proposés par Microsoft Learn.

Démarrage

Navigation

MVVM

WPF Modern Application - Démarrage & Navigation

Le démarrage d'une application WPF dépend des choix concernant la Navigation entre les Page, Windows ou UserControl.

La Navigation est le premier Sujet d'une application WPF.

Stack Overflow -Window vs Page vs UserControl for WPF navigation ?

Les trois objets de la Navigation sont :

  • Window quand vous souhaitez faire apparaître une nouvelle fenêtre
  • Page qui est à l'intérieur d'une fenêtre plutôt utilisée dans les systèmes à base de Web comme XBAP
  • UserControl qui contient des contrôles créés dynamiquement comme lorsque l'on utilise le pattern MVVM

Avec Prism les ViewModel dérivent de BindableBase 

avec Community.Mvvm ils dérivent de ObservableObject.

Les deux Modèles Prism et Community.Mvvm sont assez différents, il y a bon nombre de lignes de code qui diffèrent.

Fluent.Ribbon - Showcase

App.xaml : StartupUri="TestWindow.xaml"

App.xaml.cs : Gestion des Theme par ControlzEx

Button Click="OpenRibbonWindowColorized_OnClick"

private void OpenRibbonWindowColorized_OnClick(object sender, RoutedEventArgs e)
{
      new RibbonWindowColorized().Show();
}

MahApps.Metro - Demo

App.xaml : StartupUri="MainWindow.xaml"

MainWindow.xaml.cs : 

    public partial class MainWindow : MetroWindow : Window PART_Icon, PART_TitleBar
    {
        public MainWindow()
        {
            _viewModel = new MainWindowViewModel(DialogCoordinator.Instance);
            DataContext = _viewModel;

    public class MainWindowViewModel : ViewModelBase, IDataErrorInfo, IDisposable
    {
            this.Title = "Flyout Binding Test";
            this._dialogCoordinator = dialogCoordinator;
            SampleData.Seed();

Focus sur le bouton du menu : "Show InputDialog"

MahApps.Metro.Samples\MahApps.Metro.Demo\MainWindow.xaml

     <MenuItem Click="ShowInputDialog" Header="Show InputDialog" />

\MahApps.Metro.Samples\MahApps.Metro.Demo\MainWindow.xaml.cs

        private async void ShowInputDialog(object sender, RoutedEventArgs e)
        {
            var result = await this.ShowInputAsync("Hello!", "What is your name?");

            if (result == null) //user pressed cancel
                return;

            await this.ShowMessageAsync("Hello", "Hello " + result + "!");
        }

Vu comment cela est architecturé, on aurait du mal à passer le résultat de ces boites de dialogues dans le ViewModel de la fenêtre principale...

ModernWPF by Kinnara

Rien dans App.xaml.cs, App.xml fait un StartupUri="MainWindow.xaml" et pour la Navigation ils utilisent public partial class NavigationRootPage :

 \ModernWpf.SampleApp\Navigation\NavigationRootPage.xaml.cs

public class partial NavigationRootPage

Wpf.Ui Lepo

Dans Wpf.Ui.Demo.Mvvm l'application démarre grâce à Microsoft.Extensions.Hosting :

\\Lepoco-WpfUI\src\Wpf.Ui.Gallery\App.xaml.cs

https://docs.microsoft.com/dotnet/core/extensions/generic-host
https://docs.microsoft.com/dotnet/core/extensions/dependency-injection
https://docs.microsoft.com/dotnet/core/extensions/configuration
https://docs.microsoft.com/dotnet/core/extensions/logging

Le parti pris de Lepo Wpf.UI est de ne pas utiliser Prism et cela va nous permettre de comparer les différentes architectures.

Là on est au cœur de la structuration ou architecture des applications Microsoft .NET.

Le début de la documentation concernant l'architecture des applications WPF :

Microsoft Learn - Vue d’ensemble des bibliothèques runtime

Avec Prism on a des UserControl avec CommunityToolkit.Mvvm Page

Prism UserControl vs CommunityToolkit.Mvvm Page

La Navigation est le premier sujet Wpf.Ui Lepo propose déjà trois Templates avec des modes de navigation, MS Store, Fluent et Compact...

Curieusement les trois Templates sont tout à fait équivalents aucun avec Prism.

TemplateStudio

La Navigation avec Prims semble plus simple, plus intégrée, le répertoire Services est moins rempli.

Configuration

Microsoft.Extensions.Hosting est remplacé par Prism.IoC.IContainerregistry.

To Be Continued...

Quel Template de modern UI pour WPF ?

Je viens de passer du temps avec Microsoft Template Studio qui installe un Template de modern UI autour de MahApps.Metro pour WPF avec plein d'autres fonctionnalités.

Alors existe t-il d'autres templates de modern UI pour WPF ? 

WPF modern UI Frounisseurs

Dans WPF, comme fournisseurs d'UI moderne et composants graphiques, on retrouve classiquement :

Telerik.com

Infragistics/products/WPF

DevExpress

...

WPF modern UI Gratuits

On va essayer de trouver quelques bons projets de WPF Modern UI. Pour l'instant pas de classement mais une découverte rapide des différentes solutions qui nous sont proposées.

Kiranna ModernWPF

GitHub - Kinnara/ModernWpf

Kinnara/ModernWpf est un travail très intéressant et très important, autour des pacakges UI dédiés à WPF. Il part du framework de base Microsoft.WindowsDesktop.App.WPF pour réaliser une application complète de contrôles utilisateur AutomationPeer.

Un de ses projets utilise (est dépendant de) le package MahApps.Metro mais pas les autres.

Une série de Samples démontrent l'utilisation de Fluent.Ribbon, Dragablz, FluentWPF, MahApps.Metro.

\\Visual Studio 2022\Samples\Kinnara-ModernWPF\ModernWPF Net6-7\ModernWPF\ModernWpf.SampleApp\ModernWpf.SampleApp.csproj

Voici un exemple de la Gallery :

WPF UI - ModernWpf.SampleApp
WPF UI - ModernWpf.SampleApp

Intégration du Package MahMetro :

\\Visual Studio 2022\Samples\Kinnara-ModernWPF\ModernWPF Net6-7\ModernWPF\samples\MahAppsSample\MahAppsSample.csproj

ModernWPF- MahAppsSample
ModernWPF- MahAppsSample

Une véritable mine d'or pour ceux qui souhaitent maîtriser WPF UI la plus part des ressources viennent de MahApps mais pas seulement.

If you need the ModernWpf from Yimeng Wu for .NET 6.0 or .NET 7.0 It's here in Discussion Tab :

GitHub - Kinnara/ModernWpf - Discussion #513 Net 6 and Net 7

Un travail très intéressant d'évolution de la solution vers .NET 6.0 et .NET 7.0 qui donne une idée du travail à effectuer pour migrer une application depuis les anciens frameworks vers .NET 6.0.

MahApps.Metro

C'est le projet utilisé par Microsoft TemplateStudio pour WPF et d'autres ...

Github - MahApps/MahApps.Metro

Pour l'instant, je n'arrive pas encore à exécuter ce projet sur ma plateforme de développement à cause d'une référence au framework 4.7 ... que je ne souhaite pas installer, bref... je prends le code de release :

https://github.com/MahApps/MahApps.Metro/releases 2.4.9, je supprime "net47" dans les propriétés des projets et ça fonctionne : 

MahMapps.Metro elegant WPF UI

Vous pouvez trouver la structure des NuGets MahApps.Metro dans le projet :

https://github.com/MahApps/MahApps.Metro/wiki/Visual-Studio-Templates

Pour démarrer rapidement avec MahApps.Metro c'est ici :

MahApps - Guides Quick-start - Installation

Mais alors vous démarrez tout en bas, avec un NutGet et le Guide pour créer votre première page MetroWindow :

Install Nuget MahApps.Metro
Install Nuget MahApps.Metro for WPF solution

Mais croyez moi il du chemin à faire pour obtenir une application WPF digne de ce nom.

Fluent.Ribbon

C'est le projet de Base a utiliser, si vous souhaitez développer une application WPF autour d'un "Ribbon" un Ribbon est bien plus qu'un ruban, c'est un menu Windows Office Like c'est donc un menu extrêmement efficace pour lancer tout un tas de commandes depuis ce Ribbon.

Github -Fluent.Ribbon.Showcase

Voici l'interface UI du projet Fluent.Ribbon exécutée par Visual Studio 2022 Community :

Fluent.Ribbon WPF UI
Fluent.Ribbon WPF UI

Le problème étant que ce Ribbon est très "Windows Like" aujourd'hui on préférera des menus plus simples.

Mais ce projet est une mine d'or pour les développeurs WPF car il met en oeuvre un nombre incalculable de techniques pour développer une belle UI pratique.

WPF UI Fluent Modern Lepo

WpfUI/lepo

GitHub - lepoco - wpfui

C'est dans la même vaine, un projet très complet avec Extension, Template d'application WPF.

Open source dans le GitHub, respect des licences :

https://github.com/lepoco/wpfui/tree/main/src/Wpf.Ui

Quel model MvvM ? WPF UI Lepoco n'utilise pas Prism c'est le CommunityToolkit.Mvvm

De très intéressants Scripts dans le répertoire :

https://github.com/lepoco/wpfui/tree/main/scripts

Si vous souhaitez exécuter la Solution Wpf.Ui.Demo avec Visual Studio 2022 et .NET 6.0, il vous suffit de supprimer les références aux frameworks ;netcoreapp3.1;net48;net472;net462

Dans le fichier : /Wpf.Ui/Wpf.Ui.csproj :

<TargetFrameworks>net7.0-windows;net6.0-windows;netcoreapp3.1;net48;net472;net462</TargetFrameworks>

Exécution du projet Wpf.Ui.Demo.Mvvm.csproj :

Modern UI WPF Lepoco - Wpf.Ui.Demo.sln
Modern UI WPF Lepoco - Wpf.Ui.Demo.sln

Exécution du projet Wpf.Ui.Gallery.sln :

ModernWPF UI Leco.co Gallery
ModernWPF UI Leco.co Gallery

C'est un projet extrêmement impressionnant avec une quantité de codes source gigantesque pour faire fonctionner tout cela.

J'ai installé l'extension WPF UI :

https://marketplace.visualstudio.com/items?itemName=lepo.wpf-ui

Dans Visual Studio 2022 :

WPF UI lepo.co
WPF UI lepo.co

C'est vraiment très complet, voici la structure du Template d'Application : 

WPF UI Lepo.co
WPF UI Lepo.co

On a vraiment un très beau et très complets Template d'application WPF.

Adonis UI

Adonis UI/Lightweight UI toolkit for WPF

benruehl/adonis-ui: Lightweight UI toolkit for WPF applications offering classic but enhanced windows visuals

Semble prometteur tout en bas de la page une Demo à télécharger.

To Be Continued...

WPF Modern UI - Conclusion

Me voilà avec des tonne de code sources d'exemples pour créer mon application WPF.

Je vais continuer de cherche d'autres exemples de Modern UI Template mais je peux déjà dire que j'ai atteins mon objectif, consolider mes connaissances en développement d'applications WPF modernes. Il y a du chemin de parcouru par les communautés ... depuis silverlight ;-))

Je vais également étudier de plus prêt tout le code fournit avec ces exemples de Modern UI for WPF pour en décrire la structure ou l'architecture Navigation, Configuration, MvvM, etc.

A la découverte de Microsoft Template Studio for WPF

Quels sont les sujets abordés et résolut par le TemplateStudio en WPF ? C'est la question que je vais me poser ce matin.

Je choisi un projet type ribbon prism et WPF, et je me rends compte que le Ribbon ne fonctionne pas, du moins, il est vide. C'est le côté didactique de Template Studio, il faut le remplir selon la page d'aide suivante :

Github - Microsof - TemplateStudio - WPF- ribbon

Mais je me suis fait avoir pas cette page qui implémente le Fluent.Button dans ListDetailsPage.xaml tandis que, ce que l'on souhaite faire, c'est créer un bouton dans le Ribbon qui permette d'afficher la page ListDetailsPage.xaml et les autres pages choisies dans le Wizard du TemplateSutdio.

Il faut donc implanter le Fluent.Button dans ShellWindow.xaml et la ICommand dans ShellViexModel.cs. 

Ce qui donne le résultat suivant :

TemplateStudio for WPF with Ribbon button implemented
TemplateStudio for WPF with Ribbon button implemented

Ceci fait, j'aimerais avoir des icônes pour les boutons des autres pages et je suppose que l'on peut par exemple récupérer les icônes du Template Navigation Pane qui sont dans :

GitHub - MahApps.Metro framework that allows a better UI for their own WPF

Comme indiqué dans :

GitHub - TemplateStudio - WPF - navigationpane

MahApps.Metro est un vaste sujet. On aura remarqué que dans notre Template WPF la ShellWindow est une MetroWindow.

Je cherche maintenant à intégrer des Icones dans mon Ribbon pour afficher les autres images pages que j'ai choisies dans mon wizard de TemplateStudio.

La navigation dans TemplateStudio WPF NavigationPane se fait par un : HamburgerMenu

<controls:HamburgerMenu
    ItemsSource="{Binding MenuItems}"
    ItemCommand="{Binding MenuItemInvokedCommand}"

Dont la propriété ItemSource est bindée sur une magnifique ObservableCollection :

    public ObservableCollection<HamburgerMenuItem> MenuItems { get; } = new ObservableCollection<HamburgerMenuItem>()
    {
        new HamburgerMenuGlyphItem() { Label = Resources.ShellMainPage, Glyph = "\uE8A5", Tag = PageKeys.Main },
        new HamburgerMenuGlyphItem() { Label = Resources.ShellListDetailsPage, Glyph = "\uE90C", Tag = PageKeys.ListDetails },
        new HamburgerMenuGlyphItem() { Label = Resources.ShellContentGridPage, Glyph = "\uE774", Tag = PageKeys.ContentGrid },
        new HamburgerMenuGlyphItem() { Label = Resources.ShellDataGridPage, Glyph = "\uE707", Tag = PageKeys.DataGrid },
    };

On pourrait faire de même pour le modèle ribbon mais ! On a du mal à implanter une iconPacks dans le Fluent:Button d'un Fluent:RibbonGroupBox :

<Fluent:RibbonGroupBox
                        State="Large"
                        MinWidth="150"
                        Header="GroupBox 1">
                        <!--_BRY_ NE MARCHE PAS-->
                        <Fluent:Button
                            Size="Large"
                            Command="{Binding OptionsMenuItemInvokedCommand}">
                            <iconPacks:PackIconControl Kind="{x:Static iconPacks:PackIconMaterialKind.AccessPoint}"
                                   Width="48"
                                   Height="48" />
                        </Fluent:Button>
                    </Fluent:RibbonGroupBox>

Ce la ne fonctionne pas ! Les propriétés de l'objet Fluent:Button ne le permettent pas.

Fluent.Ribbon pour Template Studio 

Allons voir chez Fluent.Ribbon ce que nous avons :

GitHub - Fluent.Ribbon: WPF Ribbon control like in Office

Étonnant ce GitHub, cela fait deux fois que je vois une documentation propre sur un site dédié mais abandonnée tandis que la documentation du projet se poursuit dans le GitHub.

Alors avec Fluent.Ribbon, il on essayé GitHub Pages & Jekyll pour la documentation... 

Fluent.Ribbon.github.io

Moi aussi :

My site with Github Pages & Jekyll | Mabyre’s page

Le problème du ShowCase de Fluent.Ribbon, c'est qu'il faut installer un tas de vieux trucs dont on aura pas besoin :

Sur ma plate forme actuelle Visual Studio 2022 .NET 6.0 :

Installations à effectuer pour travailler avec le ShowCase de Fluent.Ribbon
Installations à effectuer pour travailler avec le ShowCase de Fluent.Ribbon

Sur mon bon vieux Visual Studio 2019 .NET Framework 4.8

Installations à effectuer pour travailler avec le ShowCase de Fluent.Ribbon

Franchement, je vais vous dire, je ne suis pas chaud...

D'autant que la version 10.0 va bientôt sortir :

Github - Milestones - Fluent.Ribbon

Il est urgent d'attendre... la prochaine Mise à jour de Fluent Ribbon pour l'essayer avec le dernier Visual Studio 2022 et le .NET 6.0.

WPF Prism Ribbon TemplateStudio on GitHub

Pour développé un Template Studio Project WPF ayant fait le choix dans le Template Studio Wizard, de la Navigation avec Ribbon, du Framework Prism pour le côté MvvM et plus, avec en plus quelques pages d'essais et des exemples, voici mon projet dans le GitHub :

GitHub - mabyre/WpfAppRibbonTemplateStudio

Nous pourrons ainsi parfaire nos connaissances.

N'hésitez pas à partager et à liker, à venir dans le github mettre une petite étoile.