You can read my previous part:
AppBarSeperator control is used when we'd like to separate menuitems used in bottom and top Appbars.
![Bitmapicon]()
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.