locked
How to place a Page.BottomAppBar on top of the page content in a Universal app

    Question

  • Hi,

    Is there a way of placing a Page.BottomAppBar on top of the page content in a Universal app? This was easy to do back in WP7 but it looks like they are trying to avoid the CommandBar covering any content UI in the page; however, this is exactly what I want. Note that I mean to show the CommandBar over the content, not to place the CommandBar in the upper part of the page.

    I have a CaptureElement filling the whole Grid, and unfortunately, the CommandBar doesn't hover on top of the camera preview; the CommandBar is instead placed after the preview, constraining the size of the CaptureElement:

    <Page
        x:Class="MyApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Name="MainGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <CaptureElement Name="CameraPreview" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill"/>
        </Grid>
    
        <Page.BottomAppBar>
            <CommandBar Opacity="0.8" Background="DarkSlateBlue">
                <CommandBar.PrimaryCommands>
                    <AppBarButton x:Uid="Camera" Icon="Camera" Label="Take photo"/>
                    <AppBarButton x:Uid="Albums" Icon="Pictures"  Label="Load photo"/>
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    </Page>

    I added a semi-transparency to the CommandBar so that the camera preview can be seen through it, but for some reason the camera won't expand itself under the CommandBar.

    Any ideas?

    Thanks!



    • Edited by irodrisa Wednesday, August 13, 2014 11:23 PM
    Wednesday, August 13, 2014 11:16 PM

Answers

  • The ClosedDisplayMode property is also not available in Universal apps (when sharing the CommandBar XAML code for both Windows a Windows Phone projects).

    Thanks for your help, I ended up removing the Command bar altogether, it's simply not worth using it anymore.


    Monday, August 18, 2014 6:13 PM

All replies

  • Hi irodrisa,

    Why not use <Page.TopAppBar> instead? See this for more information: Quickstart: Adding app bars and TopAppBar property

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, August 14, 2014 8:37 AM
    Moderator
  • Hi James,

    The <Page.TopAppBar> control is only a Windows 8.1 control, not a Windows Phone 8.1 control, and therefore cannot be used in a Universal App (I might have to clarify that my MainPage.xaml is shared by both projects in my Universal app so that I have 100% of code reused).

    I take that is not possible anymore to have a BottomAppBar on top of/hovering the page content? I don't even understand why this decision of removing this functionality was made...

    Thanks.


    • Edited by irodrisa Thursday, August 14, 2014 9:07 PM
    Thursday, August 14, 2014 4:32 PM
  • Is it at least possible to minimize the task bar so that only shows the little line at the bottom with the three dots on the right? The code above shows the primary buttons even in its collapsed state.

    I'd like to replicate the CommandBar that the Bing News app has, for example.

    Thanks again!

    Friday, August 15, 2014 12:53 AM
  • Hi irodrisa,

    Seems top bar is not possible with windows phone app.

    For your question: yes, we can minimize the bottomappbar by following settings:

        <Page.BottomAppBar>
            <CommandBar Opacity="0.8" Background="DarkSlateBlue" ClosedDisplayMode="Minimal">
                <CommandBar.PrimaryCommands>
                    <AppBarButton x:Uid="Camera" Icon="Camera" Label="Take photo"/>
                    <AppBarButton x:Uid="Albums" Icon="Pictures"  Label="Load photo"/>
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, August 15, 2014 5:58 AM
    Moderator
  • The ClosedDisplayMode property is also not available in Universal apps (when sharing the CommandBar XAML code for both Windows a Windows Phone projects).

    Thanks for your help, I ended up removing the Command bar altogether, it's simply not worth using it anymore.


    Monday, August 18, 2014 6:13 PM