How do I add an app bar separator

Question

I'm looking to add a separator between app bar commands in my C#/XAML app. Something similar to what's described at http://msdn.microsoft.com/en-us/library/windows/apps/Hh465309(v=win.10).aspx

How can I do it the right way?

I've seen recommendations to use the Pipe character | or a line. But the recommendations usually look slightly off, compared to what's done in JS/HTML.

Answer 1

Universal Windows 8.1 XAML apps won't allow you to draw a Line in BottomAppBar. Instead you can use AppBarSeparator control like this

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton
            Icon="Delete"
            Label="Delete Icon" />
        <AppBarSeparator />
        <AppBarButton
            Icon="Delete"
            Label="Delete Icon" />
    </CommandBar>
</Page.BottomAppBar>