create a window in wpf with the observer pattern in csharp

To create a WPF window using the Observer pattern, we can follow the MVVM (Model-View-ViewModel) architectural pattern.

Step 1: Define the Model class

In the first step, we create a class that will act as the Model class. This class contains the data that we want to bind to the UI elements.

main.cs
public class DataModel : INotifyPropertyChanged
{
    private string _data;

    public string Data
    {
        get { return _data; }
        set
        {
            _data = value;
            OnPropertyChanged("Data");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
456 chars
22 lines

Here, we have created a class named DataModel that contains a property named Data. We are also implementing the INotifyPropertyChanged interface to notify the UI elements whenever the value of the Data property changes.

Step 2: Define the ViewModel class

In the second step, we create a class that will act as the ViewModel class. This class contains the logic of the window and acts as a mediator between the Model and the View.

main.cs
public class DataViewModel
{
    private DataModel _model;

    public DataViewModel()
    {
        _model = new DataModel();
    }

    public DataModel Model
    {
        get { return _model; }
        set { _model = value; }
    }

    public void UpdateData(string data)
    {
        _model.Data = data;
    }
}
319 chars
21 lines

Here, we have created a class named DataViewModel that contains an instance of the DataModel class. We have also defined a method named UpdateData that updates the value of the Data property of the DataModel class whenever it is called.

Step 3: Define the View class (the window)

In the third step, we create the View class which is the actual WPF window.

<Window x:Class="ObserverPatternExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Observer Pattern Example">
    <Grid>
        <StackPanel>
            <Label Content="{Binding Model.Data}" />
            <Button Content="Update Data" Click="Button_Click" />
        </StackPanel>
    </Grid>
</Window>
426 chars
12 lines

Here, we have created a simple window that contains a label that binds to the Data property of the DataModel class and a button that updates the Data property when clicked.

Step 4: Implement the Observer pattern

In the final step, we implement the Observer pattern by subscribing to the PropertyChanged event of the DataModel class in the DataViewModel class.

main.cs
public class DataViewModel
{
    private DataModel _model;

    public DataViewModel()
    {
        _model = new DataModel();
        _model.PropertyChanged += Model_PropertyChanged;
    }

    public DataModel Model
    {
        get { return _model; }
        set { _model = value; }
    }

    public void UpdateData(string data)
    {
        _model.Data = data;
    }

    private void Model_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "Data")
        {
            // Logic to do when the value of the Data property changes
        }
    }
}
600 chars
30 lines

Here, we have subscribed to the PropertyChanged event of the DataModel class in the constructor of the DataViewModel class. Whenever the value of the Data property changes, the Model_PropertyChanged event handler is called which contains the logic that we want to execute when the value of the Data property changes.

That's it! By following these steps, we can create a WPF window using the Observer pattern in C#.

gistlibby LogSnag