MVVM – 뷰 연결
이 장에서는 뷰를 ViewModel에 연결할 수있는 다양한 방법을 다룹니다. 먼저 XAML에서 선언 할 수있는 View first 생성을 살펴 보겠습니다. 메인 창에서 뷰를 연결 한 마지막 장의 예제를 보았습니다. 이제 뷰를 연결하는 다른 방법을 살펴 보겠습니다.
이 장에서도 동일한 예제를 사용합니다. 다음은 동일한 모델 클래스 구현입니다.
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));
}
}
}
}다음은 ViewModel 클래스 구현입니다. 이번에는 LoadStudents 메서드가 기본 생성자에서 호출됩니다.
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;
}
}
}보기가 창, 사용자 제어 또는 페이지이든 관계없이 파서는 일반적으로 위에서 아래로, 왼쪽에서 오른쪽으로 작동합니다. 각 요소가 발견 될 때마다 기본 생성자를 호출합니다. 뷰를 구성하는 방법에는 두 가지가 있습니다. 당신은 그들에 무엇이든 사용할 수 있습니다.
- XAML에서 첫 번째 생성보기
- 코드 숨김에서 첫 번째 구성보기
XAML에서 첫 번째 생성보기
한 가지 방법은 다음 코드와 같이 DataContext 속성에 대한 setter에서 ViewModel을 중첩 요소로 추가하는 것입니다.
<UserControl.DataContext>
<viewModel:StudentViewModel/>
</UserControl.DataContext>다음은 전체 View XAML 파일입니다.
<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>코드 숨김에서 첫 번째 구성보기
또 다른 방법은 인스턴스와 함께 DataContext 속성을 설정하여 뷰 뒤에있는 코드에서 뷰 모델을 직접 생성하는 것입니다.
일반적으로 DataContext 속성은 뷰의 생성자 메서드에서 설정되지만 뷰의 Load 이벤트가 발생할 때까지 생성을 연기 할 수도 있습니다.
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();
}
}
}XAML 대신 코드 숨김에서 뷰 모델을 생성하는 한 가지 이유는 View 모델 생성자가 매개 변수를 사용하지만 XAML 구문 분석은 기본 생성자에 정의 된 경우에만 요소를 생성 할 수 있기 때문입니다.
이제이 경우 View의 XAML 파일은 다음 코드와 같이 표시됩니다.
<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>MainWindow.XAML 파일에 표시된대로 MainWindow에서이 뷰를 선언 할 수 있습니다.
<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>위의 코드가 컴파일되고 실행되면 기본 창에 다음 출력이 표시됩니다.
더 나은 이해를 위해 위의 예를 단계별로 실행하는 것이 좋습니다.