Change ApplicationBar Icon in the viewmodel

Dec 23, 2010 at 4:27 PM

I have an application bar that is going to toggle between 2 modes e.g. "draw" and "erase".  I got it working fine but one thing I can't figure out how to do in the ViewModel is change the icon for the button.  I want to show an "eraser" icon when drawing and a "pen" icon when erasing.

How do I do that?  It seems that I can't bind the IconUri.

Here is what I have so far:

                <cal:AppBarMenuItem Text="Clear" Message="Clear"></cal:AppBarMenuItem>

            <cal:AppBarButton IconUri="/icons/" Text="save" Message="Save" />
            <cal:AppBarButton IconUri="/icons/" Text="delete" Message="Delete"/>
            <cal:AppBarButton x:Name="btnErase" IconUri="/icons/" Text="erase" Message="Erase"/>

Jan 8, 2011 at 6:40 AM

Your view model is IViewAware so use that interface to get the view and access the ApplicationBar directly, the following code will do the trick.

            var page = GetView(null) as PhoneApplicationPage;

            if (page != null)
                var yourButton = page.ApplicationBar.Buttons[0] as AppBarButton;                

                if (yourButton != null)
                {   // Do the do

Note you can't use x:name because of a bug in the Application bar code.