How can I apply MVVM and Commands in this specific WPF situation?

Question

I am having trouble with the MVVM pattern and Commands in my WPF app. The problem is not so much the MVVM pattern, but more the stuff that is going on on my GUI. I'll explain the situation:

My app can DoStuff to some files. I have a class with a function DoStuff(int limit). My user user interface has the following items:

• A Button DoStuffBtn to start parsing.
• A TextBox LimitTxt to fill in a limit.
• A CheckBox LimitChk to enabled or disable the limit.

When you would "uncheck" LimitChk, then LimitTxt.Text = "" and LimitTxt.IsEnabled = false. When you would "check" LimitChk, then LimitTxt.IsEnabled = false again, but the text remains empty until you fill something in.

I have read many tutorials on Commands in WPF and MVVM but I just can't seem to pour my case into that mold. The example I gave is actually just a small part of my UI, but I can't seem to do this nicely either.

I keep running into questions like:

• Do I need two Commands for LimitChk (enable and disable) or just one (toggle)?
• If I bind an int to LimitTxt, what happens if I make it empty and disable it?
• Is it a clean way to just use DoStuff(Int32.Parse(LimitTxt.Text)) when DoStuffBtn is pressed?
• If I use two commands on LimitChk, what happens with the CanExecute() function of ICommand that determines whether LimitChk is enabled?

So the main question is: How would the situation I described fit into a nice pattern using Commands in WPF?

Some links on WPF, Commands and MVVM i've looked at:

• http://www.devx.com/DevX/Article/37893/0/page/1
• http://msdn.microsoft.com/en-us/magazine/cc785480.aspx?pr=blog
• http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/432/MVVM-for-Tarded-Folks-Like-Me-or-MVVM-and-What-it-Means-to-Me.aspx
• http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

---

What I understand so far is that I have to keep as much as possible out of the UI. Even stuff like UI influencing the UI. I.e. unchecking LimitChk disables LimitText. Still, I think I should keep a difference between UI related information and actions and stuff that actually has to do with the actual work that has to be done.

Answer 1

Just some high level thoughts, leaving out superfluous stuff like Color and alignment attributes, WrapPanels, etc.

Your ViewModel has a a couple properties:

public bool? LimitIsChecked { get; set; }
public bool LimitTextIsEnabled { get; set; }  //to be expanded, below
public ICommand ParseCommand { get; private set; } // to be expanded, below
public string LimitValue { get; set; } // further explanation, below

Your XAML has CheckBox and TextBox definitions something like:

<CheckBox Content="Limit Enabled" IsChecked="{Binding LimitIsChecked}" />
<TextBox Text="{Binding LimitValue}" IsEnabled="{Binding LimitIsEnabled}" />
<Button Content="Parse" Command="{Binding ParseCommand}" />

You'll want to initialize ParseCommand something like this:

this.ParseCommand = new DelegateCommand<object>(parseFile);

Now, let's fill in that LimitTextIsEnabled property too:

public bool LimitTextIsEnabled {
    // Explicit comparison because CheckBox.IsChecked is nullable.
    get { return this.LimitIsChecked == true; }
    private set { }
}

Your parseFile method would then pass the value of the LimitValue property to the logic doing the actual parsing.

I declared the LimitValue property as string here to avoid cluttering up the code with an explicit converter, or other validation code. You could choose to handle that "LimitValue is a valid int" verification/conversion in several different ways.

Of course, I haven't implemented this in its entirety, but I wanted to outline a pattern where you are not using Commands to update the state of the other widgets. Instead, bind those attributes to properties that are managed in your ViewModel.