AppBar with AppBarUtils navigation not working

Question

I have this bug in my solution:

Exception

 An unhandled exception of type 'System.NullReferenceException' occurred in AppBarUtils.dll

XAML

 <controls:Pivot Background="#FF10662B" Foreground="White" BorderBrush="Black" >
            <i:Interaction.Triggers>
                <abu:SelectedPivotItemChangedTrigger>
                    <abu:SwitchAppBarAction>
                        <abu:AppBar Id="0">
                            <abu:AppBar.MenuItems>
                                <abu:AppBarMenuItem Text="Załóż konto" Command="{Binding                        
                                 NavigateCommand,Mode=TwoWay}"/>
                            </abu:AppBar.MenuItems> 

                            <abu:AppBarButton IconUri="{Binding AddButtonIcon}"
                                                    Text="Navigation" >
                                <ec:NavigateToPageAction TargetPage="/LoginPage.xaml"/>
                            </abu:AppBarButton>

                        </abu:AppBar>

                    </abu:SwitchAppBarAction>
                </abu:SelectedPivotItemChangedTrigger>
            </i:Interaction.Triggers>

             <--rest code with other pivots -->


</phone:PhoneApplicationPage>

Maybe I can use another way use navigation to page? How I can navigate to different page with mvvm?

Answer 1

You can create ApplicationBar for certain pivot items of pivot page like this using id.If id =0,it will take automatically pivot Page(Item) 0 .By using this,you can choose which all AppBars has to be in whole pivot pages and in selective pivot pages(Items).

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

For navigation using mvvm,you can use messenger.

If you are using MVVM architecture,then you can pass navigationPage after registering using Messenger. Create a model class (say NavigateToPageMessage) with a string(say PageName) variable. You want to pass string from homepage.xaml to newpage.xaml,then in Homepage viewmodel just send the message like this under the command you binded (say HomeNavigationCommand)

private void HomeNavigationCommandHandler()
        {
            Messenger.Default.Send(new NavigateToPageMessage {PageName = "newpage"});
        }

In the newpage Viewmodel,you should register the messenger like this,

Messenger.Default.Register<NavigateToPageMessage>(this, (action) => ReceiveMessage(action));

 private object ReceiveMessage(NavigateToPageMessage action)
        {
            var page = string.Format("/Views/{0}.xaml", action.PageName);           
            NavigationService.Navigate(new System.Uri(page,System.UriKind.Relative));
            return null;
        }

//Assuming your views are in View Folder