Data Binding IsEnabled values to the WP7 appbar button

If you’ve ever tried to databind values to a WP7 application appbar, you will realize that its not possible to do so. This will mean, for example, that you will not be able to enable/disable an appbar button by setting the value in your View Model. You will instead, need to do this from the code behind, but this adds some complexity, when the value is actually determined and set in the View Model itself.

There is a workaround for this though, which should allow you to databind the IsEnabled value of the appbar button.

 
In this example, I have an appbar in my app, consisting of only 1 button. I also have a bool property “enableButton” in my ViewModel, which will either set the appbar button to enabled or disabled.

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False" Mode="Default" ForegroundColor="White" BackgroundColor="#fc0000">
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_refresh.png" Text="refresh" Click="refreshButton_Click" />
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

Since I cannot databind the “enableButton” property of my ViewModel directly to the appbar button, I will need to add this small piece of code first into my XAML.

<!--work around listener to enable/disable appbar icon-->
<CheckBox IsEnabled="{Binding enableButton}" IsEnabledChanged="toggle_Appbar" Visibility="Collapsed"  />

 

In my code behind, I then add the below code.

private void toggle_Appbar(object sender, DependencyPropertyChangedEventArgs e)
{
   (ApplicationBar.Buttons[0] as ApplicationBarIconButton).IsEnabled = (sender as CheckBox).IsEnabled;
}

What this 2 pieces of code do basically is, I first add a checkbox, to my page, and databind the IsEnabled property to my ViewModel. Since I do not really need to see this checkbox, I made it invisible. I added an event listener to this checkbox, which triggers everytime the IsEnabled property changes. I then add the event in my code behind, which sets the IsEnabled property of my appbar button to the same value as the checkbox. Now, every time the value in my ViewModel changes, the checkbox will reflect the same value, triggering the IsEnabledChanged event, which in turns set my appbar button to the correct state.

With this method, your appbar button will now be automatically updated whenever the value of your ViewModel property changes. Not exactly databinding but a clean workaround.

You can leave a response, or trackback from your own site.

2 Responses to “Data Binding IsEnabled values to the WP7 appbar button”

  1. Great! Thank you very much.

Leave a Reply


6 + four =