Question

Got little confused with MVVM and user control events.

I have a user control in my view. It has two modes i.e. Read and Edit. (TextMode)

<Grid
        x:Name="LayoutRoot"
        Background="Transparent">


                <controls:MyUserControl 
                             Mode="{Binding Path=TextMode,Mode=TwoWay}"
                             Text="{Binding Path=ReportText,Mode=TwoWay}"

                </controls:MyUserControl>         

</Grid>

When TextMode changes to ‘Edit’ , i want to add a ‘Save’ button to the Phone Applicationbar, and when the Save button is clicked want to save the Text from user control. Also i want to disable Save button in the ‘Read’ view.
(ie.when TextMode is ‘Read’)

What is the right MVVM way to do this? I thought of two ways :

1) I was thinking exposing ModeChanged property on the user control and propagating it to the view, and then add the Save button. (But does that goes against MVVM way i.e. having code in code behind?).

2) Handling propertychanged of the dependancy property itself, and adding the save button, from the user control. (doesn’t seem right as application logic gets mixed in usercontrol)

How do i involve the view model in this?

What is a good way of doing such operations that will follow MVVM.

Answer 1

Take a look at the BindableApplicationBar in Phone7.Fx. It is a wrapper for the Application Bar that is more “MVVM-friendly”.

http://blog.humann.info/post/2010/08/27/How-to-have-binding-on-the-ApplicationBar.aspx

http://phone7.codeplex.com/

http://bindableapplicationb.codeplex.com/