Windows 10 UAP : Binding a Command bar

Question

I'm making an UAP Windows 10 App. Like app News from Microsoft, i'm trying to put the CommandBar in top on the page in desktop view, and in bottom of the page in mobile view.

How could I do this ? I think I have an independant <CommandBar xxx> with empty <Page.TopAppBar> and <Page.BottomAppBar>. And depending of the size of the view, I attach the CommandBar to TopAppBar or BottomAppBar... ?

Having ideas ? Thanks you.

Maybe try creating a CommandBar in each and toggle visibility based on screen height? I'm fairly certain you can achieve this in XAML using adaptive UI. See here — Mike Eason
If I use two CommandBar and toggle visibility following screen size, I will need to add the same items to both CommandBar. Is there a way to add these items once in the code-behind and bind both CommandBar, somewhere like <CommandBar Content="{Binding xxx}"/> ? — ALkyD

Amanda Lange Amanda Lange · Accepted Answer · 2015-11-05T16:03:11

You can use the VisualState class to adjust alignment of things depending on the size of the screen, using the StateTriggers property. Here's some documentation about the class including some sample code here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstate.statetriggers.aspx

This sample code demonstrates the use: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlStateTriggers

Simple implementation:

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="myPanel.VerticalAlignment" Value="Bottom" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="myPanel" VerticalAlignment="Top">
        <TextBlock Text="This is a block of text for an example. " 
                   Style="{ThemeResource BodyTextBlockStyle}"/>

    </StackPanel>

(that's this example but with the values changed for your situation. https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstate.statetriggers.aspx)

Windows 10 UAP : Binding a Command bar

1 Answers