How can I hide an Application Bar on certain Pivot Pages in Windows Phone 8

Question

I think this has a trivial answer but I'm not getting it. Basically I have a Windows Phone 8 app that contains a Pivot, and application bar. I want to hide the application bar when a certain page in the Pivot is navigated to.

What I did was add the following code in the Pivot_SelectionChanged event:

AppBar.IsVisible = !((((Pivot)sender).SelectedIndex) == 2);

So when the 3rd page is shown, the Application Bar is hidden, and should be shown when the 3rd page is navigated away from. However, when I run the app, I get a NullReference error for the AppBar.

I tried to put it inside Dispatcher.BeginInvoke:

Dispatcher.BeginInvoke(() => {    
      AppBar.IsVisible = !((((Pivot)sender).SelectedIndex) == 2);
});

It works for the first few swipes, but on causes a NullReference exception on the third page.

Am I totally on the wrong track or is there an easier way to do this?

look at the http://stackoverflow.com/questions/6007721/is-it-possible-to-show-application-bar-for-one-pivot-item-only — Vovich, Sep 04 '13 at 06:58
@Vovich ah yes I saw that post. however, I didn't realize that the ApplicationBar isn't a user-defined name. And I also thought there is another (and different) way of doing this in WP8. But thanks for pointing that out! — Devmonster, Sep 04 '13 at 10:58

score 8 · Accepted Answer · answered Sep 03 '13 at 07:29

8

Don't use the name given by you to the ApplicationBar, use ApplicationBar property of the page instead:

ApplicationBar.IsVisible = !((((Pivot)sender).SelectedIndex) == 2);

i.e. Replace AppBar with ApplicationBar

answered Sep 03 '13 at 07:29

anderZubi

6,414
5
37
67

As simple as that. Thank you! – Devmonster Sep 03 '13 at 07:43

score 1 · Answer 2 · answered Nov 29 '13 at 05:29

You can create application bar for certain pivot items of pivot page like this using id.If id =0,it will take automatically pivot page 0.Dont forgot to use appBarUtils.You can find here .By using this,you can choose which all appbars has to be in whole pivot pages and in selective pivot pages.

<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>

score 0 · Answer 3 · answered Nov 29 '13 at 06:26

This is a really awesome app bar extension to Caliburn.micro framework. It will let you handle app bar visibility and structure from ViewModel, not Code-behind.

https://github.com/kamranayub/CaliburnBindableAppBar

If you havent tried it, I would strongly recommend taking a look at Caliburn.micro for Windows Phone 8. It really does a great job simplifying WP8 development.

How can I hide an Application Bar on certain Pivot Pages in Windows Phone 8

3 Answers3