Windows Phone - Pivot and parent Page - xaml

Question

I have a PivotControl inside a PPhoneAppplicationPage. Ideally I'd like to show the appbar items from the page at all times, and merge them with items defined in the UserControl which shows in each PivotItem. I've tried a few different things, but only the outer (the PhoneApplicationPage) appbar seems to show.

Answer 1

The AppBar items are owned by the Page, not the PivotItems. But you can add/remove then dynamically as needed:
Your Page has an ApplicationBar property which has a Buttons and a MenuItems property. Add and remove buttons/menuitems there programmatically as needed whenever a new PivotItem gets selected.

Answer 2

You can use different appbars for each pivot item in a pivot. try the code below
<phone:Pivot>
<i:Interaction.Triggers>
<appBarUtils:SelectedPivotItemChangedTrigger>
<appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SelectionMapping SourceIndex="0" TargetIndex="0"/>
</appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SwitchAppBarAction>
<appBarUtils:AppBar Id="0" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="1" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="2" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.money.png" Text="collection" Command="{Binding CollectionPageCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="3" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton x:Name="ConfirmationAppBarButton" IconUri="/Assets\Images\appbar.cancel.rest.png" Text="cancel" Command="{Binding OrderCancelButtonCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}" IsEnabled="{Binding Model.EnableCheck,Mode=TwoWay}" />
</appBarUtils:AppBar>
</appBarUtils:SwitchAppBarAction>
</appBarUtils:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
</phone:Pivot>