Cimbalino Windows Phone Toolkit: ApplicationBarBehavior

Cimbalino Windows Phone ToolkitThe Windows Phone Application Bar has been a true headache for developers since day one, given that this object is not a FrameworkElement.

What this means is that we are unable to apply Styles or Templates to an ApplicationBar object, but most important, we are unable to bind to its properties, something that is a big issue when you what to use MVVM pattern in you apps.

Surely MVVM is not a closed pattern, and as such there are alternatives to overcome this issue (like this one or this one)!

In my case, in order to access the ApplicationBar in my apps in a more “MVVM’ed” way, I created the ApplicationBarBehavior that you can find in the Cimbalino Windows Phone Toolkit!

This Behavior, when applyed to a PhoneApplicationPage or it’s LayoutRoot element, allows to create and maintain a fully bindable Application Bar, and as such applying a more consistent MVVM pattern.

Here’s a small sample code for it:

<!-- remaining code -->

<Grid x:Name="LayoutRoot" Background="Transparent">
    <i:Interaction.Behaviors>
        <cimbalino:ApplicationBarBehavior>
            <cimbalino:ApplicationBarIconButton Command="{Binding AddItemCommand, Mode=OneTime}" IconUri="/Images/appbar.add.rest.png" Text="add" IsVisible="{Binding IsSelectionDisabled}" />
            <cimbalino:ApplicationBarIconButton Command="{Binding EnableSelectionCommand, Mode=OneTime}" IconUri="/Images/appbar.manage.rest.png" Text="select" IsVisible="{Binding IsSelectionDisabled}" />
            <cimbalino:ApplicationBarIconButton Command="{Binding DeleteItemsCommand, Mode=OneTime}" CommandParameter="{Binding SelectedItems, ElementName=ItemsMultiselectList}" IconUri="/Images/appbar.delete.rest.png" Text="delete" IsVisible="{Binding IsSelectionEnabled}" />
        </cimbalino:ApplicationBarBehavior>
    </i:Interaction.Behaviors>

    <!-- remaining code -->

</Grid>

<!-- remaining code -->

In this small code sample we can see the ApplicationBarBehavior and in it, some ApplicationBarIconButton (like you would do in the current one), and quickly we notice some new properties like Command, CommandParamenter, and IsVisible (something we can’t even find in the base Windows Phone ApplicationBar); obviously, even the properties Text and IconUri are bindable, allowing for easy localization! ;)

  • Pingback: Cimbalino Windows Phone Toolkit: ApplicationBarBehavior

  • Pingback: Cimbalino Windows Phone Toolkit: MultiApplicationBarBehavior | pedrolamas.com

  • http://stevebailey.biz steve

    Hey Pedro, I’m using your Cimbalino toolkit for my mvvmlight-based app, and had a question.

    I have an appbar button on my MainPage.xaml, and it’s for adding a new book (it’s a book collection app). I used your behaviour code as above, to set the command of the button to a RelayCommand, which ultimately, should just go to my NewPage.xaml file as shown below

    public RelayCommand AddNewBookCommand
    {

    get { return new RelayCommand(AddNewBook); }
    }

    private void AddNewBook()
    {

    _navigationService.NavigateTo(new Uri(@"/View/NewPage.xaml", UriKind.Relative));
    }

    There’s no response to this button, but I’m not asking for troubleshooting help.

    The simple question I have, is

    Is this problem maybe due to the fact the code above is not in my MainViewModel, but instead in my NewBookViewModel ? So the appbar button on the MainPage can’t find it ? If this is not the issue, I’ll have to dig further.

    Thanks
    Steve

    • http://www.pedrolamas.com Pedro Lamas

      I think something got lost when you posted the comment as it seems that the problem is missing! :)

  • http://stevebailey.biz steve

    Another question, Pedro. Thanks for reading the first one :)

    I’ll use a portion of your example above:

    Let’s assume that the AddItemCommand property (or method that is called by the Relayed AddItemCommand) navigates to an AddItem.xaml page.

    What if you want to send an argument, so that you could initialize the controls on the AddItem.xaml page in a certain way, based on that argument ?

    In the xaml above, for the cimbalino:ApplicationBarIconButton, is there a way to do that ?

    Actually, you know what, I think I just solved my problem while typing this. I dont’ think I need an argument in the xaml.

    All I want to do, is check what is the currently active Panorama item, and I can simply do that in the method that is called (AddItemCommandMethod), before it calls NavigationService to go to the AddItem page.

    My next task is to figure out how to access my MainPage’s Panorama control from my NewItemViewModel, and I’m sure I can figure that out

    Thanks for reading
    Steve