Search code examples
c#xamlwindows-8.1appbar

Windows 8.1 control that opens the appbar?

In the Internet Explorer App, there is a little bar on the bottom that is used to open the app/command bar.

It also shows up in the mail app: Windows Mail App

I have just a simple CommandBar at the moment, which is completely hidden until the user right-clicks or swipes from the bottom:

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Name="Button_Save" Icon="Save" Label="Save" Click="Button_Save_Click"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Crop" Label="Canvas Size"></AppBarButton>
            <AppBarButton Label="Grid Size" Icon="ViewAll"></AppBarButton>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Rather than just creating my own control, it would be nice if there was one that already existed for me to use. I don't know the name of this "Command bar grip" so I cant seem to find much information on it. If it does exist, what's the name of it? And if not, any ideas on how to make one? I would probably just use a rectangle and add the little "..." on the side.

I have seen it in some apps apart from Microsoft, but there appears to be no information on the control.

Solution

  • There isn't a standard control for this. The in-box AppBar on Windows 8.1 either hides or shows and doesn't have an intermediate hint mode.

    You can implement it yourself by creating a panel at the bottom of the page animating its position so it is either fully visible or shows only the ellipses. This can be done fairly easily by setting visual states for the visible and hinting states and switching to the visible state when the control receives focus or pointer input. As Robert Hartley suggests, the ellipses can be found in the Segoe UI Symbol font at 0xE10C ("More")

    <TextBlock Text="&#xE10C;" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe UI Symbol"/>

    I haven't used it, but Dave Smits provided a sample AppBarHint control which implements a hinting app bar for Windows. You might want to take a look at how he did that too.