CODEWITHSUNDEEP
microsoft-metrowinrt-xaml
Anitesh Kumar Bhatt
Anitesh Kumar Bhatt

Reputation: 1

Displaying AppBar at the bottom of Page

I am using C# and XAML to develop a Metro-style App with Visual studio 2011 Beta. I want to display an AppBar at the bottom of my Page. According to a few sources, I will have to write AppBar Control tag inside the <Page.BottomAppBar>...</Page.BottomAppBar> tags.

But while doing so, an error is being generated on the XAML page, saying:

BottomAppBar is not recognised for Page.

Please help me with this. Thank you.

Upvotes: 0

Views: 3367

Answers (2)

Carmelo Dascola
Carmelo Dascola

Reputation: 55

This is an example of BottomAppBar:

<Page.BottomAppBar>
    <AppBar x:Name="MyappBar" Padding="10,0,10,0"
            BorderThickness="0"
            Opened="AppBar_Opened" Closed="AppBar_Closed" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="btnEdit" Style="{StaticResource EditAppBarButtonStyle}"/>
                <Button x:Name="btnSave" Style="{StaticResource SaveAppBarButtonStyle}"/>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <Button x:Name="btnPhoto" Style="{StaticResource PhotoAppBarButtonStyle}" Click="CapturePhoto_Click" />
                <Button x:Name="btnHelp" Style="{StaticResource HelpAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Try to put it after </Page.Resources> in your xaml file. Remember to uncomment the buttons styles in StandardStyles.xaml in Common folder.

Upvotes: 2

paiden
paiden

Reputation: 887

UPDATE: Altough the approach initially posted works in most cases it is not recommended as problems arise with appbar animation, hit testing... Instead Page.TopAppBar and Page.BottomAppBar as stated in http://social.msdn.microsoft.com/Forums/en/winappswithcsharp/thread/1044f2fb-bc55-4391-ac82-02c5d5e75970 should be used.

You just have to set the Vertical alignment of the appbar to bottom:

<AppBar Grid.Row="1" HorizontalContentAlignment="Stretch" Height="88"   VerticalContentAlignment="Stretch" VerticalAlignment="Bottom">
...
</Appbar>

Additionally ensure the appbar is embedded in the element at the bottom of the screen. That means for the standard page (a grid with 2 rows) the appbar has to be embedded in the second row (Grid.Row=1).

The last thing is that you have to ensure that the appbar is topmost in Z-order. To do so you have to add the bottom appbar at the end of the xaml file. That means if you have something like:

<GridView Grid.Row="1">...</GridView>

you have to order the controls linke this:

<GridView Grid.Row="1">...</GridView>
<AppBar Grid.Row="1">...</AppBar>

Upvotes: 2

Related Questions