Reputation: 1
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
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
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