MVVM - Collegamento delle viste
In questo capitolo, tratteremo diversi modi in cui puoi collegare le tue visualizzazioni a ViewModel. Per prima cosa, diamo uno sguardo alla prima costruzione di View in cui possiamo dichiararla in XAML. Come abbiamo visto nell'esempio nell'ultimo capitolo in cui abbiamo collegato una vista dalla finestra principale. Ora vedremo altri modi per collegare le visualizzazioni.
Useremo lo stesso esempio anche in questo capitolo. Di seguito è riportata la stessa implementazione della classe Model.
using System.ComponentModel;
namespace MVVMDemo.Model {
public class StudentModel {}
public class Student : INotifyPropertyChanged {
private string firstName;
private string lastName;
public string FirstName {
get { return firstName; }
set {
if (firstName != value) {
firstName = value;
RaisePropertyChanged("FirstName");
RaisePropertyChanged("FullName");
}
}
}
public string LastName {
get { return lastName; }
set {
if (lastName != value) {
lastName = value;
RaisePropertyChanged("LastName");
RaisePropertyChanged("FullName");
}
}
}
public string FullName {
get {
return firstName + " " + lastName;
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property) {
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
}Ecco l'implementazione della classe ViewModel. Questa volta il metodo LoadStudents viene chiamato nel costruttore predefinito.
using MVVMDemo.Model;
using System.Collections.ObjectModel;
namespace MVVMDemo.ViewModel{
public class StudentViewModel {
public StudentViewModel() {
LoadStudents();
}
public ObservableCollection<Student> Students {
get;
set;
}
public void LoadStudents() {
ObservableCollection<Student> students = new ObservableCollection<Student>();
students.Add(new Student { FirstName = "Mark", LastName = "Allain" });
students.Add(new Student { FirstName = "Allen", LastName = "Brown" });
students.Add(new Student { FirstName = "Linda", LastName = "Hamerski" });
Students = students;
}
}
}Indipendentemente dal fatto che la vista sia una finestra, un controllo utente o una pagina, il parser generalmente funziona dall'alto verso il basso e da sinistra a destra. Chiama il costruttore predefinito per ogni elemento non appena lo incontra. Esistono due modi per costruire una vista. Puoi usarne uno qualsiasi.
- Visualizza la prima costruzione in XAML
- Visualizza la prima costruzione in Code-behind
Visualizza la prima costruzione in XAML
Un modo consiste nell'aggiungere semplicemente il tuo ViewModel come elemento nidificato nel setter per la proprietà DataContext come mostrato nel codice seguente.
<UserControl.DataContext>
<viewModel:StudentViewModel/>
</UserControl.DataContext>Ecco il file XAML di visualizzazione completo.
<UserControl x:Class="MVVMDemo.Views.StudentView"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:local = "clr-namespace:MVVMDemo.Views"
xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "300">
<UserControl.DataContext>
<viewModel:StudentViewModel/>
</UserControl.DataContext>
<Grid>
<StackPanel HorizontalAlignment = "Left">
<ItemsControl ItemsSource = "{Binding Path = Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal">
<TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
Width = "100" Margin = "3 5 3 5"/>
<TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
Width = "100" Margin = "0 5 3 5"/>
<TextBlock Text = "{Binding Path = FullName, Mode = OneWay}"
Margin = "0 5 3 5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>Visualizza la prima costruzione in Code-behind
Un altro modo è che puoi ottenere la prima costruzione di View semplicemente costruendo tu stesso il modello di visualizzazione nel codice dietro della tua View impostando la proprietà DataContext lì con l'istanza.
In genere, la proprietà DataContext è impostata nel metodo di visualizzazione del costruttore, ma è anche possibile rinviare la costruzione fino a quando non viene attivato l'evento Load della visualizzazione.
using System.Windows.Controls;
namespace MVVMDemo.Views {
/// <summary>
/// Interaction logic for StudentView.xaml
/// </summary>
public partial class StudentView : UserControl {
public StudentView() {
InitializeComponent();
this.DataContext = new MVVMDemo.ViewModel.StudentViewModel();
}
}
}Uno dei motivi per costruire il modello di visualizzazione in Code-behind anziché in XAML è che il costruttore del modello di visualizzazione accetta parametri, ma l'analisi XAML può costruire elementi solo se definito nel costruttore predefinito.
In questo caso, il file XAML di View apparirà come mostrato nel codice seguente.
<UserControl x:Class = "MVVMDemo.Views.StudentView"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:local = "clr-namespace:MVVMDemo.Views"
mc:Ignorable = "d"
d:DesignHeight = "300"
d:DesignWidth = "300">
<Grid>
<StackPanel HorizontalAlignment = "Left">
<ItemsControl ItemsSource = "{Binding Path = Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal"<
<TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
Width = "100" Margin = "3 5 3 5"/>
<TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
Width = "100" Margin = "0 5 3 5"/>
<TextBlock Text = "{Binding Path = FullName, Mode = OneWay}"
Margin = "0 5 3 5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>È possibile dichiarare questa visualizzazione nella MainWindow come mostrato nel file MainWindow.XAML.
<Window x:Class = "MVVMDemo.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:MVVMDemo"
xmlns:views = "clr-namespace:MVVMDemo.Views"
mc:Ignorable = "d"
Title = "MainWindow" Height = "350" Width = "525">
<Grid>
<views:StudentView x:Name = "StudentViewControl"/>
</Grid>
</Window>Quando il codice sopra è stato compilato ed eseguito, vedrai il seguente output nella finestra principale.
Ti consigliamo di eseguire l'esempio precedente in modo graduale per una migliore comprensione.