MVVM Light Toolkit and Windows Phone : Bindable AppBar

• BindableAppBarWP-XAP - 116.6 KB
• BindableAppBarWP-Source - 2.5 MB

Introduction

A big problem when choosing to develop with MVVM in Windows Phone is that the native Application Bar is not bindable, so we can't get/set attributes or commands.

So, the following code snippets will show you how to add a bindable AppBar in Windows phone 8 using MVVM Light Toolkit.

Background

• Windows Phone
• MVVM
• Nuget Packages

Using the code

Thanks to the CodePlex open source project "Bindable Application Bar", we can get the control that will help us achieving our goal.

P.S : There are many solutions like the Bindable AppBar Appliation project, but I choose this one beacause I think it's the easiest one.

Let's add some code!

1. Adding Nuget Package

We can add a reference to that project via its Nuget Package.

 

2. Adding Reference :

Then, we add the reference in our View.

xmlns:bar="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar"

 

3. Adding AppBar :

Finally, we add the AppBar control. We can use it the same way as we use the native AppBar.

<bar:Bindable.ApplicationBar>
    <bar:BindableApplicationBar >
        <bar:BindableApplicationBarButton IconUri="/Assets/AppBar/add.png"
                                          Command="{Binding ButtonClick}"
                                          Text="Button" />
            <bar:BindableApplicationBar.MenuItems>
            <bar:BindableApplicationBarMenuItem Command="{Binding MenuItemClick}"
                                                Text="Menu Item" />
        </bar:BindableApplicationBar.MenuItems>
    </bar:BindableApplicationBar>
</bar:Bindable.ApplicationBar>

 

That's it! I hope it was helpful.

History

This is the first version of this tip/trick. If you have any problem/question, feel free to comment.

You're welcome. Enjoy!