How to use an app bar at different sizes
By default, an app bar button is 100 device-independent pixels (DIPs) wide and has a text label below its icon. When a user makes an app narrower, there isn't as much horizontal space to show commands. If you have more than a few buttons in the app bar, you must make some adjustments to make the buttons show correctly at narrower widths.
Roadmap: How does this topic relate to others? See:
- Roadmap for Windows Runtime apps using C# or Visual Basic
- Roadmap for Windows Runtime apps using C++
What you need to know
Technologies
Prerequisites
- Quickstart: Adding controls and handling events
- Quickstart: Adding app bars
- Quickstart: Adding app bar buttons
Instructions
Step 1: Hide labels and reduce width (Windows 8.1)
Windows 8.1: This step applies only to Windows 8.1. For Windows 8, see step 3.
The code in these examples uses the AppBar defined in this Extensible Application Markup Language (XAML).
<Page.BottomAppBar> <AppBar x:Name="bottomAppBar" IsSticky="True"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal"> <AppBarButton Label="Save" Icon="Save"/> <AppBarButton Label="Discard" Icon="Delete"/> <AppBarButton Label="Edit" Icon="Edit"/> <AppBarButton Label="Undo" Icon="Undo"/> <AppBarButton Label="Redo" Icon="Redo"/> </StackPanel> <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right"> <AppBarButton Label="Skip Back" Icon="Previous"/> <AppBarButton Label="Skip Ahead" Icon="Next"/> <AppBarButton Label="Play" Icon="Play"/> <AppBarButton Label="Pause" Icon="Pause"/> <AppBarButton Label="Stop" Icon="Stop"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>
This app bar looks like this in an app that's 1024 pixels wide.

When the app is 320 pixels wide, the app bar looks like this by default.

The app bar button controls (AppBarButton and AppBarToggleButton) have two sizes; normal and compact. By default, they have a text label and full padding. When the IsCompact property is set to true, the text label is hidden and the padding around the buttons is reduced. The AppBarSeparator also has a compact state in which the padding is reduced. To make the app bar buttons use less space, set the IsCompact property to true.
When an app bar button isn't hosted in a CommandBar, you must manage it's IsCompact property in your code. To do this, you listen for the page's SizeChanged event, and then set the IsCompact property for each app bar button as appropriate for the new window size.
To resize buttons
- Register for the page's SizeChanged event.
- In the SizeChanged event handler, check if the page width has changed. If it has, update the layout of the AppBar.
- To update the AppBar layout, set each button's IsCompact property according to the page width. In this example, there are 10 AppBarButtons, and each is 100 DIPs wide, so if the page width is less than 1000, you need to make the buttons compact.
If you have a fixed number of buttons, you can set the IsCompact property individually on each one in code or using VisualStateManager. Or, you can loop through them, as shown here. This code assumes the app bar uses a layout with a root Panel that contains additional Panels that host the buttons.
Now, when the user make the app narrower, the buttons resize and the app bar looks like this.

Step 2: Rearrange and hide buttons (Windows 8.1)
Windows 8.1: This step applies only to Windows 8.1. For Windows 8, see step 4.
To move buttons into 2 rows
- To rearrange buttons into 2 rows, use a layout like this for your app bar. Use a root Grid with 2 rows, and 2 panels, typically StackPanels, to hold the buttons.
<AppBar> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal"> <!-- Buttons -- > </StackPanel> <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right"> <!-- Buttons -- > </StackPanel> </Grid> </AppBar>
- When the app gets too narrow to show all the buttons in one row, change the Grid.Row property value for the
rightAppBarPanelelement to 1 and change the HorizontalAlignment property of the panel to Left.This is useful if you need to keep both the primary (right) and secondary (left) buttons visible. If you don't need to keep the secondary commands visible, you can hide them as shown next.
When the app is at its narrowest, the buttons on the right move to the bottom row. The app bar looks like this.

In this example, there are 10 AppBarButtons, and each is 60 DIPs wide when its compact. If the page width is less than 600, you need to make the buttons compact and move them into 2 rows.
To hide buttons
- When the app gets too narrow to show all the buttons in one row, change the Visibility property value for the
leftAppBarPanelelement to Collapsed.When the app is at its narrowest, the buttons in the left panel are hidden. The app bar looks like this.

In this example, there are 10 AppBarButtons, and each is 60 DIPs wide when its compact. If the page width is less than 600, you need to make the buttons compact and hide the secondary commands.
Step 3: Hide labels and reduce width (Windows 8)
Windows 8: This step applies only to Windows 8. For Windows 8.1, see step 1. In Windows 8.1, AppBarButtonStyle is deprecated and replaced with AppBarButton controls.
The code in these examples uses the AppBar defined in this XAML.
<Page.BottomAppBar> <AppBar x:Name="bottomAppBar" IsSticky="True" Loaded="appBar_Loaded" Unloaded="appBar_Unloaded"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal"> <Button Style="{StaticResource SaveAppBarButtonStyle}"/> <Button Style="{StaticResource DiscardAppBarButtonStyle}"/> <Button Style="{StaticResource EditAppBarButtonStyle}"/> <Button Style="{StaticResource UndoAppBarButtonStyle}"/> <Button Style="{StaticResource RedoAppBarButtonStyle}"/> </StackPanel> <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource SkipBackAppBarButtonStyle}"/> <Button Style="{StaticResource SkipAheadAppBarButtonStyle}"/> <Button Style="{StaticResource PlayAppBarButtonStyle}"/> <Button Style="{StaticResource PauseAppBarButtonStyle}"/> <Button Style="{StaticResource StopAppBarButtonStyle}"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>
This app bar looks like this in an app that's 1024 pixels wide.

