Wpf Tutorial => Basic MVVM Example Using WPF And C#

Example

This a Basic example for using the MVVM model in a windows desktop application, using WPF and C#. The example code implements a simple "user info" dialog.

The View

The XAML

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Text="{Binding FullName}" HorizontalAlignment="Center" FontWeight="Bold"/> <Label Grid.Column="0" Grid.Row="1" Margin="4" Content="First Name:" HorizontalAlignment="Right"/> <!-- UpdateSourceTrigger=PropertyChanged makes sure that changes in the TextBoxes are immediately applied to the model. --> <TextBox Grid.Column="1" Grid.Row="1" Margin="4" Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Width="200"/> <Label Grid.Column="0" Grid.Row="2" Margin="4" Content="Last Name:" HorizontalAlignment="Right"/> <TextBox Grid.Column="1" Grid.Row="2" Margin="4" Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Width="200"/> <Label Grid.Column="0" Grid.Row="3" Margin="4" Content="Age:" HorizontalAlignment="Right"/> <TextBlock Grid.Column="1" Grid.Row="3" Margin="4" Text="{Binding Age}" HorizontalAlignment="Left"/> </Grid>

and the code behind

public partial class MainWindow : Window { private readonly MyViewModel _viewModel; public MainWindow() { InitializeComponent(); _viewModel = new MyViewModel(); // The DataContext serves as the starting point of Binding Paths DataContext = _viewModel; } }

The View Model

// INotifyPropertyChanged notifies the View of property changes, so that Bindings are updated. sealed class MyViewModel : INotifyPropertyChanged { private User user; public string FirstName { get {return user.FirstName;} set { if(user.FirstName != value) { user.FirstName = value; OnPropertyChange("FirstName"); // If the first name has changed, the FullName property needs to be udpated as well. OnPropertyChange("FullName"); } } } public string LastName { get { return user.LastName; } set { if (user.LastName != value) { user.LastName = value; OnPropertyChange("LastName"); // If the first name has changed, the FullName property needs to be udpated as well. OnPropertyChange("FullName"); } } } // This property is an example of how model properties can be presented differently to the View. // In this case, we transform the birth date to the user's age, which is read only. public int Age { get { DateTime today = DateTime.Today; int age = today.Year - user.BirthDate.Year; if (user.BirthDate > today.AddYears(-age)) age--; return age; } } // This property is just for display purposes and is a composition of existing data. public string FullName { get { return FirstName + " " + LastName; } } public MyViewModel() { user = new User { FirstName = "John", LastName = "Doe", BirthDate = DateTime.Now.AddYears(-30) }; } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChange(string propertyName) { if(PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

The Model

sealed class User { public string FirstName { get; set; } public string LastName { get; set; } public DateTime BirthDate { get; set; } }

Got any wpf Question?

Ask any wpf Questions and Get Instant Answers from ChatGPT AI: ChatGPT answer me! PDF - Download wpf for free Previous Next