[WPF] construire un programme mvvm en utilisant la boîte à outils MVM

Dino.c 2021-08-19 22:42:05 阅读数:337

wpf construire programme mvvm en

1. Qu'est - ce que MVVM Toolkit

Modèle-Voir- Voir le modèle (MVVM) Est utilisé pour le découplage UI Codes et non - codes UI Code UI Modèle de conception architecturale . Aide MVVM,Ça pourrait être dans XAML Défini par déclaration UI, Et utiliser des balises de liaison de données pour UI Liens vers d'autres couches contenant des données et des commandes .

Microsoft a proposé MVVM, Mais il n'y a pas eu d'offre officielle MVVM Bibliothèque( Il y a des années. Prism, Mais il s'est enfui de chez lui. ). Chaque fois que quelqu'un en parle MVVM Bibliothèque, Certains recommanderont Prism( Comme moi. ), Certains recommanderont MVVMLight. Mais maintenant... Prism A décidé N'est plus pris en charge UWP , Et MVVMLight Et ne plus mettre à jour , En ce moment difficile Windows Community Toolkit C'est sorti. MVVM Toolkit. MVVM Toolkit Continue. MVVMLight Style, Est un composant léger , Et il est basé sur .NET Standard 2.0,Disponible pourUWP, WinForms, WPF, Xamarin, Uno Attendre plusieurs plateformes . Par rapport à son prédécesseur MVVMLight, Il présente les caractéristiques suivantes: :

  • Plus haut: Numéro de version supérieur , Un coup. 7.0.
  • Plus vite.:Plus vite.,MVVM Toolkit Atteindre l'objectif de haute performance dès le début .
  • Plus fort. : Les coulisses sont plus fortes ,MVVM Toolkit Tout au long 'Microsoft.Toolkit.Mvvm',Racine rouge.

Pour l'instant,MVVM Toolkit Mise à jour vers '7.0.2', Pour plus de détails, voir le lien suivant :

Nugethttps://www.nuget.org/packages/Microsoft.Toolkit.Mvvm
Documentationhttps://docs.microsoft.com/en-us/windows/communitytoolkit/mvvm/introduction
Code sourcehttps://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Mvvm

Bien que Windows Community Toolkit Une partie du projet, Mais il est indépendant Sample Et documentation , On peut le trouver ici. :

https://github.com/CommunityToolkit/MVVM-Samples

Cet article sera brièvement présenté MVVM Toolkit Quelques éléments de base de .

2. Composants individuels

2.1 ObservableObject

ObservableObject C'est fait. INotifyPropertyChanged EtINotifyPropertyChanging, Et déclenche PropertyChanged Et PropertyChanging Événements.

public class User : ObservableObject
{
private string name;
public string Name
{
get => name;
set => SetProperty(ref name, value);
}
}

Dans cet exemple de code ,Si name Et value Différentes valeurs pour, Déclenche d'abord PropertyChanging Événements, Et déclenche PropertyChanged.

2.2 RelayCommand

RelayCommand Et RelayCommand<T> C'est fait. ICommand Interface,INotifyPropertyChanged Et ICommand - Oui. MVVM Base du modèle . Le code suivant est utilisé ObservableObject Et RelayCommand Montrer une base ViewModel:

public class MyViewModel : ObservableObject
{
public MyViewModel()
{
IncrementCounterCommand = new RelayCommand(IncrementCounter);
}
private int counter;
public int Counter
{
get => counter;
private set => SetProperty(ref counter, value);
}
public ICommand IncrementCounterCommand { get; }
private void IncrementCounter() => Counter++;
}
<Page
x:Class="MyApp.Views.MyPage"
xmlns:viewModels="using:MyApp.ViewModels">
<Page.DataContext>
<viewModels:MyViewModel x:Name="ViewModel"/>
</Page.DataContext>
<StackPanel Spacing="8">
<TextBlock Text="{x:Bind ViewModel.Counter, Mode=OneWay}"/>
<Button
Content="Click me!"
Command="{x:Bind ViewModel.IncrementCounterCommand}"/>
</StackPanel>
</Page>

Dans cet exemple, IncrementCounterCommand Emballé. IncrementCounter Fonction fournie à Button BIND.IncrementCounter Changement de fonction Counter La valeur de PropertyChanged Notification d'événement liée TextBlock.

2.3 AsyncRelayCommand

AsyncRelayCommand Et AsyncRelayCommand<T> C'est fait. ICommand, Mais ils supportent les opérations asynchrones ,Fourni ExecutionTask Et IsRunning Deux propriétés sont utiles pour surveiller l'état de fonctionnement de la tâche .

Par exemple, ViewModel:

public MyViewModel()
{
DownloadTextCommand = new AsyncRelayCommand(DownloadTextAsync);
}
public IAsyncRelayCommand DownloadTextCommand { get; }
private async Task<string> DownloadTextAsync()
{
await Task.Delay(3000); // Simulate a web request
return "Hello world!";
}

Utilisation de UI Code:

<Page.Resources>
<converters:TaskResultConverter x:Key="TaskResultConverter"/>
</Page.Resources>
<StackPanel Spacing="8">
<TextBlock>
<Run Text="Task status:"/>
<Run Text="{x:Bind ViewModel.DownloadTextCommand.ExecutionTask.Status, Mode=OneWay}"/>
<LineBreak/>
<Run Text="Result:"/>
<Run Text="{x:Bind ViewModel.DownloadTextCommand.ExecutionTask, Converter={StaticResource TaskResultConverter}, Mode=OneWay}"/>
</TextBlock>
<Button
Content="Click me!"
Command="{x:Bind ViewModel.DownloadTextCommand}"/>
<muxc:ProgressRing
HorizontalAlignment="Left"
IsActive="{x:Bind ViewModel.DownloadTextCommand.IsRunning, Mode=OneWay}"/>
</StackPanel>

Cliquez sur Button Après DownloadTextAsync On y va.,In UI Allez. TextBlock Et ProgressRing Lié à ExecutionTask Et IsRunning Et afficher l'état de fonctionnement de la tâche ,Enfin TaskResultConverter Afficher les résultats des tâches .

2.4 Messenger

Pour les objectifs principaux faiblement couplés MVVM Cadre, Il est nécessaire de fournir un système d'échange de messages .MVVM Toolkit Le cœur de l'échange de messages est WeakReferenceMessenger Catégorie.

// Create a message
public class LoggedInUserChangedMessage : ValueChangedMessage<User>
{
public LoggedInUserChangedMessage(User user) : base(user)
{
}
}
// Register a message in some module
WeakReferenceMessenger.Default.Register<LoggedInUserChangedMessage>(this, (r, m) =>
{
// Handle the message here, with r being the recipient and m being the
// input messenger. Using the recipient passed as input makes it so that
// the lambda expression doesn't capture "this", improving performance.
});
// Send a message from some other module
WeakReferenceMessenger.Default.Send(new LoggedInUserChangedMessage(user));

Comme le montre ce code ,WeakReferenceMessenger Principalement par Register Et Send Échange d'informations , Il est utilisé de la même manière que MVVMLight De messenger Catégorie.MVVM Toolkit Un autre StrongReferenceMessenger Catégorie, Voir cet article pour plus de détails sur l'utilisation Documentation.Messenger Puissant et facile à utiliser , Mais il y a aussi une certaine controverse au sujet des risques d'utilisation abusive. , Il est nécessaire de mieux comprendre son principe et son utilisation afin d'éviter d'autres risques. , Cet article ne fait qu'introduire brièvement son utilisation .

2.5 ObservableRecipient

ObservableRecipient Hérité ObservableObject Et de soutenir Messenger Recevoir des informations ,Peut passer IsActive Propriétés activées ou désactivées . Il peut être utilisé comme ViewModel Classe de base, En fait, son rôle se rencontre essentiellement MVVMLight Dans ViewModelBase

public class MyViewModel : ObservableRecipient, IRecipient<LoggedInUserRequestMessage>
{
public void Receive(LoggedInUserRequestMessage message)
{
// Handle the message here
}
}

3. The Performance

MVVM Toolkit Beaucoup d'efforts ont été déployés dans le processus de développement pour atteindre l'excellence en matière de rendement. , Par exemple, fournir un StrongReferenceMessenger Catégorie, La performance s'est considérablement améliorée comme le montre la figure ci - dessus. . Voici un autre exemple: :

MVVM Toolkit Preview 3 & The Journey of an API

Si vous êtes intéressé, vous pouvez en savoir plus sur le code source .

4. Conclusion

Cet article présente brièvement MVVM Toolkit Principales fonctions , Pour plus de détails, voir Code sourceTests unitaires Ou windows-toolkit/MVVM-Samples Exemple d'application fourni dans :

5. RÉFÉRENCES

Sample repo for MVVM package

Microsoft.Toolkit.Mvvm at master

[Feature] Basic MVVM primitives (.NET Standard)

NuGet Gallery _ Microsoft.Toolkit.Mvvm

MVVM Light Toolkit

Liaison des données et MVVM

[Feature] Microsoft.Toolkit.Mvvm package (Preview 5)

MVVM Toolkit Preview 3 & The Journey of an API

Copyright:Cet article est[Dino.c]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2021/08/20210819224101458r.html