Windows Phone 8.1 for Developers–Application Bar

아티클
04/09/2014

This blog post is part of a series about how Windows Phone 8.1 affects developers. This blog post talks about how the new application bar and is written by Robert Hedgate (@roberthedgate) at Jayway and was originally posted here.

Introduction

In this blog post I will do a quick overview of what is new with application bar in Windows Phone 8.1. This is the first impression of the functions so I do recommend you to take a look at MSDN if you want a deeper understanding of how it works.

Windows Phone 8.0

In Windows Phone 8.0 your application bar could look something like this:

     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/check.png" Text="Check" 
                                        Click="ApplicationBarIconButton_OnClick"/>
        <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/cancel.png" Text="cancel"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>

The problem being that one could not bind to the properties and all events goes to the code behind, IconUri using assets etc. This was a little pain to work with since it seemed to work outside of the normal XAML-tree.

Windows Phone 8.1

In Windows Phone 8.1 the application bar has been completely remodeled to work as the application bar works in Windows 8.1. This has some drawbacks but mostly advantages.

Windows 8

One thing that differ between Windows 8 and windows phone 8.1 is the AppBar, it does not exist in windows phone 8.1. This mean that we can only use AppBarButton and AppBarToggleButton, and I guess Microsoft thinks the phone screen is too small for AppBarSeperator since it’s not available. In Windows 8 there are also a TopAppBar which is not present in Windows Phone 8.1.

Syntax

The first thing that one notices is that there are a new syntax. Here is an example of an application bar in Windows Phone 8.1:

 <Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="{Binding AppBarLabel}" Command="{Binding SomeCommand}">
                <AppBarButton.Icon>
                    <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="Some path"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton x:Uid="AppBarSec" Label="$$get from resource$$" Command="{Binding SomeCommand}">
            </AppBarButton>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

We go through it from the top. We begin by setting a BottomAppBar this must be followed by a CommandBar. Inside the CommandBar there are two blocks, PrimaryCommands and SecondaryCommands. In windows 8 primary commands go to the right in the application bar and secondary commands to the left. In windows phone 8.1 it works a little different since the screen is too small for right and left. Instead primary commands appears as buttons and secondary commands becomes menu items. Menu items ignore eventual icons.

AppBarButton

This is one of the possible two controls that can be used inside primary or secondary commands. This works the same as ApplicationBarIconButton did before, it creates a button on the application bar. The Text property is now called Label and IconUri is Icon. When one put an AppBarButton in secondary commands it becomes a menu item, this is a consequence of the fact that Windows Phone 8.1 now shares code with Windows 8. Perhaps not the most intuitive syntax but that’s how it works. If the AppBarButton has an icon it is removed when used in secondary commands.

AppBarToggleButton

This is the second possible control in the primary or secondary commands. It works the same as AppBarButtom but it has an IsChecked property so it can toggle as the name implies. If it is checked the UI changes to show the state. If AppBarToggleButton is put in the secondary commands it looks like a menu item. The menu item has no indication if it is checked or not as the button version does so this must be taken under consideration if one uses the same XAML in both Windows Phone 8.1 and Windows 8. In Windows 8 it would appear as a button on the left side and thus being able to show its toggle state.

Binding

You can bind to the application bar. This is great news and makes many things a lot easier. To be able to bind from the ViewModel does not force us to break most patterns out there. Binding works the same as it does in the normal XAML.

Icon

The Icon property can instead of using images bind to paths. You can use self-made paths or built in versions. When you need an application bar icon please take a look at the built in icons in symbols, there are a lot of them and probably one that will fit your need unless you have very specific requirements. Using path gives the app a correct version of the icon independent of screen size or resolution. This is great if one for example have an icon path one uses in several places but in different sizes, an icon path is always displayed correct. You can of course still use assets as before if you have old icons you for some reason cannot make into a path.

Localization

The application bar is fully incorporated with the new way of localize your app with x:Uid and different resource files. There will be a later blog post about this.

Conclusion

Even though the syntax is taken from Windows 8 and does not quite fit in the phone development there are many advantages to the new application bar. We have code sharing between Windows 8 and Windows Phone 8.1, binding, paths in icons etc. All this combines to a great update and a lot less special fixes for the application bar in the future.

Comments

Anonymous
May 09, 2014
Great thx
Anonymous
September 22, 2014
Hi, I have doubt regarding the creation of application bar using code which is possible in windows phone 8 However i could not find any resource which could guide about the same in windows phone 8.1. can you please guide as i need to implement the same in windows phone 8.1. my email id is tricha.pathak@gmail.com Regards Richa
Anonymous
August 17, 2015
a little late to the party here, but are visualstates not supported for the appbar on phone? works fine on my win81 project but on winphone in the designer when I attempt to update a button I get the error: An animation is trying to modify an object named '', but no such object can be found in the PageStandIn. is there any way to make this work so I can share the code from win81 to update the command bar?

다음을 통해 공유