Windows Phone 8.1 for Developers – Application bar

This blog post is part of a series about how Windows Phone 8.1 affects developers. The series is written in collaboration with Microsoft evangelist Peter Bryntesson, check out his blog here.

Intro

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:

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.1

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:

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.1 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.1 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.1 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.

This Post Has 21 Comments

  1. how to refresh bar if I use Pivot?
    The first page maybe only show one appbarbutton ,and second page maybe show four appbarbutton or less ???

  2. Do you have some suggestions about my question?

    1. Sorry for late reply but it has been easter holiday.

      To change the number of appbarbutton depending on which pivot page is showing is much easier now than ever. Just bind the visibility property of the button to the SelectedItem of the pivot. You need ofcourse use a converter to change the index to a visibility flag.

      1. “Just bind the visibility property of the button to the SelectedItem of the pivot” ,You mean I should put all the buttons in my page BottomAppBar ,and then set button visibility when pivot change SelectIndex?
        for example , i have three pivot items.
        1.StartButton and SettingButton
        2.EditButton and SaveButton
        3.SyncButton ,RemoveButton ,AddButton … and more..

        you mean .in the page’s xaml i should put those in the “Page.BottomAppBar”,
        and then when the pivot selection change , i will update the button visb ?
        Yes or no ?

          1. Great.
            Thanks.
            It’s much easier now than ever.

  3. Do you remember I have ask you how to implement the longlistSelect (jumpList) on wp 8.1 ?Yes.I fix it by use listview and SemanticZoom.But now my boss ask me how to remove the listview item ?
    IList objList = new List(WordListView.SelectedItems);
    foreach (object o in objList)
    {
    var item = (EuCustomizeListItem) o;
    if ( WordListView.Items != null)
    {
    WordListView.Items.Remove(o);
    }
    }

    It’s not work for me .(http://social.msdn.microsoft.com/Forums/windowsapps/en-US/a73dc5c5-3cb6-4801-8398-cff636991643/best-way-to-check-if-listview-item-is-selected?forum=winappswithcsharp)

    Crash log here:
    StackTrace = ” at System.Runtime.InteropServices.WindowsRuntime.IVector1.RemoveAt(UInt32 index)rn at System.Runtime.InteropServices.WindowsRuntime.VectorToListAdapter.RemoveAtHelper[T](IVector1 _this, UInt32 index)rn at System.Runtime.InteropServices.Windows…

  4. I guess.I use the jump list view That mean the item has own header ,so it will crash if I just remove the item ?
    And then do you have some idea about how to remove the item ?(I know I can remove the source and then reset the listview source ,but I do not thinks it’s good idea if the source data need long time to reload.)
    here is my project :http://liupengs-blog.logdown.com/posts/194368-jumplist-semanticzoom-on-wp81

    And this More log here:
    A first chance exception of type ‘System.Exception’ occurred in mscorlib.ni.dll
    System.Exception: Catastrophic failure (Exception from HRESULT: 0x8000FFFF (E_UNEXPECTED))
    at System.Runtime.InteropServices.WindowsRuntime.IVector1.RemoveAt(UInt32 index)
    at System.Runtime.InteropServices.WindowsRuntime.VectorToListAdapter.RemoveAtHelper[T](IVector
    1 _this, UInt32 index)
    at System.Runtime.InteropServices.WindowsRuntime.VectorToCollectionAdapter.Remove[T](T item)
    at Eudic.MainPage.AppBar_RemoveWordlist_Click(Object sender, RoutedEventArgs e)
    The thread 0xc80 has exited with code 0 (0x0).
    The thread 0x980 has exited with code 0 (0x0).

  5. oh,Man.I fix it by myself.Thanks a lot.

  6. http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping ?
    It’s work on winrt,but not work on wp 8.1 ? the listview Drag not call. But wp 8.1 listview also has winrt listview’s action,but not work.

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.listviewbase.dragitemsstarting.ASPx (
    Minimum supported phone
    Windows Phone 8.1 [Windows Runtime apps only] ) but not working on my device ? what’s wrong ???

    1. I have seen this on earlier builds of wp8.1, I thought it had been fixed. On one of my projects we managed to fixed it by turning of the cache of the pages. I don´t know if this helps you or your problem is something completely different but try the cache solution and see if that helps.

  7. Thank you for this great write up!

  8. I have an issue with AppBarToggleButton.
    When the user touch it and drag the finger outside the button and release it, the button stays in the “Pressed” visual state, so it appears that the button has been checked, but it doesn’t fires any event, it only really gets checked if the user click it again.
    Anyone know how to fix that?

  9. Great post, thanks! :)

  10. How to create a Global App Bar, I should be able to use the same App Bar across all the pages instead of
    creating a Local App Bar in all the pages, Can you please help me out how to do it in Windows Phone 8.1 Apps.?? Thank You.

  11. nice info. thanks

Leave a Reply

Close Menu