Search code examples
c#gridviewwinrt-xamltemplate10

Odd Back Stack Behavior


I am starting a new Windows 10 universal app using Template10. I added a GridView with a couple of items, which have as a property the Type of another Page to navigate to.

I created a new View and just added a header, like so:

<controls:PageHeader x:Name="PageHeader" Text="Payees">
<!--  place stretched, across top  -->
    <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
    <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
    <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
    <!--  secondary commands  -->
    <!--<controls:PageHeader.SecondaryCommands>

    </controls:PageHeader.SecondaryCommands>-->
</controls:PageHeader>

I have attached a behavior to the ItemClick that looks like this:

public void GridViewItemClick(object sender, object parameter)
{
    var arg = parameter as Windows.UI.Xaml.Controls.ItemClickEventArgs;

    var item = arg?.ClickedItem as AppPage;
    if (item?.TargetPage != null) NavigationService.Navigate(item.TargetPage);
}

Navigating to the new page works fine, but for some reason there is no back button in the header as there is in the other pages. If I switch to use the shell back button, then it will let me navigate back from the new page.

I changed on of the grid items to navigate to the existing SettingsPage as a test, and the back button is there in the header. However, if I navigate to the settings page multiple times, it adds a new instance on the back stack it seems. For example, the first time I navigate, then I click back once and I'm on the main page. If I go to settings again (via GridView), then I click back twice to get back to the main page, etc.

If I navigate to the settings page using the default "..." menu and going to one of the settings pages, then the back stack behaves as expected. I'm not entirely sure what I could be doing wrong since there isn't anything fancy going on here.

EDIT

I have determined that this behavior is unique to navigating from a GridView. I created a test Button that navigates to my newly created page and the back stack behaves as expected, other than I only get a back arrow if I have the "use shell back button" setting enabled.

Here is what the attached behavior looks like in XAML, if it is of any help:

<GridView x:Name="MainGridView"
          IsItemClickEnabled="True"
          ItemsSource="{Binding AppPages}">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="ItemClick">
            <core:CallMethodAction MethodName="GridViewItemClick" TargetObject="{Binding Mode=OneWay}" />
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>
....
</GridView>

Solution

  • You need the Frame in your header.

    <controls:PageHeader x:Name="PageHeader" 
        Text="Payees" Frame="{x:Bind Frame}" />