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.