UWP Tips &Tricks #1 – AppBar and Default Behavior

By default , the AppBar is hidden in your Windows 8.1 app . When using the AppBar in your Universal Windows App (UWP) , the appbar is not hidden by default.

How to hide/show the AppBar in Universal Windows App ?

You can use the AppBar.ClosedDisplayMode property to hide or show the AppBar.

For example , adding the below code to create the AppBar in Windows 10 app (Figure 2) and Windows 8.1 (Figure 1) would result with the following.

<Page.BottomAppBar>
    <AppBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Content="Button 1" Width="100" Height="40" />
                <Button Content="Button 2" Width="100" Height="40" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Figure 1- Windows 8.1 and AppBar – Hidden by default.

Figure 2 – Windows 10 App – Not hidden by default

You can modify this by setting the ClosedDisplayMode property of the AppBar to “Hidden”.

<Page.BottomAppBar>
    <AppBar <ClosedDisplayMode="Hidden">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Content="Button 1" Width="100" Height="40" />
                <Button Content="Button 2" Width="100" Height="40" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

The ClosedDisplayMode property of the AppBar contains a value that indicates whether icon buttons are displayed when the app bar is not completely open. This can contain the following values

– Compact

– Minimal

– Hidden