UWP CommandBar dynamic Size and Position

Question

In my App, i am using a CommandBar with multiple AppBarButtons, on the top of the app. Now if i resize the window, i want that the AppBarButtons go to CommandBar.SecondaryButtons, if they does not fit anymor to the whole width of the window. As an example, in the default weather app, there is such an effect.

Second, i want to switch from the CommandBar on the Top, to a CommandBar on the bottom, like a CommandBar inside Page.BottomAppBar, on specific device families. I dont know, if i should set two CommandBars in my xaml and show the one, which meets the conditions, or if there is a better way. I like to do as much as possible with VisualStates, but i dont know how to achieve this.

I know these are two questions, but both points to the CommandBar, so i hope someone can help me?

Best regards

Answer 1

For your first question: You can setup the buttons in Primary and Secondary sections of the CommandBar. Then use VisualStates to toggle the Visibility of them depend on app's width. OR you can do it in code entirely with SizeChanged event of the page.

Second question, lets create something like

<Page>
    <Grid>
<!-- row definition here -->
<!-- Row 1 -->
<!-- Row 2 -->

<!-- Content -->
<Grid Grid.Row="0"/>

<!-- app bar -->
<CommandBar Grid.Row="1"/>
    </Grid>
</Page>

Change the attached property Grid.Row to the desired number using VisualStates similar to question one.

Answer 2

As an example, in the default weather app, there is such an effect.

You can use VisualStateManager to manages visual states and the logic for transitions between visual states for controls and use the Visibility property of the AppBarButton to show or hide it.

For example:

I add two AppBarButton in the CommandBar.PrimaryCommands and two AppBarButton in the CommandBar.SecondaryCommands. When the width of window less than 720, I set the Visibility property of the AppBarButton in CommandBar.PrimaryCommands to Collapsed. When the width of window large than 720 or equles to 720, I set the Visibility property of the AppBarButton in CommandBar.SecondaryCommands to Collapsed.

The XAML code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PrimaryHome.Visibility" Value="Collapsed"/>
                    <Setter Target="PrimaryAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SecondHome.Visibility" Value="Collapsed"/>
                    <Setter Target="SecondAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton Name="SecondHome" Icon="Home" Label="Home" />
            <AppBarButton Name="SecondAdd" Icon="Add" Label="Add" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.TopAppBar>

Second, i want to switch from the CommandBar on the Top, to a CommandBar on the bottom, like a CommandBar inside Page.BottomAppBar, on specific device families.

You can add the Page.TopAppBar and the Page.BottomAppBar in your XAML. And use VisualStateManager to manage which CommandBar should display on the page.

For example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TopCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="BottonCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" Visibility="Collapsed" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.TopAppBar>
<Page.BottomAppBar>
    <CommandBar x:Name="BottonCommands" Visibility="Collapsed">
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="BottonPrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="BottonPrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>