Wpf Binding Confusion

Question

I'm trying to learn on MVVM. I've understand the concept, however, i'm confused about the binding. I'm not sure where to bind my Fill property. Please help. Tqvm in advanced.

View - name: MainScreen.xaml

<Path Fill="{Binding mainScreenClass, Converter={StaticResource colorConverter}}"/>

inCodeBehind

DataContext = new vmMainScreen();

ViewModel - name:vmMainScreen

public ICommand cmdMouseEnterNav { get; private set; }
public mMainScreen mainScreenClass { get; set; }
public vmMainScreen()
{
    mainScreenClass = new mMainScreen();
    mainScreenClass.propNaviconFill = new SolidColorBrush(Colors.White);
    naviconMouseEventChecker();
}

private void naviconMouseEventChecker()
{
    cmdMouseEnterNav = new SimpleCommand
    {
        ExecuteDelegate = x => mainScreenClass.propNaviconFill = (SolidColorBrush)(new BrushConverter().ConvertFrom("#c5a02b"))
    };
}

Model - name:mMainScreen

public class mMainScreen : INotifyPropertyChanged
{
    private Brush _NaviconFill = new SolidColorBrush(Colors.White);
    public Brush propNaviconFill
    {
        get
        {
            return this._NaviconFill;
        }
        set
        {
            this._NaviconFill = value;
            NotifyPropertyChanged("propNaviconFill");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

I understand that when i breakpoint on my colorConverter, I'm getting the class. Not the property of propNaviconFill. If i create another property with the Brush class on my ViewModel and bind it to Fill, there is no problem. But that means I'm not following the correct structure of MVVM. Thanks again.

Answer 1

You should bind to the property of your view model.

<Path Fill="{Binding propNaviconFill, Converter={StaticResource colorConverter}}"/>

Use the view model implementing the INotifyPropertyChanged as the data context of your view.

DataContext = new mMainScreen();

If you really want to use vmMainScreen as your data context, then vmMainScreen should implement INotifyPropertyChanged there and you should study how NotifyPropertyChanged was used to notify the view that the view model property has changed.

Answer 2

Keep in mind there are two basic types of MVVM: 1. View First 2. View Model First

Based on your example you are trying to do View First. This is easier to implement but comes with drawbacks on larger projects since the view controls the creation of the ViewModel it's harder to inject data or state into the ViewModel.

For all MVVM patterns you have the three parts:

Model - Basically a state bag. This thing is just like a customer class which most of the time implements INotifyProperty changed.

ViewModel - This is like the controller class in MVC. It has all the real logic and does the work.

View - This is your XAML and it only holds presentation logic. The code-behind class ie: MyWindow.xaml.cs should not be used except to setup the ViewModel if your going View First. (there are exceptions of course but generally it should basically be empty)

For View First Your Window (or control) should create the ViewModel in the constructor and assign it to the DataContext.

Your ViewModel will have ICommand's, ObservableCollections and such that can be bound to controls in the View. So when your constructor fires you fill up your data and put it into the necessary structures; because of databinding this gets related to the View and shown.

Your Model (you usually have more than one, can have Customer, Order, StockTicker or whatever.) These are created by the ViewModel and put into things such as ObservableCollections for the View to databind to.