Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Software Architecture Pattern
M-V-VM
(Model-View-ViewModel)
Friday, July 26, 2013
View
ViewModel
Commands
Data
Binding
Model
Model
public class Person
{
public Person() { }
public string FirstName { get; set; }
public string LastName { get; set; }...
ViewModel
public class MainViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
...
ViewModel
private Person _selectedPerson;
public Person SelectedPerson
{
get { return _selectedPerson; }
set
{
if (_select...
View
<TextBox Text="{Binding FirstName, Mode=TwoWay}" />
View
<ListView
ItemsSource="{Binding ListOfPerson}"
SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" />
View
ViewModel
Commands
Data
Binding
Model
• The Mode property determines how changes are synchronized
between the target control and data source
– OneTime – Control...
• ViewModels implement INotifyPropertyChanged
public class ProfileViewModel : INotifyPropertyChanged
{
private Person _per...
<Button Command="{Binding EditCommand}"
CommandParameter="{Binding SelectedPerson}"
Content="Edit" HorizontalAlignment="Ce...
• Reuse Model and View-Model code
• Test the ViewModel with unit tests
• Maintainability
• Can show design-time data in Ex...
http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/
Rob EisenbergLaurent Bugnion
http://msdn.microsoft.com/en-us/library/gg405484%28v=pandp.40%29.aspx
http://msdn.microsoft.com/en-us/magazine/jj651572.as...
Software Architecture Design
M-V-VM
(Model-View-ViewModel)
18/07/2013
Giới thiệu nhanh về mô hình MVVM (Model-View-ViewModel)
Upcoming SlideShare
Loading in …5
×

Giới thiệu nhanh về mô hình MVVM (Model-View-ViewModel)

2,130 views

Published on

Bài giới thiệu nhanh về mô hình kiến trúc phần mềm MVVM (Model-View-ViewModel).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Giới thiệu nhanh về mô hình MVVM (Model-View-ViewModel)

  1. 1. Software Architecture Pattern M-V-VM (Model-View-ViewModel) Friday, July 26, 2013
  2. 2. View ViewModel Commands Data Binding Model
  3. 3. Model public class Person { public Person() { } public string FirstName { get; set; } public string LastName { get; set; } public string Age { get; set; } }
  4. 4. ViewModel public class MainViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }
  5. 5. ViewModel private Person _selectedPerson; public Person SelectedPerson { get { return _selectedPerson; } set { if (_selectedPerson != value) { _selectedPerson = value; NotifyPropertyChanged("SelectedPerson"); } } }
  6. 6. View <TextBox Text="{Binding FirstName, Mode=TwoWay}" />
  7. 7. View <ListView ItemsSource="{Binding ListOfPerson}" SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" />
  8. 8. View ViewModel Commands Data Binding Model
  9. 9. • The Mode property determines how changes are synchronized between the target control and data source – OneTime – Control property is set once to the data value and any subsequent changes are ignored – OneWay – Changes in the data object are synchronized to the control property, but changes in the control are not synchronized back to the data object – TwoWay – Changes in the data object are synchronized to the control property and vice- versa <TextBlock x:Name="FirstName" Text="{Binding FirstName, Mode=OneWay}"/>
  10. 10. • ViewModels implement INotifyPropertyChanged public class ProfileViewModel : INotifyPropertyChanged { private Person _person; public Person Person { get { return _person; } set { if (value != _person) { _person = value; NotifyPropertyChanged("Person"); } } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { if (null != PropertyChanged) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }
  11. 11. <Button Command="{Binding EditCommand}" CommandParameter="{Binding SelectedPerson}" Content="Edit" HorizontalAlignment="Center" VerticalAlignment="Center"/> class EditPersonCommand : ICommand { ViewModel _viewModel; public EditPersonCommand(ViewModel viewModel) { _viewModel = viewModel; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; } public void Execute(object person) { _viewModel.EditPerson(person as Person); } }
  12. 12. • Reuse Model and View-Model code • Test the ViewModel with unit tests • Maintainability • Can show design-time data in Expression Blend and the Visual Studio designer
  13. 13. http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/ Rob EisenbergLaurent Bugnion
  14. 14. http://msdn.microsoft.com/en-us/library/gg405484%28v=pandp.40%29.aspx http://msdn.microsoft.com/en-us/magazine/jj651572.aspx
  15. 15. Software Architecture Design M-V-VM (Model-View-ViewModel) 18/07/2013

×