AppBarSeperator Control In Universal Apps

This article will cover using AppBarSeperator control in a Universal App.

You can read my previous part:

• Universal Apps Controls #1: AppBarButton

AppBarSeperator control is used when we'd like to separate menuitems used in bottom and top Appbars.



It'd looked nice if you put these separator after every menuitems. The following is the XAML view of the output above: 

<Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Icon="Like" Label="Like Me!" />
            <AppBarSeparator/>

            <!-- App bar button with bitmap icon. -->
            <AppBarButton Label="Image" >
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Assets/StoreLogo.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarSeparator/>

            <!-- App bar button with font icon. -->
            <AppBarButton Label="Font" >
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Candara" Glyph="$$$"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarSeparator/>

            <!-- App bar button with path icon. -->
            <AppBarButton Label="Whats That?" >
                <AppBarButton.Icon>
                    <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16" HorizontalAlignment="Center"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

We've added the AppBarSeperator control in xaml view as you can see in red highlight color. 

 

As I have explained above, AppBarSeperator is very useful for dividing menuitems. As UX its wise to divide different types of commands.