Affichage des articles dont le libellé est Prism. Afficher tous les articles
Affichage des articles dont le libellé est Prism. Afficher tous les articles

WPF Modern UI Comparative Architectures

Je cherche à découvrir les structures (ou les architectures) 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...

Visual Studio 2022 Community - Mes options et mes paramètres

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 ;-)

Où en est-on du Design Pattern MVVM en WPF ?

Pour réaliser une application WPF sur le modèle MVVM que dois-je faire aujourd'hui en 2019 ? J'en suis resté à quelque chose de pas très fini ni tout à fait utilisable à mon sens. 

Nous avons chacun un petit bout de MVVM Design Pattern implémenté à sa sauce, je cite pelle mêle, Laurent Bugnion,  Josh Smith (who thanks John Gossman), Prism, Wilfried Woiré, Alexy Shelest ...

J'ai également contribué à l'époque avec le GitHub - WPF Prims Toolkit.

Avec Prims ou pas Prism avec MEF ou pas MEF ...

Pour accéder à la librairie PRISM :

http://prismlibrary.github.io
Cette image vient de PRISM

Alors, je reprends les reines et j'espère bien qu'aujourd'hui, si j'instancie une nouvelle Application Desktop WPF avec mon Visual Studio 2017 Community le framework design pattern MVVM est déjà dans mon Template d'application WPF. Non ?

Malheureusement, je replonge dans les affres d'MVVM avec des sites actuels qui m'expliquent ce qu'est le modèle M-V-VM :

C# Corner - MVVM in WPF

