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:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar>
            <shell:ApplicationBar.MenuItems>
                <cal:AppBarMenuItem Text="Clear" Message="Clear"></cal:AppBarMenuItem>
            </shell:ApplicationBar.MenuItems>

            <cal:AppBarButton IconUri="/icons/appbar.save.rest.png" Text="save" Message="Save" />
            <cal:AppBarButton IconUri="/icons/appbar.delete.rest.png" Text="delete" Message="Delete"/>
            <cal:AppBarButton x:Name="btnErase" IconUri="/icons/appbar.erase.rest.png" Text="erase" Message="Erase"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

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.