When the app is snapped, the app bar looks like this by default.

To make the app bar buttons use less space, the AppBarButtonStyle base Style includes VisualStates that hide the button's label and reduce its width in the Snapped and FullScreenPortrait views.
The VisualStates are defined in the AppBarButtonStyle resource, but by default, controls don’t know about the app's view state. To make an app bar button change state based on the app's view state, you must provide additional code to make the Button aware of app view state changes.
The code you provide depends on whether or not the page that hosts the app bar is derived from the LayoutAwarePage class.
LayoutAwarePage class. LayoutAwarePage is an implementation of Page that enables important functionality for Windows Store app development like view state management, basic navigation, and app session state management. For more info, see
C#, VB, and C++ item templates.In a LayoutAwarePage, any control can invoke StartLayoutUpdates to register to receive visual state changes that correspond to app view state changes. This means that an app bar button can go to its Snapped view state when the app view state changes to Snapped.
To resize buttons in a LayoutAwarePage
- If your AppBar has only 1 or 2 commands, you can register and unregister them individually in their Loaded and Unloaded events, like this.
<Button Style="{StaticResource PlayAppBarButtonStyle}" Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"/>
- If your app bar has more buttons, it’s better to register and unregister them all in code when the app bar is loaded and unloaded, as shown here.
This code assumes the app bar uses a layout with a root Panel that contains additional Panels that host the buttons. Each button is registered to receive state changes when the AppBar is loaded, and unregistered when the app bar is unloaded.
The Loaded and Unloaded events are registered in the AppBar XAML shown previously.
If the page that hosts the app bar is not derived from LayoutAwarePage, you must provide functionality in your page to change the Button's view state. To do this, you listen to app view state changes, and then call ViewStateManager.GoToState for each app bar button when the app's view state changes.
To resize buttons in a blank Page
- Register for the window's SizeChanged event.
- In the SizeChanged event handler, check if the app bar is open. If it is, update each button's view state.
This code handles the case where the app view state changes while the app bar is open.
- Add a handler for the AppBar's Loaded event. In the Loaded event handler, update each button's view state.
This code handles the case where the app bar is opened after the app view state changes.
This Loaded event is registered in the AppBar XAML shown previously.
- To update each button's view state, call VisualStateManager.GoToState and pass in the app's current view state.
If your app bar has only 1 or 2 commands, you can name them and call GoToState on them individually, like this.
If your app bar has more buttons, it’s better to loop through them, as shown here. This code assumes the app bar uses a layout with a root Panel that contains additional Panels that host the buttons.
Now, when the app is rotated to portrait orientation and the buttons resize, the app bar looks like this.

Step 4: Rearrange and hide buttons (Windows 8)
Windows 8: This step applies only to Windows 8. For Windows 8.1, see step 2. In Windows 8.1, AppBarButtonStyle is deprecated and replaced with AppBarButton controls.
Snapped VisualState as described in the previous step, with no text label and reduced width.Snapped view, the app bar is wide enough to show only 5 buttons in a row. If you have more than 5 buttons in the app bar, you must arrange the buttons in 2 rows, hide some buttons, or do both.
To move buttons into 2 rows
- To rearrange buttons into 2 rows, use a layout like this for your app bar. Use a root Grid with 2 rows, and 2 panels, typically StackPanels, to hold the buttons.
<AppBar> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal"> <!-- Buttons -- > </StackPanel> <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right"> <!-- Buttons -- > </StackPanel> </Grid> </AppBar>
- In the
SnappedVisualState, change the Grid.Row property value for therightAppBarPanelelement to 1 and change the HorizontalAlignment property of the panel to Left.When the app is snapped, the buttons on the right move to the bottom row. The app bar looks like this.

<VisualStateManager.VisualStateGroups> ... <VisualState x:Name="Snapped"> <Storyboard> ... <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" Storyboard.TargetProperty="HorizontalAlignment"> <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/> </ObjectAnimationUsingKeyFrames> ... </Storyboard> </VisualState> ... </VisualStateManager.VisualStateGroups>
To hide buttons
- In the
SnappedVisualState, change the Visibility property value for theleftAppBarPanelelement to Collapsed.When the app is snapped, the buttons in the left panel are hidden. The app bar looks like this.

<VisualStateManager.VisualStateGroups> ... <VisualState x:Name="Snapped"> <Storyboard> ... <ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftAppBarPanel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> ... </VisualStateManager.VisualStateGroups>
Remarks
You can hide less important commands in the Snapped view by hiding a whole panel, as shown, or by hiding individual buttons in the same way. To hide an individual button, you must name it so you can reference it in the VisualStateManager.