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>
You need the Frame in your header.
<controls:PageHeader x:Name="PageHeader"
Text="Payees" Frame="{x:Bind Frame}" />