Nipun Tomar présente le Design Pattern MVVM comme si c'était un truc nouveau le "last update" de son article date de Fev 2018 ! Alors qu'en bas (conseil pour connaitre la vraie date d'un article allez voir les commentaires) les commentaires dates de 2013. On est où ? En 2018 ou en 2013 ? 

Bon, j'avoue les explications sont vraiment très bonnes et très complètes sur la comparaison des modèles MPV, MVC et MVVM, si vous ne connaissez pas MVVM ça peut bon à prendre.

Pour le reste, je dois retourné avec Laurent Bugion et la chose principale qui a changée depuis lors c'est la disparition du CodePlex snif ! Laurent Bugnion a migré son projet dans GitHub :

GitHub - Laurent Bugnion - mvvmlight

C'est bien parce qu'il existe encore et malgré tout, cela permet de voir que la communauté est vivante. Mais son framwork est orienté portabilité Xamarin.Android, Xamarin.iOS, Xamarin.Forms, WPF. C'est curieux il cite encore Silverlight :-))

Et à part ça ?

SupInfo - WPF - MVVM : Le Data Binding (lien supprimé devenu payant sans doute)

Ils sont mignons, aucun code, tout à la mimine, depuis zéro, en Oct. 2015 ! Et bien ils ne sont pas en avance.

Et donc, en continuant mes recherches, je retrouve également Prism et son nouveau site ... avec peut-être en roadmap la version 6.0.

http://prismlibrary.github.io/docs/wpf/legacy/Implementing-MVVM.html
Prism Library - Implementing the MVVM Pattern Using the Prism Library for WPF

Voilà, alors faut-il aller plus loin ? Je pense qu'il me faut commencer par installer un Template. C'est tout en bas de la page :

https://marketplace.visualstudio.com/items?itemName=BrianLagunas.PrismTemplatePack
Prism Template Pack

Ce n'est pas un NuGet mais une extension Visual Studio :

Visual Studio -> Outils -> Extensions et mises à jour ...

Je n'ai pas trouvé si facilement, j'ai du aller dans -> En ligne -> Visual Studio Marketplace -> Modèles -> Visual C# -> WPF et dans la barre de recherche je tape "Prism" :

Extension Visual Studio - Prism

Voilà, je vais tester tout ça te revenir vous dire si on peut faire une Application Desktop WPF efficace avec tout ça.

Il y a un nom a retenir c'est Brian Lagunas qui est le "product owner" de Prism 6.0 qui sortira surement bientôt ;) et qui est totalement "Open Source".

Pour faire fonctionner quelques exemples comme :

GitHub - Brian Lagunas - InfragisticsWebinarSimpleMVVMPrism

L'installation du Prism Template Pack n'a pas suffit. J'ai du exécuter la commande suivante dans la Console du Gestionnaire de package :

PM> Install-Package System.Windows.Interactivity.WPF -Version 2.0.20525

Pour la suite je me permets de noter un autre lien :

GitHub - PrismLibrary / Prism

Have fun!

WPF Drag & Drop in Grid Sample

Drag and Drop, ce n'est peut être pas si facile. Bien souvent il manque quelques astuces de bases comme par exemple quand on Drop dans une Grid on aimerait bien savoir dans quelle cellule on a dropé l'objet.

Alors on part de l'exemple MSDN :

Drag and Drop on a user control

MSDN Drag and Drop Sample

On écrit une couleur dans le TextBox et en la dropant  dans un des cercles on change la couleur du cercle, on peut copier un cercle en le dropant en maintenant la touche contrôle appuyée.

C'est intéressant mais il nous manque tout un tas de choses. Ce que j'aimerais faire c'est dropper des objets dans une Grid savoir où il sont dans la Grid et pouvoir commencer réellement à jouer avec mes objets.

Il est par exemple intéressant de jouer avec les propriétés de ma Grid et d'y déplacer les objets :

Grid.SetRow(object,x), Grid.SetColumn, Grid.SetColumnSpan,Grid.SetRowSpan

Je sais maintenant déplacer mes objets dans la Grid mais où sont -ils ?

Grid.GetRow(object,x),  object.GetValue(Grid.RowProperty)

Et voilà que je peux commencer à jouer.

Mais je voudrais aller plus loin et pouvoir dropper mes objects mais qu'ils ne se chevauchent pas. Pouvoir leur donner la taille que je veux en la changeant dans un menu contextuel et toujours en évitant qu'ils ne se chevauchent.

Voilà l'exemple que je vous propose :

WPF Drag&Drop Sample CanDrop and CanResize

Vous trouverez dans le code source suivant, la création dynamique d'objets dans la grille pour détecter où les objets sont droppés. Et tout un tas d'autres astuces vous permettant de réellement bien commencer avec le Drap&Drop en WPF.

Requirements :
WPF .NET 4.0
Visual Studio 2010
Microsoft.Practices.Prism
Microsoft.Practices.Prism.Interactivity
Microsoft.Practices.Prism.UnityExtension
Microsoft.Practices.Prims.Unity

Download and Setup Prism Library 5.0 for WPF

Inutile de préciser que les packages nugets sont difficiles à installer en ce qui concerne Prism et ses différentes version, en constante modification de version de namespace... bref la résolution de vos problèmes passera peut être par l'exécution de la commande : 

PM> Install-Package CommonServiceLocator dans la "Console du gestionnaire de package" 

suivie de 

PM> Install-Package Prism.UnityExtensions -Version 4.1.0

Download Sample

Si vous souhaitez aller plus loin et notamment en fonctionnant avec le modèle MVVM, je vous recommande vivement les articles suivants :

Drag and Drop in WPF
Drag and Drop in WPF - Part II

Ce que j'apprécie vraiment dans ce Sample c'est la mise en place d'un "Adorner", une parure qui à travers  une Property DragAdornerTemplate liée à une DependencyProperty affiche une image en transparence lorsque l'on déplace les objets. Dans le Xaml de la façon suivante :

<ListBox dd:DragDrop.DragAdornerTemplate="{StaticResource PupilDragAdorner}">

Voilà je vous ai tout dis sur mes recherches en matière de Drag & Drop avec WPF. Si vous allez plus loi merci de nous faire part de vos avanceés.

Vous avez apprécié cet article, laissez un commentaire.

Prism InteractionRequest Popup a Window (2)

Dans un post précédent : Prism InteractionRequest Popup a Window (1)on a vu l'utilisation de prism:InteractionRequestTrigger pour déclencher une InteractionRequest permettant de récupérer le ViewModel d'une fenêtre secondaire et à l'intérieur de ce ViewModel une propriété publique SelectedItem. Ainsi dans la fenêtre principale on peut afficher le choix effectué par l'utilisateur dans la fenêtre secondaire :

Récupération du choix utilisateur effectué dans le module Prism HelloWorldModule

Prism Popup a Window comment ça marche ?

La fenêtre Clients implémente l'interface IPopupWindowActionAware de la Class Library Infrastructure cette interface possède deux propriétés :

namespace Infrastructure.InteractionRequests
{
    public interface IPopupWindowActionAware
    {
          Window HostWindow { get; set; }
          Notification HostNotification { get; set; }
    }
}

Et là on est au coeur de cet exemple, l'objet PopupWindowAction dérive de TriggerAction<FrameworkElement>, il utilise des DependencyProperty pour modifier l'apparence de la Popup et override la fonction void Invoke(object parameter) pour construire la Popup et faire à la fin :

// IsModal 
// public static readonly DependencyProperty IsModalProperty
if (this.IsModal)
{
wrapperWindow.ShowDialog();
}
else
{
wrapperWindow.Show();
}

Ainsi le fenêtre secondaire est ou non Modale. Oui je passe rapidement et vous laisse le soin de lire ces sources et d'évaluer leur complexité.

Prism Popup a Window conclusion

Déjà l'on voit qu'une réflexion intense doit être menée à la naissance d'un projet WPF Prism afin de décrire le comportement des différents modules et de leurs interactions. Cette réflexion (ou conception) donne naissance au projet de Class Library Infrastructure qui s'occupe du comportement MVVM des objets utilisés et interagissants dans les différents modules.

Mais ce n'est pas nouveau, il vaut mieux toujours, passer un peu de temps en conception afin d'être certain que l'architecture choisie répondre aux besoins que de se jeter à pisser du code.

Prism InteractionRequest Popup a Window (1)

Etude des sources de Damian Cherubini trouvées dans son SkyDrive et son exemple de PopupWindowsAction Sample.

Les objets mis en oeuvre sont :
Prism.UnityExtensionsPrism.UnityBootstrapper
<i:Interaction.Trigger
<prism:InteractionRequestTrigger
Prism.Interactivity.InteractionRequest
Prism.Commands.DelegateCommand
Prism.Events.EventAggregator

Architecture de du projet PopupWindowAction Sample

Un projet Windows Application "HelloWorld" utilise Prism et Unity pour charger le module "HelloWorldModule" :

namespace HelloWorld
{
    public class Bootstrapper : UnityBootstrapper
    {
        protected override void ConfigureModuleCatalog()
        {
            base.ConfigureModuleCatalog();

            ModuleCatalog moduleCatalog = (ModuleCatalog)this.ModuleCatalog;
            moduleCatalog.AddModule(typeof(HelloWorldModule.HelloWorldModule));
        }    

Le module HelloWorldModule utilise un projet Class Librairy "Infrastructure" qui propose une interface IRegionManagerAware et un objet PopupWindowAction qui vont permettre dans les Views du HelloWorldModule de popuper des Window de la façon suivante :

<UserControl x:Class="HelloWorldModule.Views.HelloWorldView"

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:inf_int="clr-namespace:Infrastructure.InteractionRequests;assembly=Infrastructure"
    xmlns:local="clr-namespace:HelloWorldModule.Views"
   ...>
<i:Interaction.Triggers>
        <prism:InteractionRequestTrigger SourceObject="{Binding SelectClientRequest, Mode=OneWay}">
            <inf_int:PopupWindowAction>
                <inf_int:PopupWindowAction.WindowContent>
                    <local:SelectClientView />
                </inf_int:PopupWindowAction.WindowContent>
            </inf_int:PopupWindowAction>
        </prism:InteractionRequestTrigger>
</i:Interaction.Triggers>

Des fenêtres secondaires vont permettre à l'utilisateur de choisir une série d'actions dont le résultat sera afficher dans la fenêtre principale : HelloWorldView.xaml.

PopupWindowAction Sample Prism InteractionRequest

PopupWindowAction Sample Exécution

Ici je vais focusser sur le dernier exemple de popupwindow dont la propriété SourceObject est bindée sur SelectClientRequest.

Une fois les Interaction.Trigger correctement configurées, il faut encore un bouton dont la propriété Command est bindée sur RaiseSelectClient :

<Button Margin="5" Content="Raise Select Client View" Command="{Binding RaiseSelectClient}" />

Le résultat sera afficher dans TextBlock dont la propriété Text est Bindée sur la propriété Result du ViewModel :

<TextBlock Margin="5" FontWeight="Bold" Foreground="DarkRed" Text="{Binding Result}"/>

On obtient ainsi à l'exécution de la fenêtre principal :
\\PopupWindowActionSample\HelloWorldModule\Views\HelloWorldView.xaml

Fenêtre principale de PopupWindowAction Sample
Et lorsque l'on clique sur le bouton "Raise Select Client View", on obtient la fenêtre cliente suivante  :

Client Window View
En sélectionnant "John Doe" et en cliquant sur "OK" la fenêtre principale récupère le choix utilisateur et l'on obtient le résultat suivant dans la fenêtre principal :
PopupWindowAction Sample après un choix utilisateur
On a donc bien un allé et retour d'une information, d'un choix utilisateur effectuer dans une PopupWindow et que l'on récupère pour l'afficher dans le Module Principal.

PopupWindowAction comment ça marche ?

D'une part, la propriété SourceObject (EventTriggerBase.SourceObject) de l'InteractionRequestTrigger est bindée sur la commande SelectClientRequest dans la View et dans le ViewModel on trouve le code C# suivant :

namespace HelloWorldModule.ViewModels
{
    public InteractionRequest<Notification> SelectClientRequest { get; private set; }
    public ICommand RaiseSelectClient { get; private set; }


    public HelloWorldViewModel()
    {
        this.SelectClientRequest = new InteractionRequest<Notification>();
        this.RaiseSelectClient = new DelegateCommand(this.OnRaiseSelectClient);

Avec l'utilisation de l'objet Notification, on rentre dans l'utilisation de la DLL, Microsoft.Practices.Prism.Interactivity.dll :
Microsoft.Practices.Prism.Interactivity, Notification et Confirmation
D'autre part, la commande du bouton "Raise Select Client View" est bindé sur la DelegateCommand RaiseSelectClient qui exécute l'Action OnRaiseSelectClient :

private void OnRaiseSelectClient()
{
this.SelectClientRequest.Raise(
  new Notification { Title = "Clients" });
}

Ce même mécanisme permet aux deux fonctions OnRaiseConfirmation et OnRaiseNotification de modifier la propriété Result du HelloWorldViewModel pour indiquer le résultat obtenu dans le TexBlock dont la propriété Text est Bindée sur le Result.

Dans le cas de OnRaiseSelectItem, on récupère la propriété string SelectedItem du SelectItemViewModel pour afficher le résultat.

Utilisation de l'EventAggregator pour récupérer les données du Modèle

Dans le cas de OnRaiseSelectClient, pour récupérée des données structurées du model (ClientData) , on utilise alors le mécanisme d'EventAggregator.

Dans le HelloWorldViewModel on s'enregistre à l’évènement : ClientSelectedEvent et on y inscrit l'Action ClientSelected qui sera exécutée sur réception de l'évènement :

public HelloWorldViewModel()
{

    this.eventAggregator = ServiceLocator.Current.GetInstance<EventAggregator>();
    this.eventAggregator.GetEvent<ClientSelectedEvent>().Subscribe(this.ClientSelected);
    ...
}


public void ClientSelected(ClientData client)
{
if (client != null)
{
this.Result = "The user selected the client: " + client.Name;
}
else
{
this.Result = "The user didn't select a client.";
}
}

Dans le SelectClientViewModel, on publie les données choisies par l'utilisateur :

public ClientData SelectedClient { get; set; }

protected void OkAction()
{
this.eventAggregator.GetEvent<ClientSelectedEvent>().Publish(this.SelectedClient);

if (this.HostWindow != null)
{
this.HostWindow.Close();
}
}

Et voilà comment cela fonctionne ...

PopupWindowAction le projet Infrastructure

Si je m'arrêtais là, je passerais à côté de l'un des objets principaux de ce projet. De façon classique Damian a créé un projet dans lequel il range ce qui pourrait faire partie d'un framework de base.

Et pour afficher une PopupWindow sur InteractionRequestTrigger Damian définit sa propre PopupWindowAction qui dérive de TriggerAction :

namespace Infrastructure.InteractionRequests
{
    /// <summary>
    /// TODO: Update summary.
    /// </summary>
    public class PopupWindowAction : TriggerAction<FrameworkElement>
        /// <summary>
        /// The content of the child window to display as part of the popup.
        /// </summary>
        public static readonly DependencyProperty WindowContentProperty =
            DependencyProperty.Register(
                "WindowContent",
                typeof(FrameworkElement),
                typeof(PopupWindowAction),
                new PropertyMetadata(null));

Un peu d'humour dans les commentaires cela ne fait pas de mal, j'adore la rubrique TODO !

C'est objet est utilisé dans l'InteractionRequestTrigger que l'on a vu au tout début de cet article.

Franchement, je ne trouve pas cela si simple ... Et je reviendrais sur cet exemple pour compléter mon analyse de ce projet que je trouve extrêmement intéressant. Tout ce code pour afficher une ChildWindow c'est véritablement bluffant !





EventToCommand avec Prism (2)

Comment câbler une InvokeCommandAction avec un CommandParameter qui passe un MouseEventArgs afin de récupérer et d'afficher les coordonnées de la souris dans la View.

Dans EventToCommand avec Prism (1) on à déjà vu pas mal de choses sur ce sujet.

S'en est pas encore fini avec EventToCommand de Prism ? Et bien non... Je regarde les exemples de Laurent Bugnion notamment EventToCommand Sample et je réussi à câbler la plupart des RelayCommand sur des DelegateCommand par exemple de la façon suivante :

<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding SimpleCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding ResetCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>

Ou de la façon suivante pour le bouton qui récupère un texte en paramètre :

<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding ParameterCommand1}"
CommandParameter="{Binding Text, ElementName=ParameterTextBox}" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding ResetCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>


Mais lorsque j'aborde l'exemple de l’ellipse (magnifique exemple de GalaSoft) qui permet d'afficher dans l'interface graphique (View) les coordonnées de la souris c'est la catastrophe. Avec une InvokeCommandAction, il est impossible de Binder une propriété CommandParameter sur quoi que se soit qui pourrait passer en paramètre à la DelagateCommand les MouseEventArgs afin d'afficher les coordonnées de la souris.

Et bien ce n'est si étonnant que cela, si on en juge par la page Starting work on Prism 4.1 c'est prévu mais pas encore intégré !

Une autre discussion du CodePlex fait bien référence à l'InvokeCommandAction mais elle ne résout pas ce problème.

Et nous voilà reparti dans les tréfonds du Framework au moins au niveau de DependencyObject .

EventToCommand avec Prims ma solution

Ma solution consiste à récupérer le code de MVVMLight : EventToCommandVS10.cs et de l'intégrer dans mon projet. Je n'ai pas choix car je pense qu'aucune solution n'est encore proposée par Prism v4.1.

InvokeCommandAction de Prims.Interactivity

namespace Microsoft.Practices.Prism.Interactivity
{
    public class InvokeCommandAction : TriggerAction<UIElement>

EventToCommand de MVVMLight 

namespace GalaSoft.MvvmLight.Command
{
    public class EventToCommand : TriggerAction<DependencyObject>

On regardera au passage ce qui est réalisé avec PassEventArgsToCommand.

EventToCommand avec Prism Code Source

Vous vous souvenez surement, j'essaye d'intégrer rapidement les frameworks MVVM, afin de voir et comprendre ce qu'ils apportent de plus par rapport à Prism ou bien trouver ce qui est déjà dans Prism. J'ai donc créé un projet MvvmFramework pour intégrer ce qui n'est pas dans Prism. Ce framework me permet de faire fonctionner mon projet WPFPrimsToolKit.

Les références de mon UserControl :
xmlns:prism="http://www.codeplex.com/prism"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:mvvm.i="clr-namespace:MvvmFramework.Interactivity;assembly=FrameworkMvvm"

Me permettent de câbler mon Ellipse de la façon suivante :
<Ellipse Fill="{Binding Brushes.Brush5}"
Stroke="Black"
Margin="10,8"
Grid.ColumnSpan="2"
Grid.Row="7">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseMove">
<mvvm.i:EventToCommand Command="{Binding MoveMouseCommand}" 
  PassEventArgsToCommand="True"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding ResetCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Ellipse>

Et quand je positionne ma souris dans l'ellipse verte, j'obtiens le résultat suivant :

Les MouseCoords sont affichées grâce à EventToCommand : TriggerAction<DependencyObject>

Download Source Code

Et comme un peu de code source vaut mieux qu'un long discours :

Requirements :
Visual Studio 2010 C# 
WPFToolKit
Prism v4.1







EventToCommand avec Prism (1)

Comment réaliser l'EventToCommand Dans Prism ? Au préalable je regarde rapidement comment cela est-il réalisé dans nos MVVM Framework favoris ?

CinchV2

EventToCommandTrigger

<TextBlock Style="{StaticResource aboutTextBlockStyleLinks}"
  Text="Home Page [At Codeplex]">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<CinchV2:EventToCommandTrigger
Command="{Binding AboutViewEventToVMFiredCommand}"
CommandParameter="Home"/>
</i:EventTrigger>                      
</i:Interaction.Triggers>                  
</TextBlock>

public SimpleCommand<Object, EventToCommandArgs> AboutViewEventToVMFiredCommand { get; private set; }

AboutViewEventToVMFiredCommand = new SimpleCommand<Object, EventToCommandArgs>(ExecuteAboutViewEventToVMFiredCommand);
private void ExecuteAboutViewEventToVMFiredCommand(EventToCommandArgs args)
{
switch ((String)args.CommandParameter)
{
            case "Home":

CompletedAwareCommandTrigger

<Grid x:Name="mainGrid" >
<i:Interaction.Triggers>
<CinchV2:CompletedAwareCommandTrigger 
Command="{Binding ShowActionsCommandReversed}">
<ei:GoToStateAction StateName="ShowActionsState"/>
</CinchV2:CompletedAwareCommandTrigger>

<CinchV2:CompletedAwareCommandTrigger
Command="{Binding HideActionsCommandReversed}">
<ei:GoToStateAction StateName="HideActionsState"/>
</CinchV2:CompletedAwareCommandTrigger>

</i:Interaction.Triggers>

ShowActionsCommandReversed = new SimpleCommand<Object, Object>((input) => { });

<VisualState x:Name="ShowActionsState">
/// <summary>
/// Goto "ShowActionsState", which use the VisualStateManagerService
/// </summary>
private void ExecuteShowActionsCommand(Object args)
{
ShowActionsCommandReversed.Execute(null);
}

<VisualState x:Name="HideActionsState"/>

/// <summary>
/// Goto "HideActionsState", which use the VisualStateManagerService
/// </summary>
private void ExecuteHideActionsCommand(Object args)
{
HideActionsCommandReversed.Execute(null);
}

<Label FontFamily="Wingdings" Foreground="Black"
VerticalAlignment="Center" Margin="10,5,5,5"
VerticalContentAlignment="Center"
FontSize="20" FontWeight="Normal"
Content="þ">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<CinchV2:EventToCommandTrigger 
Command="{Binding ShowActionsCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Label>

ShowActionsCommand = new SimpleCommand<Object, Object>(ExecuteShowActionsCommand);

GalaSoft

EventToCommand

<Button Background="{Binding Brushes.Brush3}"
Margin="10"
Style="{StaticResource ButtonStyle}"
Content="Parameter Command (Hello)"
Grid.Row="4"
ToolTipService.ToolTip="Click to activate command">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding ParameterCommand2}"
CommandParameterValue="Hello" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<cmd:EventToCommand Command="{Binding ResetCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

public RelayCommand<string> ParameterCommand2
{
get;
private set;
}

public MainViewModel()
{
            ParameterCommand2 = new RelayCommand<string>(p =>
            {
                Status = string.Format("Parameter command executed ({0})", p);
                LastUsedBrush = Brushes.Brush3;
            });

<Button Background="{Binding Brushes.Brush4}"
Margin="10"
Style="{StaticResource ButtonStyle}"
Content="&quot;Disablable&quot; Command"
Grid.Row="5"
ToolTipService.ToolTip="Click to activate command">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding DisablableCommand}"
CommandParameter="{Binding Text, ElementName=DisableCommandTextBox}"
MustToggleIsEnabled="{Binding IsChecked, ElementName=MustToggleCheckBox}" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<cmd:EventToCommand Command="{Binding ResetCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

public RelayCommand<string> DisablableCommand
{
get;
private set;
}

public MainViewModel()
{
DisablableCommand = new RelayCommand<string>(p =>
{
Status = string.Format("Disablable command executed ({0})", p);
LastUsedBrush = Brushes.Brush4;
},
p => p != "Hello");

Remarques sur les implémentations de EventToCommand

Dans Cinch la SimpleCommand prend toujours deux paramètres ce qui oblige à lui passer des NULL lorsqu'il n'y a pas de paramètres on verra que dans Prism on déclare deux type de DelagateCommand.

Chez GalaSoft l'utilisation des paramètres n'est pas franchement évidente à mon goût.

EventToCommand avec Prism

Et je trouve enfin une série d'exemples grâce à deux discussion au sein du CodePlex dans Microsoft  patterns & practices: Prism

WPF PRISM modular design
Les conseils de Damian Cherubini sur une application modulaire utilisant Entity Framework.

Display Child window WPF
Exemples réalisés par Damian Cherubini, les sources sont dans son SkyDrive :

<UserControl x:Class="HelloWorldModule.Views.SelectClientView"
                               xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding ChangeDetailCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>

InvokeCommandAction se trouve dans System.Windows.Interactivity.dll
namespace HelloWorldModule.ViewModels
{
    public class SelectClientViewModel : Notification, INotifyPropertyChanged, IPopupWindowActionAware, IRegionManagerAware
    {
        public SelectClientViewModel()
        {
            this.ChangeDetailCommand = new DelegateCommand(this.ChangeDetail);

Et c'est exactement ce que je cherchais à faire !
Dans Prism il ne s'agit donc pas de EventToCommand mais de InvokeCommandAction un grand merci à Damian Cherubini dont les exemples que vous trouverez également dans son SkyDrive sont une mine d'or.

Allez plus loin sur ce blog c'est Ici.