gistlib - set up mvvm in csharp

To set up the Model-View-ViewModel (MVVM) architecture pattern in C#, you can follow these steps:

Create a new WPF project in Visual Studio.
Add a new folder named "Model" to your project.
Add a new class to the "Model" folder named "Person.cs" with the following code:


main.cs
public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}
107 chars
6 lines

Add a new folder named "ViewModel" to your project.
Add a new class to the "ViewModel" folder named "PersonViewModel.cs" with the following code:


main.cs
public class PersonViewModel : INotifyPropertyChanged
{
    private Person _person;

    public PersonViewModel(Person person)
    {
        _person = person;
    }

    public string FirstName
    {
        get { return _person.FirstName; }
        set
        {
            if (_person.FirstName != value)
            {
                _person.FirstName = value;
                RaisePropertyChanged("FirstName");
            }
        }
    }

    public string LastName
    {
        get { return _person.LastName; }
        set
        {
            if (_person.LastName != value)
            {
                _person.LastName = value;
                RaisePropertyChanged("LastName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
942 chars
43 lines

Add a new folder named "View" to your project.
Add a new WPF Window to the "View" folder named "MainWindow.xaml".
Edit MainWindow.xaml to include two TextBoxes and a Button:


<Window x:Class="MVVMExample.View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MVVMExample"
        Title="MainWindow" Height="150" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" Content="First Name:"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding FirstName}"/>
        <Label Grid.Row="1" Grid.Column="0" Content="Last Name:"/>
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding LastName}"/>
        <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                Content="Save" Click="SaveButton_Click"/>
    </Grid>
</Window>
1068 chars
24 lines

In MainWindow.xaml.cs, add the following code:


main.cs
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var person = new Person { FirstName = "John", LastName = "Doe" };
        var viewModel = new PersonViewModel(person);
        DataContext = viewModel;
    }

    private void SaveButton_Click(object sender, RoutedEventArgs e)
    {
        // Save the person's data
        // In a real application, this would typically involve calling a service or
        // data access layer to persist the changes.
        MessageBox.Show("Changes saved!");
    }
}
568 chars
20 lines

Build and run the project. You should see a window with FirstName and LastName textboxes, and a save button. Type some values into the textboxes, and click the save button to see a messagebox indicating that the changes have been saved.

This is a simple example of how to set up the MVVM architecture pattern in C# using WPF. Note that this is just one possible implementation of the pattern, and there are many variations and extensions that you could use depending on your specific requirements.

set up mvvm in csharp

similar csharp code snippets

related categories