WPF MVVM design pattern Example:
Create Student class in Model Folder:
public class StudentModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Class { get; set; }
}
Create
ViewModel StudentViewModel
in ViewModel Folder
public class StudentViewModel:INotifyPropertyChanged
{
public StudentViewModel()
{
PageName = "WPF
Demo- MVVM";
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string
propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
private string pageName;
public string PageName
{
get { return pageName; }
set { pageName = value; OnPropertyChanged("PageName"); }
}
private ObservableCollection<StudentModel>
students;
public ObservableCollection<StudentModel>
Students
{
get { if (students == null) GetStudentData(); return students; }
set { students = value; OnPropertyChanged("Students"); }
}
private void GetStudentData()
{
students = new ObservableCollection<StudentModel>
{// Here we call APi data or Database Data
new StudentModel {Id=1, Name="XYZ", Class="1st" },
new StudentModel {Id=2, Name="XYZ123", Class="2nd" },
new StudentModel {Id=3, Name="XYZ1234", Class="1st" },
new StudentModel {Id=4, Name="XYZ123455", Class="2nd" }
};
}
}
Add StudentView page into the view folder
Now
Add View Model in XAMl File
<!--ViewMOdel Binding-->
<Window.DataContext>
<VM:StudentViewModel/>
</Window.DataContext>
<Window x:Class="Wpf2.View.StudentView"
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:Wpf2.View"
xmlns:VM="clr-namespace:Wpf2.ViewModel"
mc:Ignorable="d"
Title="StudentView" Height="300" Width="300">
<!--Namespace call of viewModel, VM is
custom name -->
<!--ViewMOdel Binding-->
<Window.DataContext>
<VM:StudentViewModel/>
</Window.DataContext>
<Window.Resources>
<!--Use in ListView-->
<!--Also create User control with Dependancy
property if data is more complex or resuse, style-->
<DataTemplate x:Key="KeyStudentRecordDataTemplate">
<Grid Background="#FFFAFFD7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}"/> <!--Default
Zero index-->
<TextBlock Grid.Column="1" Text="{Binding Class}"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Gray">
<TextBlock Text="{Binding PageName}" TextAlignment="Center" Style="{StaticResource KeyTextBlockStyle}"/> <!--
App.xaml->KeyTextBlockStyle-->
</Grid>
<ListView Grid.Row="1" ItemsSource="{Binding Students}" ItemTemplate="{StaticResource
KeyStudentRecordDataTemplate}" HorizontalContentAlignment="Stretch"/>
</Grid>
</Window>
Add
Resource Style in App.xaml file
<Application.Resources>
<Style x:Key="KeyTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="30"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
</Style>
</Application.Resources>
OUtput
Happy
Coding ..
Thanks
