Windows Phone 7, MVVM and TDD (Part 5 – creating the basic UI)

Okay, so we haven’t touched on any of the user interface yet but this supports the theory that we should be able to develop the user interface independently of the code. So, these are the areas we need to create for the user interface:

results in the following user interface (the view model is already bound to the DataContext of the page using the MVVM Light ViewModelLocator class):

So, the text input parameters are bound we need to bind the click from the login button to the Login Command exposed by the MainViewModel. We will wire the button up using the EventToCommand behavior included in the MVVM Light framework. Silverlight behaviors allow some functionality to be associated with a FrameworkElement by dragging it from the toolbox onto the element in Expression Blend. To achieve this carry out the following:

Open the Assets panel in Blend, click on behaviors – you should see the EventToCommand behavior.

Drag EventToCommand out onto the Login button.

With the EventToCommand object selected in the Objects & Timelines view configure it via the properties pane.

Click on the small blob to the right of the Command input box and choose data-binding from the options to display the data-binding dialog:

from here you can see all of the view model properties and can select the LoginCommand property to complete the data-binding….nice.

Set the MustToggleIsEnabled to true as we want to automatically disable the button if the command is unavailable and also set the Event Name to Click if it isn’t already.

Unfortunately, this is not enough for the behaviour I was looking for since in Silverlight there is no option to set the UpdateSourceTrigger to fire when the property changes, the best we can do is when the control loses focus. As a result the login button does not disable/enable when the fields are empty – until focus is lost from the input controls. To remedy this I have added some custom behaviors: