-
Ecco un esempio di implementazione del modello MVVM descritto nel post. Creremo una classe libro e la visualizzeremo in una view di tipo silverlight. Questo esempio trova la sua parte teorica nel post precedentemente scritto. Di seguito riportiamo una rappresentazione grafica di questo esempio per comprendere al meglio i nomi delle classi e dei metodi che useremo all'interno di un pattern MVVM.
- Dal menù dei progetti di visual studio 2010 selezionare un modello di applicazione “Silverlight Application” e mettere come nome “MVVMExamples” come è mostrato nell’immagine sottostante:
- nella schermata che compare lasciare tutte le impostazioni come compaiono a video vedi immagine
- ora si aprirà la solution di Visual Studio 2010 e nel solution explorer dovremmo trovare la situazione rappresentata dall’immagine:
-
ora andiamo a creare tre cartelle in cui andremo a inserire i file delle classi che costituiscono il modello MVVM. Le cartelle sono nomiate con lo stesso nome delle componenti che danno il nome al pattern:ModelView,Model,View.
- Ora abbiamo bisogno di una classe che gestisca il comportamento degli eventi e che derivi da EventArgs. In particolare vogliamo che quando il metodo che carica la lista dei libri ha finito di fare il suo lavoro scateni un evento BookLoading, questo perchè nel web voglio avere un funzionamento asincrono per non tenere la pagina impegnata per tutto il caricamento della lista di libri.
- creiamo ora una classe c# (book.cs) all’interno della cartella Model. Questa classe rappresenta il modello dei dati.Il contenuto del file book.cs è il seguente:
- creiamo una classe c# (ViewModel.cs) all’interno della cartella ViewModel. Questa classe farà da classe base per tutti i view model e deve derivare dall’interfaccia INotifyPropertyChanged. Tale interfaccia serve per notificare al client che il valore di una proprietà è cambiato. Il contenuto del file ViewModel.cs è il seguente:
- ora dobbiamo implenetare un viewmodel specifico per i book che derivi dal viewmodel definito prima. Quindi creiamo una classe bookViewModel.cs.
- la parte di gestione del MVVM è quasi realizzata basta soltanto occuparsi della parte di visualizzazione cioè della view. Per fare questo bisogna modificare la MainPage.xaml del nostro progetto MVVMExamples indicando il name space delle viste xmlns:myviews="clr-namespace:MVVMExamples.View" e definendo una zona dove verà visualizzata la view "BookView":
<UserControl x:Class="MVVMExamples.MainPage"
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:myviews="clr-namespace:MVVMExamples.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"><Grid>
<myviews:BookView Width="800" Height="600" />
</Grid>
</UserControl>
-
ci manca solo progettare l'interfaccia grafica e legarla al nostro viewmodel attraverso il binding. L'interfaccia che io voglio avere è una lista a sinistra che rappresenta i libri e ogni volta che vi clicco sopra compare a destra la descrizioen del libro come si vede nell'immagine sotto:
Il codice XAML per realizzare l'inerfaccia è il seguente:
<UserControl x:Class="MVVMExamples.View.BookView"
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:data="clr-namespace:MVVMExamples.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<data:BookViewModel x:Key="TheViewModel"
d:IsDataSource="True" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" DataContext="{StaticResource TheViewModel}">
<Grid.RowDefinitions>
<RowDefinition Height="134" />
<RowDefinition Height="166*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="196" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0" Margin="5"
ItemsSource="{Binding ListBook}"
DisplayMemberPath="Title"
SelectedItem="{Binding SelectedBook, Mode=TwoWay}" />
<!-- Databind the right section to ViewModel.SelectedPerson property -->
<Grid x:Name="BookDetails" Grid.Column="1" DataContext="{Binding SelectedBook}" Margin="5" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<Button Content="Button" Grid.Column="2" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="33,86,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</UserControl>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Book Details" FontSize="15" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Title, Mode=TwoWay}" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Age" />
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Description, Mode=TwoWay}" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="City" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding ISBN, Mode=TwoWay}" />
</Grid>
-
Ecco il nostro programmino MVVMExamples.zip (82,29 kb) che rispetta il pattern MVVM completato. Spero di essere stato chiaro e per ogni informazione non esitate a contattarmi.