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.