[PL] Cinch i MEFedMVVM – aplikacja MVVM w 5 min

Ostatnio przeglądałem kilka bibliotek wspomagających tworzenie aplikacji z użyciem wzorca MVVM. Najbardziej do gustu przypadł mi Cinch w wersji V2. Framework ten działa razem z biblioteką MEFedMVVM. Użycie obu bibliotek jest bardzo proste. Najpierw tworzymy klasę, która będzie naszym modelem widoku:

[ExportViewModel("MainViewModel")]
[PartCreationPolicy(CreationPolicy.NonShared)]
public class MainViewModel : INotifyPropertyChanged
{
    private SimpleCommand<object, object> helloWorldCommand;

    public event PropertyChangedEventHandler PropertyChanged;

    public SimpleCommand<object, object> HelloWorldCommand
    {
        get { return this.helloWorldCommand; }
    }

    public string Message
    {
        get;
        set;
    }

    public MainViewModel()
    {
        this.helloWorldCommand = new SimpleCommand<object, object>(this.ShowHelloWorld);
    }

    private void ShowHelloWorld(object param)
    {
        this.Message = "Hello world at: " + DateTime.Now.ToString();
        this.OnPropertyChanged("Message");
    }

    private void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Do klasy należy dodać atrybut ExportViewModel i przekazać do niego nazwę modelu widoku. Atrybut ten jest zdefiniowany w MEFedMVVM. Biblioteka ta korzysta z MEF, dzięki czemu możemy użyć też atrybutu PartCreationPolicy i ustalić jak nasz model widoku ma być tworzony – czy to będzie jedna dzielona instancja czy model widoku będzie tworzony za każdym razem. Następnie zostało zdefiniowane jedno polecenie przy użyciu SimpleCommand, który jest zdefiniowany w Cinch. Teraz trzeba nasz model widoku powiązać z widokiem. Kod widoku wygląda u mnie tak:

<Window x:Class="Cinch_sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" 
        Height="350" 
        Width="525"
        xmlns:meffed="http:\\www.codeplex.com\MEFedMVVM"
        meffed:ViewModelLocator.ViewModel="MainViewModel">
    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Message}" />
            <Button Command="{Binding HelloWorldCommand}" Content="Show message" />
        </StackPanel>
    </Grid>
</Window>

Uwagę trzeba tutaj zwrócić na attached property ViewModelLocator.ViewModel. Podajemy w nim nawę modelu widoku, którego chcemy użyć.

I to już wszystko. Aplikacja jest już skonfigurowana i możemy korzystać z dobrodziejstw MVVM. Tutaj znajduje się omawiana w tym poście aplikacja.

Published by Damian Antonowicz

Mobile Architect with extensive of experience gained developing projects based on Microsoft technologies. Has worked on mobile applications using Xamarin as well as server applications using .NET Core hosted in the Azure public cloud. Likes to share knowledge on his blog and at conferences. In his spare time likes to enjoy a dram of scotch whisky.  View all posts by Damian Antonowicz