22 September, 2010

WP7 and (missing) ICommand support on buttons

Update (30.03.2011): This workaround is available too in the SimpleMVVMToolKit. See this posting on how to accomplish this using SimpleMvvmToolKit. http://blog.clauskonrad.net/2011/03/wp7-hello-world-using-simplemvvmtoolkit.html

As WP7 is based on SL3, no out-of-the-box ICommand support is provided. This is quite inconvenient if you attempt to implement an application built on the MVVM pattern. If you however uses the MVVM Light framework from Galasoft, it becomes quite easy to implement! The big problem with this framework however, is that it is extremely hard to find a decent example on how to do this. So here goes:

image  

I’m trying to make the “Goto Page 2” button support ICommand and bind it to a ViewModel.

1) Add the button to the XAML-file in Visual Studio
2) Open the file in Expression Blend (see below)

image
3) Drag/Drop the Behaviour “EventToCommand” (GalaSoft) to the button. This will add this to your XAML-file:

 <Button Content="Goto Page 2" Height="72" HorizontalAlignment="Left" Margin="117,454,0,0" VerticalAlignment="Top" Width="232">
<
Custom:Interaction.Triggers>
<
Custom:EventTrigger EventName="Click">
<
GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Navigate}"/>
</
Custom:EventTrigger>
</
Custom:Interaction.Triggers>
</
Button>


Note the <Custom:Interaction.Triggers> tag added. This attached property of the Button allows for Command binding. The binding {Binding Navigate} binds to this ViewModel:

image 


So here you have the ICommand support added to a SL3 button.



Technorati Tags: ,,

7 comments:

Jim said...

Yes, but can you do this in the ToggleSwitch from the Phone Toolkit?

Claus Konrad said...

Yes - sure you can (just tried). It will respond to the "Click" event as declared in the XAML. It will therefore be invoked every time you manipulate the togglebutton.

I don't know if it makes a lot of sense, but that's up to you ;-)

Jim said...

Unfortunatly, I cannot seem to get it to work. Adding the System.Windows.Interactivity extension to the xaml corrupts the toggle switch display with an object name. I also could not get the command to reach the Navigate property.

Do you have a download for your test code anywhere?
Jim

Claus Konrad said...

http://www.clauskonrad.net/download.ashx?id=10

Jim said...

Thanks for the sample code. I had a couple of xaml syntax errors.

Works now.

Do you have any examples where the handler gets values from the sender? Say the IsChecked value from the toggle switch?

Thanks again,
Jim

Claus Konrad said...

Remember that normally a 1:1 relationship exists between the View and the ViewModel.
If you are keen on sticking to this ToggleSwitch, you might want to introduce a boolean property in your ViewModel that you bind (Mode=TwoWay) to the ToggleButton. In this way - you can take the .IsChecked this way in the ViewModel.

Jim said...

Great idea, that's a much simpler way to handle my data issue. Thanks for the tip.
Jim

InRiver: Not loading your extensions?

(You really need to in the loop to appreciate the issue this post addresses). Man, I've been fighting this problem for hours before I ...