Windows Phone 8.1 New features: the Application bar for controls

Windows Phone 8.1 is officially released at Microsoft's Build 2014 conference on April 3, 2014. Compared to Windows Phone 8, there have been significant changes in both the user and developer perspectives. Next we will use a few articles to understand the impact of these changes on developers and how we can better utilize the new features of WP8.1.

The biggest change in WP8.1 is the combination of Windows Store APP, which we collectively refer to as Windows RunTime apps. The controls in WP8.1 are located under the Windows.UI.XAML.Controls namespace, which is consistent with the Windows Store app.

In this article we first introduce the first WP8.1 new control: Application Bar

The application bar presumably everybody is not unfamiliar, it has very important application in WP8, we also call it applicationbar. ApplicationBar can add buttons and menu items, let's take a look at the simple implementation code:

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar>
            <shell: applicationbar.buttons>
                <shell:applicationbariconbutton text= "Btn1" iconuri= "***.png"/>
                < Shell:applicationbariconbutton text= "Btn2" iconuri= "***.png" >
            </shell:ApplicationBar.Buttons>
            <shell:ApplicationBar.MenuItems>
                <shell:applicationbarmenuitem text= "menu Item 1"/>
                <shell : Applicationbarmenuitem text= "menu Item 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell: Applicationbar>
    </phone:PhoneApplicationPage.ApplicationBar>

In this example, the ApplicationBar contains two buttons and two menu items. Let's look at how to implement the Application bar in WP8.1:

In the Windows Store app, the application bar is divided into two types, Topappbar and Bottomappbar, which are used for the top navigation bar and the bottom command bar, respectively. And in the WP8.1 only Bottomappbar, it plays the role and WP8 ApplicationBar is the same. Bottomappbar can contain CommandBar, while CommandBar can use two command elements, the main command element and the Auxiliary command element. Both of these elements act like buttons and menu items in WP8. To look at the code:

<Page.BottomAppBar> <commandbar issticky= "True" > <CommandBar.PrimaryCommands> <appbarbutton icon= "Zoomout" iscompact= "False" label= "Zoomout"/> <appbarbutton act= "True" > <AppBarButton.Icon> <pathicon data= "F1 M 10L 10,30 L 30,30 "/> </AppBarButton.Icon> </AppBarButton> <ap Pbarbutton iscompact= "True" > <AppBarButton.Icon> <bitmapicon uriso
                Urce= "Assets/setting.png"/> </AppBarButton.Icon> </AppBarButton> <appbartogglebutton iscompact= "False" label= "Omega" ischecked= "True" > <appbartoggl
                    ebutton.icon> <fonticon fontfamily= "Candara" glyph= "& #x03A9;"/> </appbartogglebutton.icon> </AppBarToggleButton> </CommandBar.PrimaryCommands> <comma ndbar.secondarycommands> <appbarbutton label= "Test01"/> <appbarbutton "  Test02 "/> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar>

We define two kinds of collection elements, Primarycommands and secondarycommands for CommandBar, and the elements in the collection can be Appbarbutton or Appbartogglebutton.

Take a look at several important attributes in Appbarbutton:

* Icon: Used to display the graphical content of an application bar button. It has several modes of expression:

Symbolicon-A predefined list of fonts based on the Segoe UI Symbol font

Fonticon-fonts based on the specified font family

Bitmapicon-Bitmap image files based on the specified URI

Pathicon-based on path data

* Label: Text description displayed on the program bar

* Iscompact: Boolean indicating whether to display buttons with no labels and margins narrowed

To see Appbartogglebutton, it differs from Appbarbutton in that he can have a selected state:

* IsChecked-Boolean, selected to True, not selected to false, otherwise null. The default is False.