Blog
Blog HelionBlog HelionBlog HelionBlog Helion
  • Artykuły
  • Autorzy
  • Recenzje
  • Konkursy

Przykładowa implementacja MVVM z MVVM Light w WPF

    Blog.helion.pl Artykuły Przykładowa implementacja MVVM z MVVM Light w WPF
    NastępnyPoprzedni

    Przykładowa implementacja MVVM z MVVM Light w WPF

    By Jerzy Piechowiak | Artykuły, Programowanie | Brak komentarzy | 19 stycznia, 2017 | 0

    Choć domyślnie aplikacje WPF piszemy z wykorzystaniem code-behind, to nie ma technologicznych przeciwwskazań do zastosowania w tym przypadku wzorca MVVM, do którego ta technologia jest również częściowo przystosowana. Tak naprawdę największa zmiana musi zajść w naszych głowach — musimy zmodyfikować podejście do tego, w jaki sposób projektujemy poszczególne elementy aplikacji.

     

    Tworząc kontrolery podpinane później na UI, nie powinniśmy w ogóle myśleć o interfejsie graficznym. Kontroler powinien wystawiać odpowiednie modele oraz komendy, które później zostaną skonsumowane w widoku. Jest to spora zmiana w stosunku do klasycznego podejścia, w którym to w miejscu code-behind możemy zrobić dosłownie wszystko, niczym się nie przejmując.

     

    Na szczęście trudności związane z przejściem na MVVM można sobie częściowo złagodzić. Wystarczy sięgnąć po gotową bibliotekę (w myśl zasady „nie wymyślaj koła od nowa”), np. po mój ulubiony MVVM Light.

     

    NuGet

    Biblioteka, jak większość rozwiązań w dzisiejszych czasach, jest dostępna na NuGecie i w wersji „libs” można ją pobrać stąd. Dostępna jest również wersja pełna, która po instalacji dodaje kilka standardowych elementów do naszego projektu. Na potrzeby przykładu zdecydowałem się skorzystać z pierwszej wersji paczki, by mieć większą kontrolę nad wszystkimi elementami tej układanki.

     

    Przykład praktyczny

    Przykład należy rozpocząć od utworzenia nowego projektu typu Wpf Application. W kolejnym kroku powinniśmy zainstalować wspomnianą w punkcie wyżej paczkę MvvmLightLibs.

     

    W kolejnych krokach dodajemy poszczególne elementy do projektu.

    Zaczynamy od folderu ViewModels, w którym pojawi się przykładowy ViewModel, a także klasa ViewModelLocator, która w MvvmLight jest domyślnie używana do wyciągania ViewModeli na UI.

     

    MainViewModel:
    
    using GalaSoft.MvvmLight;
    using GalaSoft.MvvmLight.Command;
    using System;
    using System.Windows.Input;
    
    namespace MvvmLightSampleWPFProject.ViewModels
    {
    	public class MainViewModel ViewModelBase
    	{
    		private Guid data;
    
    		public MainViewModel()
    		{
    			this.LoadDataCommand = new RelayCommand(() =>
    			{
    				this.Data = Guid.NewGuid();
    			});
    		}
    
    		public ICommand LoadDataCommand { get; private set; }
    
    		public Guid Data
    			{
    				get
    			{
    				return this.data;
    			}
    			set
    			{
    				this.data = value;
    				this.RaisePropertyChanged("Data");
    			}
    		}
    	}
    }
    

     

    To bardzo prosty ViewModel, ale warto zwrócić uwagę na kilka rzeczy:

    • ViewModel dziedziczy z klasy ViewModelBase wprowadzonej przez MvvmLight.
    • Obsługa interfejsu INotifyPropertyChanged odbywa się w klasie ViewModelBase (dokładnie w klasie ObservableObject, która jest bazą dla wyżej wspomnianej). Użytkownik dostaje do dyspozycji metodę RaisePropertyChanged.
    • Do obsługi komendy wykorzystałem standardową implementację RelayCommand.

     

    Nasz świeżo upieczony utworzony ViewModel powinniśmy „zarejestrować” w ViewModelLocatorze, którego kod znajdziecie poniżej:

     

    using GalaSoft.MvvmLight.Ioc;
    using Microsoft.Practices.ServiceLocation;
    
    namespace MvvmLightSampleWPFProject.ViewModels
    {
    	public class ViewModelLocator
    	{
    		public ViewModelLocator()
    		{
    			ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
    
    			SimpleIoc.Default.Register<MainViewModel>();
    		}
    
    		public MainViewModel MainViewModel
    		{
    			get
    			{
    				return ServiceLocator.Current.GetInstance<MainViewModel>();
    			}
    		}
    	}
    }
    

     

    Oczywiście jest to błahe rozwiązanie. W rzeczywistym projekcie możemy pokusić się np. o zastosowanie refleksji do automatycznej rejestracji ViewModeli. Z powodzeniem wykorzystałem takie rozwiązanie w kilku projektach.

     

    Mając ViewModel i Locator, możemy dokonać rejestracji tego drugiego w pliku App.xaml. Dzięki temu będziemy mieli dostęp do Locatora w całej aplikacji. Poniżej kod zmodyfikowanego pliku App.xaml:

     

    <Application x:Class="MvvmLightSampleWPFProject.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MvvmLightSampleWPFProject" xmlns:vm="clr-namespace:MvvmLightSampleWPFProject.ViewModels" StartupUri="MainWindow.xaml">
        <Application.Resources>
           <vm:ViewModelLocator x:Key="Locator" />
        </Application.Resources>
    </Application>
    

     

    Ostatnim elementem wdrożenia jest przykładowy Window. Do standardowo dodanego MainWindow.xaml (URI do niego znajduje się na listingu powyżej) wrzuciłem następującą zawartość (część XAML):

     

    <Window x:Class="MvvmLightSampleWPFProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MvvmLightSampleWPFProject" mc:Ignorable="d" DataContext="{Binding MainViewModel, Source={StaticResource Locator}}" Title="MainWindow" Height="350" Width="350">
       <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Command="{Binding LoadDataCommand}" Content="Wygeneruj GUID" Padding="5" />
            <TextBlock Text="{Binding Data}" />
       </StackPanel>
    </Window>
    

     

    Za pomocą Locatora, ustawiam DataContext na MainViewModel. W głównym StackPanelu umieszczam zaś dwa elementy:

    • Button, który binduje się do komendy LoadDataCommand,
    • TextBlock, który wyświetla efekt działania powyższej komendy.

     

    To tyle. Jest to w pełni działająca aplikacja wykorzystująca wzorzec MVVM Light. Ponieważ przykład był bardzo prosty, praktycznie pominąłem model. Pole Data zostało wtłoczone bezpośrednio do klasy ViewModel.

     

    Pełny kod projektu znajdziecie na Githubie.

     

     

     

    Jerzy Piechowiak

    Altcontroldelete.pl

     


    Szukasz informacji? Kliknij poniżej:

         

    Jerzy Piechowiak, MVVM, programowanie, WPF
    Avatar

    Jerzy Piechowiak

    Więcej postów od Jerzy Piechowiak

    Podobne posty

    • Optymalny layout w XAML-u — zestaw porad

      By Jerzy Piechowiak | Brak komentarzy

      Język znaczników XAML na pozór nie wydaje się popularną technologią, z drugiej strony jest filarem większości aplikacyjnych rozwiązań giganta z Redmond, które korzystają z warstwy UI. W praktyce poszczególne wdrożenia są do siebie bardzo zbliżoneCzytaj więcej…

    • INotifyPropertyChanged — łatwiejsza implementacja z Fody

      By Jerzy Piechowiak | Brak komentarzy

      W poprzednim wpisie zaprezentowałem przykładowe wdrożenie wzorca MVVM z wykorzystaniem biblioteki MVVM Light. Wspomniana biblioteka upraszcza sporo czynności, m.in. implementację interfejsu INotifyPropertyChanged, który jest kluczowym elementem każdego modelu w technologiach wykorzystujących data binding.

    • Nie bój się refaktoryzacji!

      By Jerzy Piechowiak | Brak komentarzy

      Bardzo często w tytułach książek dla programistów można znaleźć określenia typu: „piękny kod”, „czysty kod”, „kod doskonały”, sugerujące, że możliwe jest napisanie programu, którego kod źródłowy jest po prostu idealny. Ale co właściwie znaczy to,Czytaj więcej…

    • Ninject — ciekawa alternatywa dla Autofaca

      By Jerzy Piechowiak | Brak komentarzy

      W poprzednim poście starałem się przedstawić podstawowe różnice między trzema głównymi sposobami rejestracji usług dostępnymi w Autofacu. Kontener ten oferuje szerokie możliwości, dobre czasy „wyciągania” usług, ma także grono wiernych użytkowników. Jednak jeśli spojrzymy na statystykiCzytaj więcej…

    • Autofac — różne sposoby rejestracji usług

      By Jerzy Piechowiak | 2 komentarze

      Gdy dobrych kilka lat temu zaczynałem programować w C#, nie miałem pojęcia o czymś takim jak kontener IoC. Każdy obiekt tworzyłem klasycznie — poprzez zastosowanie słowa kluczowego new: StringBuilder sb = new StringBuilder();

    NastępnyPoprzedni

    Znajdź post

    Bądźmy w kontakcie

    Książka dnia

    C#. Lekcje programowania. Praktyczna nauka programowania dla platform .NET i .NET Core

    Autor: Jacek Matulewski

    Cena: 83.30 zł 119.00 zł
    (Cena e-booka: zł zł)

    O 36zł taniej!

    kup teraz

    Najnowsze wpisy

    • Błyskawiczny kurs pisania skryptów powłoki
    • Przykładowa aplikacja webowa zaimplementowana w ASP .NET Core
    • Wprowadzenie do .NET Core: instalacja, konfiguracja, pierwsza aplikacja w systemie Linux
    • Grupa Helion zaprasza na szkolenia stacjonarne!
    • Hello World! Czym jest programowanie?

    Tagi

    .net agile altcontroldelete asp.net c# czysty kod debugowanie design patterns e-biznes emarketing Google Google Analytics hacking Jerzy Piechowiak kod kodowanie Krzysztof Marzec książka Maciej Dutko magazyn programista Magdalena Daniłoś marketing MVVM onepress organizacja czasu praca prograista programista programowanie prokrastynacja rafał kocisz reklama rozwój software craftsman SOLID startup techniki programowania testowanie video marketing visual studio WPF wzorce projektowe youtube zarządzanie czasem zarządzanie projektami

    Archiwum

    • Lipiec 2017
    • Czerwiec 2017
    • Maj 2017
    • Kwiecień 2017
    • Marzec 2017
    • Luty 2017
    • Styczeń 2017
    • Grudzień 2016
    • Listopad 2016
    • Październik 2016
    • Wrzesień 2016
    • Lipiec 2016
    • Czerwiec 2016
    Blog wydawnictwa
    Informatyka w najlepszym wydaniu
    Strona wydawcy:
    www.helion.pl
    Księgarnia Helion.pl
    Nowości
    Bestsellery
    Promocje
    Bądźmy w kontakcie:
    Chcesz zostać autorem?
    Masz pytania do redakcji?
    Napisz do nas »
    • Artykuły
    • Autorzy
    • Recenzje
    • Konkursy
    Blog Helion