Quel Template de modern UI pour WPF ?

Je viens de passer du temps avec Microsoft Template Studio qui installe un Template de modern UI qui est MahApps.Metro pour WPF.

Alors existe t-il d'autres templates ? 

WPF modern UI Frounisseurs

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

Telerik.com

Infragistics/products/WPF

...

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.

Kiranna ModernWPF

Kinnara/ModernWpf

Kinnara/ModernWpf est un travail très intéressant et très important autour des pacakges UI dédiés à WPF avec l'utilisation de Fluent.Ribbon, Dragablz, FluentWPF, MahAppsMetro.

\\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 framework vers .NET 6.0.

MahApps.Metro

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

Github - MahApps/MahApps.Metro

Vous pouvez également utiliser les Templates de MahApps.Metro :
https://github.com/MahApps/MahApps.Metro/wiki/Visual-Studio-Templates

Vous pouvez découvrir ce projet en installant l'extension pour Visual Studio : TemplateStudioForWPF.vsix

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

Je vais continuer de cherche d'autres exemples de Modern UI Template mais déjà je peux 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.

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.





























WPF Template Studio for Visual Studio

Voilà, j'ai installé Visual Studio 2022, je peux installer l'extension Template Studio for WPF et créer quelques templates d'applications WPF pour en apprendre la structure de ce type d'application Microsot .NET :

Template Studio for WPF

A noter que Template Studio existe pour les technologies Microsoft UWP, WPF et WinUI. Ici je me focalise sur WPF.

Voici le GitHub de Template Studio :

GitHub-Microsoft-Template Studio creation of new WinUI 3, WPF, and UWP apps using wizard

Et la page de documentation dédiée à WPF :

Template Studio - getting-started-endusers.md at main

Là on est au cœur du sujet, au cœur de développement des applications modernes avec WPF. Dans ce template le wizard permet de choisir un Design Patterns :

Prism : qui est plus qu'MvvM mais permet de faire de l'IoC de suivre les Design Pattern et de faire de grandes applications modulables et scalables

MVVM Toolkit : The CommunityToolkit.Mvvm package is a modern, fast, and modular MVVM library.

MVVM Basic

