Collapse or make visible a custom tool - bindable application bar - windows-phone-7

Question

I'm currently making a WP7 application with a pivot control. I am making use of a bindable application bar (not the default application bar) because I'm using MVVM in my application. I want to change the application bar displayed, depending on the pivot item I am currently on.
Because I'm using a custom application bar tool, I figured that I could collapse or make visible each application bar depending on which pivot item I'm on, however the application bar will not collapse and only the workout application bar shows in my application (also, is this because I define the workout bar last in my XAML?).
Will this type of tool not collapse?
XAML:
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<controls:Pivot Title="{Binding Name}" LoadingPivotItem="pivotMain_LoadingPivotItem">
<controls:PivotItem Header="Details" Name="detailsItem">
<view:EditClientDetails/>
</controls:PivotItem>
<controls:PivotItem Header="Workouts" Name="workoutItem">
<ListBox>
<ListBoxItem>
<view:AddLunch/>
</ListBoxItem>
</ListBox>
</controls:PivotItem>
<controls:PivotItem Header="Diets" Name="dietItem">
<ListBox>
<ListBoxItem>
<view:AddDinner />
</ListBoxItem>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
<!--
<Button FontSize="30" FontFamily="Segoe WP" Content="Add Workout" Height="80" HorizontalAlignment="Left" Margin="25,500,0,0" Name="addWorkout" VerticalAlignment="Top" Width="400" Click="addWorkout_Click" />
<Button FontSize="30" FontFamily="Segoe WP" Content="Add Diet" Height="80" HorizontalAlignment="Left" Margin="25,414,0,0" Name="addDiet" VerticalAlignment="Top" Width="400" Click="addDiet_Click" />
<Button FontSize="30" FontFamily="Segoe WP" Content="Edit Details" Height="80" HorizontalAlignment="Left" Margin="25,328,0,0" Name="editDetails" VerticalAlignment="Top" Width="400" />
-->
<Preview:BindableApplicationBar x:Name="AppBarEdit">
<Preview:BindableApplicationBarIconButton
Command="{Binding AddClientCommand}"
IconUri="/Images/appbar.add.rest.png"
Text="Edit" />
<Preview:BindableApplicationBarIconButton
Command="{Binding SaveClientCommand}"
IconUri="/Images/appbar.check.rest.png"
Text="Save Client" />
</Preview:BindableApplicationBar>
<Preview:BindableApplicationBar x:Name="AppBarDiet">
<Preview:BindableApplicationBarIconButton
Command="{Binding GenerateDietCommand}"
IconUri="/Images/appbar.add.rest.png"
Text="Generate" />
<Preview:BindableApplicationBarIconButton
Command="{Binding SaveDietCommand}"
IconUri="/Images/appbar.check.rest.png"
Text="Save Diet" />
</Preview:BindableApplicationBar>
<Preview:BindableApplicationBar x:Name="AppBarWorkout" Margin="-157,-70,157,70">
<Preview:BindableApplicationBarIconButton
Command="{Binding GenerateWorkoutCommand}"
IconUri="/Images/appbar.add.rest.png"
Text="Generate" />
<Preview:BindableApplicationBarIconButton
Command="{Binding SaveWorkoutCommand}"
IconUri="/Images/appbar.check.rest.png"
Text="Save Workout" />
</Preview:BindableApplicationBar>
</Grid>
Code (just in code behind at the moment for testing purposes):
private void pivotMain_LoadingPivotItem(object sender, PivotItemEventArgs e)
{
if (e.Item == workoutItem)
{
AppBarEdit.Visibility = System.Windows.Visibility.Collapsed;
AppBarWorkout.Visibility = System.Windows.Visibility.Visible;
AppBarDiet.Visibility = System.Windows.Visibility.Collapsed;
}
else if (e.Item == dietItem)
{
AppBarEdit.Visibility = System.Windows.Visibility.Collapsed;
AppBarWorkout.Visibility = System.Windows.Visibility.Collapsed;
AppBarDiet.Visibility = System.Windows.Visibility.Visible;
}
else if (e.Item == detailsItem)
{
AppBarEdit.Visibility = System.Windows.Visibility.Visible;
AppBarWorkout.Visibility = System.Windows.Visibility.Collapsed;
AppBarDiet.Visibility = System.Windows.Visibility.Collapsed;
}

Answer 1

The WP7 UI supports a single ApplicationBar, which is set via the PhoneApplicationPage.ApplicationBar property, the bindable app-bar is a wrapper over the framework class, so it still has this same constraint.
For what you are trying to do, I would just write a bit of code-behind. This does not 'break' the MVVM pattern.

Answer 2

Try setting the IsVisible property of the BindableAppBar. You can have multiple BindableAppBar . However Only one will be displayed at a time. So if you have set IsVisible of two AppBars to false, then the third will be displayed if it is set to True.
<bindableAppBar:BindableAppBar IsVisible="{Binding IsVisible1}">
<bindableAppBar:BindableAppBarButton IconUri="/Assets/AppBar/AppIcon1.png" Text="Text1"/>
</bindableAppBar:BindableAppBar>
<bindableAppBar:BindableAppBar IsVisible="{Binding IsVisible2}">
<bindableAppBar:BindableAppBarButton IconUri="/Assets/AppBar/AppIcon2.png" Text="Test2"/>
</bindableAppBar:BindableAppBar>