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](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.adaptivetrigger.aspx) — Mike Eason, Nov 04 '15 at 14:26
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 `` ? — ALkyD, Nov 04 '15 at 17:51

score 0 · Answer 1 · answered Nov 05 '15 at 16:03

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)

Your example is working but how can I tell VisualState to put `` in `` or in `` with the AdaptiveTriggers ? It's not just changing a property, but changing the parent node of CommandBar... — ALkyD, Nov 05 '15 at 22:44
Ah, I haven't tried it that way, but it seems that you can change Parent by manipulating collections, mentioned here. (Parent is read-only otherwise.) https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.parent — Amanda Lange, Nov 06 '15 at 00:14
@ALkyD, one thing you can try is just create both `TopAppBar` and `BottomAppBar` with the same buttons, and use `VisualState` to change the `Visibility` property between the two.. — dub stylee, Mar 29 '16 at 00:08

Windows 10 UAP : Binding a Command bar

1 Answers1