MVVM Light Toolkit : by Laurent Bugnion (le fameux Laurent Bugnion mais dont le framework s'éteind un peu avec Visual Studio 2017...

Mais Laurent Bugnion continue d'inspiré la communauté et son travail se retrouve maintenant dans :

GitHub - CommunityToolkit.MvvM - Samples

Avec une belle page d'explication sur le modèle MVVM :

Microsoft Learn - Présentation du kit de ressources MVVM - .NET Community Toolkit

De nombreuses autres possibilités s'offrent à nous pour créer le template de l'application WPF parfaite. C'est une avancée majeur pour les débutants dans l'appréhension de la structure d'une application WPF.

Je dirais c'est pas trop tôt !

Structure du template WPF

Quels sont le contrôles utilisés ? Comment faire évoluer mon Template WPF de base.

On est avec MahMetro :

GitHub - MahApps.Metro: Framework allows developers to cobble together a better UI for their own WPF applications with minimal effort

using MahApps.Metro.Controls;

namespace WpfApplication

  public partial class MainWindow : MetroWindow
 { 
     public MainWindow()
    {
        InitializeComponent();
    }
 }

...

Ma MainWindows est une MetroWindow ...

Template Studio WPF Services - Forced Login

L'instanciation puis l'exécution de ce type d'application WPF créé une erreur car vous devez faire un certains nombre de choses avant de pouvoir exécuter cette application.

Créer un Client ID

Regardez dans la fenêtre "Liste des tâches" ou TODO List de votre Visual Studio. Vous devez entre autre créer un Application client ID : 

Dans votre Portail Azure (et si vous n'en avez pas créer un compte Azure...) vous avez la possibilité de créer un IdentityClientId pour votre application un ID d'application Client :

Azure -> Azure Active Directory -> Inscription d'application -> "+ Nouvelle inscription".

Vous obtenez ainsi un UID (Unique) d'application client que vous reportez dans votre code dans le fichier :

\\Visual Studio 2022\Templates\TemplateStudio\App-0\App1\appsettings.json :

{
  "AppConfig": {
    "userFileName": "User.json",
    "identityClientId": "xxxxxxx-xxxx-xxxx-xxx-xxxxxxxxxxx",
    "identityCacheFileName": ".msalcache.dat",

Voilà vous pouvez maintenant exécuter votre template d'application WPF avec Forced Login.

Project Type - Navigation Pane

C'est une application "moderne" avec un Hamburger Menu, c'est cool mais en exécutant l'application :

Template Studio - Navigation Pane - Hamburger Menu
Template Studio - Navigation Pane - Hamburger Menu

Les Icônes des Items sont toutes les même... Grrr... Je regarde un peu dans la documentation :

Github - Template Studio - navigationpane.md

C'est cool :

Template Studio - Navigation Pane - Hamburger Menu

Voilà on vient de voir, comment démarrer rapidement avec le Template Studio for WPF.

Ce que je vais faire maintenant, c'est regarder pourquoi le Ribbon project avec Fluent Ribbon n'affiche pas les Pages...

En suite, je choisirai un project template idéal sans doute avec Prism et j'essayerai d'ajouter une page.

N'hésitez pas à commenter, à partager...

WPF Samples - Discovering

Allons faire un tour dans les WPF Samples, pour dénicher des exemples pertinents, prendre des notes et faire des remarques sur des points d'intérêt afin de découvrir la structure des applications WPF.NET.

Le meilleur point d'entrée pour les WPF Samples, c'est maintenant dans le GitHub :

Github- Microsoft/WPF-Samples: Repository for WPF related samples

Pour les novices, il faut commencer par faire un tour dans les exemples suivants :

WPF-Samples/Getting Started

Avec un exemple :

WPF-Samples/Getting Started/WalkthroughFirstWPFApp

C'est le projet historique en Visual Studio 2019 .NET Core 3.1, on va le retrouver sous une forme différente, plus aboutie et plus complète dans le projet suivant :

WPF-Samples/Sample Applications/ExpenseIt

En comparant la structures des deux projets :

Comparaison des applications WPF 

A gauche la propriété Command du Button est bindée sur CreateExpenseReportCommand tandis qu'à droite c'est un Event Clic sur du code-behind.

Regardez bien les chemins en haut de cette fenêtre dans le cas de droite vous êtes dans le répertoire Getting Started/WalkthroughFirstWPFApp dans le cas de gauche vous êtes dans le répertoire Sample Applications/ExpenseIt avec une évolution intéressante de ce Sample orienté vers le modèle MvvM.

Sample Applications - ExpensiIt

Cet exemple démontre l'utilisation de RoutedCommand :

MainWindow.xaml

<Button Name="createExpenseReportButton" Style="{StaticResource CommandButton}" Grid.Column="1" Grid.Row="5" Command="local:MainWindow.CreateExpenseReportCommand">

MainWindow.cs

Liste des RoutedUICommand

        #region Commands
        public static RoutedUICommand CreateExpenseReportCommand;
        public static RoutedUICommand ExitCommand;
        public static RoutedUICommand AboutCommand;
        #endregion

namespace System.Windows.Input
{
        class RoutedUICommand : RoutedCommand

Voici donc les trois commandes principales de l'application.

A partir de ces RoutedUICommand sont crées des commandes de Binding qui sont ajoutées dans la Collection des CommandBindings de la façon suivante :

        public MainWindow()
        {
            Initialized += MainWindow_Initialized;
            InitializeComponent();

            // Bind CreateExpenseReportCommand
            var commandBindingCreateExpenseReport = new CommandBinding(CreateExpenseReportCommand);
            commandBindingCreateExpenseReport.Executed += commandBindingCreateExpenseReport_Executed;
            CommandBindings.Add(commandBindingCreateExpenseReport);

Remarques : A quoi sert la EditBoxControlLibrary ? J'ai retiré la référence projet, j'ai nettoyé, cela fonctionne encore ... ?

Sample Applications - CalculatorDemo

Exemple de traitement d'entrées utilisateur avec plein de cliques sur plein de boutons différents. C'est un exemple de comment gérer tous ces boutons.

MyTextBox.cs

A quoi sert de dériver de TextBox ?

namespace CalculatorDemo
{    
     internal sealed class MyTextBox : TextBox
    {
        protected override void OnPreviewGotKeyboardFocus(KeyboardFocusChangedEventArgs e)
        {
            e.Handled = true;
            base.OnPreviewGotKeyboardFocus(e);
        }
    }

Cela permet de créer une TextBox qui ne prendra jamais le focus. Cette TextBox déclare l'event Handled comme pris en compte et laisse le focus à l'objet qui l'avait.

MainWindow.xaml

MyTextBox est déclarée dans MainWindow grâce à la définition :

<Window x:Class="CalculatorDemo.MainWindow"
        xmlns:local="clr-namespace:CalculatorDemo"

Et positionne MyTextBox dans la Grid grâce à l'utilisation du mot clef local :

        <Grid Name="MyGrid" ShowGridLines="False">
            <local:MyTextBox Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="5" Margin="5" x:Name="PaperBox" />
        </Grid>

Sample Applications - DataBindingDemo

Le fameux exemple de Databinding. Il me semble que cet exemple vient de SilverLight ... Oui l'ancêtre de WPF c'est bien SilverLight le premier framework dans lequel Microsoft essaye de passer d'un modèle sur event (code-behind) à un modèle sur les propriété avec INotifyPropertyChanded (comme dans Java et le pattern de l'observer).

MainWindow.xaml

Il s'agit de cette fameuse ListBox dont le propriété ItemSource est bindée sur une ListingDataView qui est une CollectionViewSource.

Lorsque l'utilisateur se promène en cliquant sur les différents Items de la ListBox, en dessous le ContentControl bindé également sur ListingDataView change automatiquement ses valeurs.

  <ListBox Name="Master" AutomationProperties.Name="Items For Sale" Grid.Row="2" Grid.ColumnSpan="3"
                 ItemsSource="{Binding Source={StaticResource ListingDataView}}"

Et en dessous le ContentControl :

  <ContentControl Name="Detail" Grid.Row="3" Grid.ColumnSpan="3"
                        Content="{Binding Source={StaticResource ListingDataView}}"

MainWindow.cs

Le code source :

       private readonly CollectionViewSource _listingDataView;

       public MainWindow()
       {
           InitializeComponent();
           _listingDataView = (CollectionViewSource) (Resources["ListingDataView"]);
        }

Méchant gros bug en cliquant sur une des cases à cocher... Null Exception.

Sample Applications - Editing Examiner Demo

Voici typiquement le genre de Sample (Exemple) qui n'est pas assez documenté à mon avis :

GitHub - WPF-Samples - Sample Applications - EditingExaminerDemo

Je clique sur Exécuter :

WPF Samples - Editing Examiner Demo

D'après la documentation, il s'agit :

Editing Examiner vous permet de regarder en temps réel les modifications effectuées dans un contrôle RichTextBox. Il permet à l'utilisateur de charger ou d'insérer partiellement le langage XAML (Extensible Application Markup Language) dans un document à l'aide de l'analyseur principal ou de l'analyseur d'édition. En outre, il fournit une prise en charge de base pour l'appel de méthodes, ainsi que pour l'obtention et la définition de propriétés. Cet outil est utile pour examiner l'état d'édition d'un document sous différentes perspectives.

Il faut aller dans le code source pour découvrir la structure de ce projet par exemple avec l'explorateur d'Objets pour se rendre compte de sa complexité :

WPF Samples - Editing Examiner Demo
WPF Samples - Editing Examiner Demo

Si vous souhaitez démarrer un projet WPF consistant à éditer du Texte sous différentes formes c'est le projet idéal à connaitre absolument.

Par exemple le me pose une question, que faut-il mettre dans Type Command here!. J'essaye Dir cela semble ne pas fonctionner il me répond

[Parser error: the command line can't be evaluated!]

 A découvrir...

To Be Continued

Il faut dire qu'à force de jouer avec les WPF Samples, j'ai découvert l'extension Visual Studio Community WPF Template dans :

C# .NET: WPF - Développement d'une application moderne

Du coup je suis parti sur ces Templates pour continuer mon exploration de WPF Moderne Application mais les Samples sont une mine d'information d'exemples en WPF que je reviendrai décrire Ici.

N'hésitez pas à liker, à commenter, à partager...

Visual Studio 2022 Community

Je recherche l'environnement de développement idéal pour développer des applications WPF modernes. Avec Visual Studio 2019 Community j'ai trouvé des limitations, je vais donc installer Visual Studio 2022 Community. 

Pour télécharger et installer Visual Studio Community c'est Ici :

Download - Visual Studio 2022 Community

J'ai pu lire quelques pages sur le .NET 6.0 et le .NET 7.0 mais avec Visual Studio 2019, il n'y a pas de possibilité de travailler avec ces frameworks on est limité dans le .NET Core 3.1.

Création de ma première Application WPF Visual Studio 2022 :

Visual Studio 2022 - Frameworks installés
Visual Studio 2022 - Frameworks installés

Me voici donc avec le Framework .NET 6.0. et ma première application WPF. 

Maintenant je souhaite me configurer un environnement de travail professionnel.

Mes options, mes paramètres dans Visual Studio 2022

Vous souhaitez synchroniser les document avec l'Explorateur de solution c'est Ici :

Outils de Dév Logiciel - Visual Studio toujours synchroniser avec le document actif

Export/Import des paramètres Visual Studio, c'est toujours la même chose... Tout n'est pas reporté donc il vous faut configurer votre espace "à la main". 

Visual Studio - Mes paramètres

Vos paramètres sont sauvegarder dans les répertoires :

C:\Users\<YourName>\AppData\Local\Microsoft\VisualStudio\17.0_0691647c\Settings

Pour aller chercher les paramètres de votre dernier environnement Visual Studio c'est Ici :

Visual Studio 2022 - Import/Export Settings
Visual Studio 2022 - Import/Export Settings

Franchement j'ai été surpris, j'ai mis du temps à voir ce bouton "Parcourir" même pensé que l'on ne pouvait pas, j'ai donc essayer de poser dans ce répertoire les paramètres de mon ancien Visual Studio comme vous pouvez le voir dans le fichier Exported-VS13-2023-01-09.vssettings.

Raccourcis clavier Naviguez vers l'arrière

Il est très important de naviguer rapidement, d'être à l'aise avec la recherche de symboles de passer d'une fenêtre à une autre de pouvoir revenir à l'endroit où l'on était... ce que j'aime bien dans Visual Studio Code. 

Je souhaite pouvoir faire "Alt+<-" pour revenir là où j'étais et "Alt+->" pour retourner où j'étais. Il s'agit donc de modifier les raccourcis clavier des bouton suivants :

Alt+<- pour naviguer vers l'arrière
Alt+<- pour naviguer vers l'arrière

Les mots clefs sont "raccourcis clavier" et "naviguer" :

Outils -> Options : Clavier dans la barre de recherche tapez "naviguer". 

Les deux commande qui nous intéressent sont :

Affichage.Naviguerversarriere 

et 

Affichage.Naviguerversavant

Raccourcis clavier pour les commandes de navigation vers l'avant et vers l'arrière
Raccourcis clavier pour les commandes de navigation vers l'avant et vers l'arrière

En suite vous devez :

1 - Surppimer le raccourcis existant
2 - Tapez les touches que vous souhaitez à la place
3 - Assigner

Vérifiez que les raccourcis des commandes sont bien appliqués :

ToolTip indiquant le raccourcis clavier de la commande
ToolTip indiquant le raccourcis clavier de la commande

Voilà vous êtes prêt pour naviguer dans Visual Studio.

Afficher les fenêtres nécessaires 

Pour voir un environnement de travail un peu complet, il faut également afficher les fenêtres qui vont nous permettre de travailler :

Console du Gestionnaire de package toujours dans Affichage -> Autres fenêtre :

Visual Studio - Afficher les fenêtres
Visual Studio - Afficher les fenêtres

Me voilà avec un environnement prêt à travailler :

Visual Studio - Votre environnement de développement configuré
Visual Studio - Votre environnement de développement configuré

Je suis surpris de voir encore une appellation Miscrosoft.NETCore.App mais .NET Core est donc en fait la partie factorisée du .NET Framework, au dessus j'ai :

Microsoft.WindowsDesktop.App.WPF en version 6.0.13. 

Fenêtre - Explorateur d'objets

Une fenêtre que j'affectionne car elle permet de naviguer dans les Objets du Framework dans les Objets des Packages installé pour le Projet dans les Objets que vous avez créés :

Visual Studio - Fenêtre Explorateur d'objets
Visual Studio - Fenêtre Explorateur d'objets

Où l'on voit l'objet INotifyPropertyChanged dans le framework Prism.Wpf...

Visual Studio 2022 Community - Suite

Maintenant, je vais faire deux choses :

1 - Installer WPF Template :

GitHub - Template Studio accelerates the creation of new WinUI 3, WPF, and UWP

2 - Si j'ai de nouvelles commandes ou de nouveaux paramètres à installer, je reviens ici pour compléter la configuration de mon Visual Studio 2022.

Vous pouvez poursuivre avec la découverte de Template Studio dans C#.NET :

C# .NET - WPF Template Studio for Visual Studio

N'hésitez pas à Liker ;-)

Développer des applications pour UWP (Universal Windows Platform)

Je cherche à configurer une machine windows pour développer des applications logicielles avec Visual Studio et UWP.(Universal Windows Platform).

Ce matin dans l'installeur de mon Visual Studio, je coche donc la case pour Modifier l'installation de mon Visual Studio :

Développement pour la plateforme Windows Universelle
Développement pour la plateforme Windows Universelle

Qu'est ce qu'il va falloir que je fasse, sur quel piège vais-je encore tomber pour développer des applications du type UWP ?

Développer pour UWP - Installation

Et me voilà parti pour développer de magnifique application Windows Universelles mais en écrivant cela je me rends compte du paradoxe Universelle et Windows ne devrait pas se trouver dans la même phrase !

Learn - Microsoft - Développer des applications pour la plateforme Windows universelle (UWP)

Au bout de 20 minutes d'installation :

Créer une application UWP avec Visual Studio
Créer une application UWP avec Visual Studio

Je ne pensais pas que l'installeur déciderait tout seul de supprimer .NET Core 3.1. Est ce que cela signifie que l'on ne peut pas développer pour WPF et UWP sur la même machine de Dev ?!

Développer pour UWP - Premier Template

Je créé enfin mon premier Template UWP :

UWP - Création de mon premier Template d'application

Déjà un choix à faire dans les version de Windows cible et version minimale ... Les listes déroulantes montrent une bonne dizaine d'items !

Je clique sur OK :

UWP - Création de mon premier Template d'application
UWP - Création de mon premier Template d'application

Je clique sur le Desinger de la page MainPage.xaml pour voir un peu la tête que ça à :

UWP - Création de mon premier Template d'application
UWP - Création de mon premier Template d'application

Et booouuuummmm !!! Ça recommence, j'en ai marre de ces applications de m...bip !

J'ai une machine configurée pour faire du développement, j'étais en train de développer en C#.NET pour WPF mais non cela ne suffit pas.

UWP - Activer le Mode développeur

Il faut activer le mode Développeur ! Alors, comment activer le Mode Développeur et bien lorsque vous essayez quand même d'exécuter l'application que vous venez de créer dans l'environnement de développement que vous venez d'installer, vous obtenez une belle fenêtre de configuration de votre Windows :

Développement d'application UWP - Activer le mode développeur !
Développement d'application UWP - Activer le mode développeur !

Je tente de cocher la case : "Mode développeur". Et boum !

Développement d'application UWP - Activer le mode développeur !
Développement d'application UWP - Activer le mode développeur !

C'est infernale, on dirait un jouet pour les enfants avec des pop-up de recommandation, des mises en garde, franchement c'est moyen. Il va falloir maintenant en savoir plus sur ce "Mode développeur" nouveau sur les plateformes Windows.

Ai-je le choix ?

Non, alors je clique sur "Oui".

Exécuter ma première application Template Vide

Après avoir coché la case "Mode développeur" je ferme et relance mon Visual Studio qui était planté c'est mieux pour qu'il prenne en compte la case à cocher "Mode développeur". 

Je clique à nouveau sur la vue Design de la page UWP MainPage.xaml et je peux voir le Design de la page qui va s'adapter à toutes les plateformes Windows :

UWP - Mon premier Template d'application vide
UWP - Mon premier Template d'application vide

Je clique sur la petite flèche verte pour lancer l'exécution de ma première application template vide UWP :

UWP - Exécution de ma première application template

Cela fonctionne et s'exécute c'est magnifique !

UWP - Développer une application - Conclusion

Ça fonctionne ! On est mieux qu'en 2018 dans :

C# .NET: Obtenir un environnement de développement Windows 10 - UWP

Où c'était impossible et ce sont les améliorations de Windows 10 et Windows 11 et des frameworks .NET qui permettent maintenant d'installer correctement un environnement de développement UWP.

Mais pour .NET Core 3.1 : Pour l'instant c'est clairement la catastrophe, en installant Universal Windows Platform development le .NET Framework Core 3.1 à disparu, tout simplement, aucune de mes applications WPF ne fonctionnent plus. Mais j'ai bon espoir ... d'y arriver à nouveau ;-)

Je vais maintenant faire deux choses. Regarder dans les Samples UWP pour essayer de compiler/exécuter l'un d'entre eux. Et je vais voir quel SDK Framework réinstaller pour continuer de travailler avec WPF et Visual Studio 2019.

Espace Github des Windows Universal Samples

Je vais regarder les UWP Samples pour essayer de les faire exécuter sur ma plateforme de développement :

Windows-universal-samples/Samples at main · microsoft/Windows-universal-samples

Je télécharge, je dézippe, je cherche un projet à compiler/exécuter :

Universal Windows Platform with Visual Studio 2019 community
Universal Windows Platform with Visual Studio 2019 community

Ok, je cible le framework installé.

Je tente de compiler le projet -> Ok

Je tente d'exécuter le Sample UWP - 3D Printig :

UWP - Échec de la connexion à l'appareil '127.0.0.1' à l'aide de l'authentification universelle.
UWP - Échec de la connexion à l'appareil '127.0.0.1' à l'aide de l'authentification universelle.

Gravité Code Description Projet Fichier Ligne État de la suppression
Erreur DEP6957 : Échec de la connexion à l'appareil '127.0.0.1' à l'aide de l'authentification universelle. Vérifiez que le mode d'authentification distant approprié est spécifié dans les paramètres de débogage du projet. COMException - Aucune connexion n’a pu être établie car l’ordinateur cible l’a expressément refusée. (Exception de HRESULT : 0x8007274D) [0x8007274D] 3DPrinting

Bon ! ...

.NET 6.0 pour développer en WPF avec Visual Studio 2019

Et je vais essayer de passer au .NET 5.0 ou 6.0 ou x.x peu m'importe pour refaire fonctionner mes applications WPF sur ma plateforme de développement Visual Studio 2019.

\Visual Studio 2019\Samples\WPF-Samples\Events\CustomRoutedEvents\CustomRoutedEvents.csproj : error : Impossible d'ouvrir le fichier projet. La version 6.0.405 du SDK .NET nécessite au moins la version 17.0.0 de MSBuild. La dernière version disponible de MSBuild est 16.11.2.50704. Remplacez le SDK .NET spécifié dans global.json par une ancienne version qui nécessite la version de MSBuild actuellement disponible.

Oh bas mince alors !

.NET 6.0 c'est clairement avec Visual Studio 2022 et MSBuild 17.0.0 exit VS 2019 ! 

Pour pouvoir continuer à développer des application WPF avec Visual Studio 2019, il faudra réinstaller le :

.NET Core 3.1

J'espère que cela vous a plu, Have fun!

UWP - Exécutable qui ne s'exécute pas

Vous avez, comme moi trouvé, téléchargé, dézippé, démarré, exécuté un bel exemple d'application UWP le PhotoLab :

Vous avez générez votre application en Release et vous avez un fichier exécutable :

\\Visual Studio 2019\Samples\Windows-appsample-photo-lab-master\PhotoLab\bin\x86\Release\PhotoLab.exe

Mais vous avez un problème avec car quand vous double-cliquez sur l’exécutable, rien ne se passe ! 

Alors, j'ai même tenté d'exécuter cette application sur une bonne vieille plateforme Windows 7 pour obtenir enfin un message :

UWP - Executable non valide - PhotoLab.exe n'est pas une application Win32 valide.
UWP - Executable non valide - PhotoLab.exe n'est pas une application Win32 valide.

Je plus gros du délire, c'est que vous avez une explication dans Microsoft Developer Network :

UWP : Mon .exe ne semble pas marché correctement

Nina Zaekova vous explique avec la plus grande désinvolture qu'un exécutable UWP s'exécute dans une sorte de Sandbox et donc que l'on en peut pas cliquer directement sur un exécutable UWP mais cela ne vous dit pas comment faire.

Formidable, alors comment je livre à mon client ?

C'est complètement idiot de ne pas avoir au moins une DialogBox qui vous prévienne que vous ne pouvez pas exécuter cet exécutable UWP sur une machine Windows.

Et sinon alors comment faire ? Pour Nina Zaekova, la réponse est : démerdez-vous !

Le début de la solution Ici :

Microsoft Learn - Empaquetage d’applications - UWP applications

La suite de la solution pour exécuter votre application UWP sous Windows Ici :

Microsoft Learn -Empaqueter une application de bureau ou UWP dans Visual Studio
Clique-droit sur le projet -> Publier -> Associer l'application au Store..., Convertir le fichier Content Group Map, Créer des packages d'application...

Et vous rentrez dans l'enfer du Microsoft Store, vous pouvez également créer un certificat auto-signé.

Accès au répertoire WindowsApps de votre exécutable UWP

Pour accéder au répertoire d'installation des applications UWP c'est Ici :

Administration Windows - Accédez au répertoire WindowsApps activer le compte Administrateur Windows 11

Et vous pourrez par exemple coller un raccourcis de votre application sur votre bureau.

Don't forget to have fun!

Utiliser UWP ou WPF ?

Oui alors ces derniers temps c'est idiot mais je suis passé totalement à côté de UWP ! Certainement car venant de SilverLight et trouvant WPF si génial, ayant essayé le développement d'applications mobiles avec Xamarin et trouvant cela tellement délirant (à l'époque). 

Je n'imaginais pas devoir me lancer dans un truc comme UWP.

Peut-être également car j'avais écris à l'époque en 2018 :

C# .NET: Obtenir un environnement de développement Windows 10 - UWP

Visual Studio 2017, installation du kit de développement UWP, Quelle grosse daube !

Mais le temps est venu de découvrir cette technologie mature de Microsoft UWP.

WPF vs UWP ? Que faire ?
WPF vs UWP ? Que faire ?

Alors aujourd'hui, le meilleur article sur le sujet WPF vs UWP qu'il reste est très certainement Ici :

[FRENCH] Est-ce la fin de WPF: présent et futur de WPF | Pragmateek

Mais il date de 2014 et sauf qu'il ne parle pas de UWP mais de WinRT ... Il faut dire également que depuis le CodePlex à totalement disparu, remplacé par GitHub.

Tout en bas de l'article pragmateek une réflexion intéressante :

- WinRT : application simple, d’information, jeux, etc
- WPF: développement d’applications scientifiques, etc

Peut-être ...

Je trouve une trace d'une extension du WPF ToolKit dans :

  github - xceedsoftware - wpftoolkit

C'est payant : $469.95

Dans ce projet le WPF Toolkit se trouve sous forme de DLL : WPFToolkit.dll

Un comble non pour de l'opensource, à voir également une autre trace du WPFToolkit :

  github - xceedsoftware - ExtendedWPFToolkitSolution -Src - Xceed.Wpf.Toolkit

Je vais approfondir tout cela ...

Conclusion sur WPF vs UWP

Alors franchement avant de me replonger dans le développement d'applications avec C#.NET, je ne pensais pas me retrouver dans cet état d'indécision où finalement oui mais peut-être que ... C'est toujours la même chose avec les Ingés de Redmonds ... 

Dans : 

C# .NET: WPF - Développement d'une application moderne

Nous avons vu que le framework WPF à bien intégré les concepts de développement par les propriétés INotifyPropertyChange et autres babioles MVVM, MVC, etc 

La meilleure réponse à la question : Pour développer dois-je utiliser UWP ou WPF ? Se trouve Ici :

Learn-microsoft- Q&A - WPF or UWP ?

Question à priori posée le 1 novembre 2022 mais c'est un forum alors c'est beaucoup de blablas, mais là nous avons la réponse de Roy Li MSFT (Microsoft Corporation oui l'acronyme de MSFT c'est Microsoft Corporation ...), on peut donc accorder une certaine véracité à cette réponse :

answered Nov 17, 2022, 9:51 AM by

Roy Li - MSFT

26,031Reputation points

Hello,

Welcome to Microsoft Q&A!

Should I use WPF/ WinUI/UWP or Windows Form?

WPF, UWP and Winforms, all of them can implement the feature that you want. But there is one thing that you need to note, UWP apps are running on sandbox which means it is isolated form the system. There are some limitations when UWP apps try to access system resources like file system, local network and other special capability. At the meantime, WPF and Winforms doesn't have these limitations. Another thing needs to note is that currently, WinUI is replacing UWP. But WinUI is still a young technology, and it will be improved continuously.

If you want to get more modern experience, WinUI will be a choice for you. If you want to use a more mature technology, WPF and Winforms will be a good potion.

Thank you.

Où l'on peut lire clairement que UWP est remplacé par WinUI ... GGGrrrrrr !!!

Pour avoir une vision sur l'ensemble des technos Microsoft .NET c'est ici :

github - Microsoft .NET Home

Mais vous retomberez dans un choix cornélien ... Ma mère ou mon père ? Java ou DotNET ? Windows ou Multi-plateformes ? 

Je ne suis pas ton père ! Débrouille toi ;-)

WPF - Développement d'une application moderne

Windows Presentation Foundation comment développer une application moderne ? Existe t-il encore ces vieilles histoires de Prims, MEF et Unity que sais-je encore modèle MVVM, inversion des containers avec IoC. Que dois-je faire pour démarrer correctement un nouveau développement avec WPF ?

Nous avons vu précédemment que WPF est maintenu sur le framework .NET x.x :

C# .NET: WPF avec .NET Core et .NET Framework

Mais pour obtenir un "canvas" d'application moderne avec WPF, il me manque encore quelques éléments d'architecture.

Éléments de l'architecture WPF

Je tout début de l'architecture WPF (Windows Presentation Foundation) avec Learn Microsoft :

Learn Microsoft - Architecture WPF

System.Object

Objets graphiques, milcore partie dealant avec DirectX au dessus on trouve PresentationCore et PresentationFramework

System.Threading.DispatcherObject

Les objets WPF dérivent de DispatcherObject pour gérer la concurrence et le threading

Deux concepts le Dispatcher et le Thread affinity 

En dérivant de DispatcherObject vous créez un objet STA (Single Thread Affinity)

System.Windows.DependencyObject

Préférer les propriétés plutôt que les méthodes (impératif) ou les event car la propriétés déclaratives permettent de plus facilement spécifier l'intention (nullable).

Permet l'émergence d'un système piloté par les données (Model) pour afficher le contenu dans l'UI d'où INotifyPropertyChange. Ainsi le système est notifié si une propriété est modifiée.

D'où la création du DependencyObject. Cf expando de JavaScript

Et oui, le modèle MVC (Model View Controler) vient de JavaScript.

System.Windows.Media.Visual

Pour dessiner les pixels à l'écran la class Visual est l'arborescence des objets visuels. Conçue pour prévenir l'apparition d'une application qui ne répond pas. WPF utilise un "algorithme de peintre" chaque composant est en charge de son rendu.

System.Windows.UIElement

Layout est un concept clé dans WPF. Deux phases Measure et Arrange.

UIElement introduit la notion de CommandBinding implémente ICommand, pour créer une Grid à la base de toutes les pages d'une application WPF.

System.Windows.FrameworkElement

S’appuie sur le contrat de disposition de base introduit par UIElement et ajoute la notion d’un « emplacement »

disposition pilotées par la propriété telles que HorizontalAlignment, VerticalAlignment et MinWidthMargin.

permet de donner un comportement cohérent à l'intérieur des "layout containers"

expose BeginStoryboard et Storyboard pour les animations 

System.Windows.Controls.Control

Introduit le ControlTemplate, script permettant de créer des éléments enfants avec des liaisons aux propriétés Foreground, Background, Padding

Architecture moderne WPF

Donc on voit que par exemple ICommand que l'on connait bien dans le modèle MVVM de Prism semble maintenant intégré dans le .NET Core : System.Windows.Input.ICommand.

En parcourant les Extensions pour Visual Studio Community 2019, je trouve WAF Project Template que j'installe pour créer un Template d'application. A ma surprise je ne peux utiliser que le .NET Framework 4.7 ...

WPF application moderne - WAF Template
WPF application moderne - WAF Template

Il s'agit du bon vieux modèle MVVM (Model, View, ViewModel). Si vous avez un problème pour exécuter le Template ainsi créé, il faut penser à mettre à jour l'extension :

WAF Template - Mise à jour de l'extension
WAF Template - Mise à jour de l'extension

Et donc pour l'instant, je jette un œil Ici.

C'est immense, avec plus de 200 projets (208 dans le WPF Samples que j'ai téléchargé). 

First WPF Sample

Ce que je recherche, c'est comment architecturer une application moderne en WPF comment enchaîner des pages, des fonctionnalités.

Microsoft - WPF Samples - First WPF app sample

Est un des premiers exemple préconisé. Au delà des explications du README.md, il y a 3 Page dans le même namespace ExpenseIt :

MainWindow.xaml

Est une Navigation NavigationWindow :    

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
    </NavigationWindow>

Dont l'élément Source est initialisé avec la première page à charger.

ExpenseItHome.xaml

Avec un bouton View :

        <!-- View report button -->
        <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource ButtonStyle}">View</Button>

Une fonction Button_Click dans code-behind :

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // View Expense Report
            ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
            this.NavigationService.Navigate(expenseReportPage);
        }

Qui utilise NavigationService pour afficher la page :

ExpenseReportPage.xaml

Dans le constructeur on initialise le DataContext avec l'item choisi par l'utilisateur :

        // Custom constructor to pass expense report data
        public ExpenseReportPage(object data):this()
        {
            // Bind to expense report data.
            this.DataContext = data;
        }

Rien de plus, nous avons fait le tour de l'architecture de navigation entre les pages de l'application ExpenseItIntro.

Cet exemple montre également l'utilisation d'un fichier de Styles.xaml à l'aide d'un ResourceDictionary.MergedDictionaries. 

First WPF Sample Data

Les Data sont dans un XmlDataProvider déclarées dans ExpenseItHome.xaml au sein de Grid.Resources.

    <Grid Margin="10,0,10,10">
        <Grid.Resources>
            <!-- Expense Report Data -->
            <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
                <x:XData>
                   <Expenses xmlns="">

J'ajoute les données d'une Person supplémentaire :

Architecture d'une application WPF avec NavigationService.Navigate
Architecture d'une application WPF avec NavigationService.Navigate

Mais ce que l'on cherche c'est la structuration d'une application facile à faire évoluer donc par exemple avec un menu  qui appelle des pages.

ControlsAndLayout Sample

ControlsAndLaytout est un exemple d'application WPF intéressant parce qu'il montre l'utilisation d'un menu et de page, en fait non, ce ne sont pas des pages mais cet exemple pourrait être utiliser pour un WPF Starter Kit dans le genre de : mabyre/WpfAppCore1

ICommand WPF Samples

J'ai une idée rechercher ICommand dans WPF Samples pour découvrir des samples au plus proche de ce que je souhaite faire.

\Visual Studio 2019\Samples\WPF-Samples\Documents\Fixed Documents\DocumentMerge\MainWindow.cs
\Visual Studio 2019\Samples\WPF-Samples\Sample Applications\CustomComboBox\DropList.cs
\Visual Studio 2019\Samples\WPF-Samples\Tools\BamlReflector\BamlTools\KnownElements.cs

Tient des tools, vous connaissiez le :

WPF - Samples BamlReflector - A test tool for BAML Decompilation

BamlReflector est en soit une application intéressante :

WPF - Samples BamlRefector Application Structure
WPF - Samples BamlRefector Application Structure

Avec un Menu un Treeview un TabControl INotifyPropertyChanged, ObservableCollection donc une structure d'application WPF intéressante.

Il existe aussi :

WPF Samples - LocBaml

intéressant, je prends note du coup je cherche dans les deux autres exemples mais rien de probant.

WPF Samples - MultiPage

Parmi les Samples GettingStarted MultiPage nous montre comment passer d'une page à une autre cette fois on va plus loin avec le positionnement d'une bouton dans la page avec :

<Hyperlink  NavigateUri="Page1.xaml">Go To The Start Page</Hyperlink>

Simple pour naviguer entre les pages .xaml mais on ne se passe pas de Data entre les Pages.

WPF Samples - Conclusions

Après ce parcours rapide des différents exemples de structure d'application WPF nous avons maintenant deux systèmes à notre disposition, l'un qui utilise NavagationService pour passer des Data entre des page, un autre pour simplement naviguer entre pages avec NavigateUri.

Spécifications de mon WPF StarterKit

Je peux maintenant imaginer le développement de mon StarterKit pour développer rapidement en WPF. Je vois à peu près comment tout câbler ;)

Il me faut un Menu pour Quitter proprement et déclencher d'autres commandes.

Un TreeView pour ajouter rapidement une page de démonstration et l'activer.

WPF Template Studio for Visual Studio 2022

Je continue mes recherches sur les Templates d'application modernes pour WPF et je trouve :

GitHub - Microsoft - Template Studio

Cela semble prometteur, en face d'Application Design Pattern je trouve : 

WPF: MVVM Toolkit, Code Behind, and Prism.

Template Studio est une suite d'extensions Visual Studio 2022 qui accélèrent la création de nouvelles applications WinUI 3, WPF et UWP à l'aide d'une expérience basée sur un wizard.

Template Studio for WPF

Des structures d'application que nous connaissons bien mais il faudra installer Visual Studio 2022.