Reputation: 487
I need some help adding multiple app bars on a single page. Currently I have Page A. In A there's meant to be two appbars. One for when the user focuses on textboxes (this will show all the editing tools etc) other one for when the user looses focus of the textboxes (this is for general controls like saving and deleting etc).
I don't want to use one app bar for all the controls. I want it separately so it's more neater. I'm aware of this link but In order to do this I need to add it into the App.xaml page. Is there a way I can add it on Page A's xaml or any code to make it work. I tried the method below but didn't work:
<phone:PhoneApplicationPage.Resources>
<shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
<shell:ApplicationBar x:Key="AppBar2" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.Resources>
Thanks!
Upvotes: 1
Views: 245
Reputation: 29790
You should remember where you define your Resources. Look that in the link you have provided the Resources are connected to whole App:
Application.Current.Resources["AppBar1"]);
You code will work if you had defined your Resources for example in App.xaml as Application.Resources
- then your defined AppBars will be available for all Pages.
In your code you have defined PhoneApplicationPage.Resources
, thus they are available only for that particular Page. you can use them on this Page for example like this:
ApplicationBar = this.Resources["AppBar1"] as ApplicationBar;
Upvotes: 1
Reputation: 7122
Simple enough, add them to the page's resources:
<phone:PhoneApplicationPage.Resources>
<shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" Click="Button1_Click" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="MenuItem1_Click" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
<shell:ApplicationBar x:Key="AppBar2" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" Click="Button1_Click" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" Click="Button2_Click" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="MenuItem1_Click" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" Click="MenuItem2_Click" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.Resources>
Upvotes: 2