How to load pages inside split view content's frame passing parameters on UWP?

Daniel picture Daniel · Dec 14, 2015 · Viewed 9.2k times · Source

Here is my MainPage.xaml

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BibleApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Domain="using:BibleApp.Domain"    
x:Class="BibleApp.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <RelativePanel>
            <Button Name="HamburgerButton" 
                    FontFamily="Segoe MDL2 Assets" 
                    Content="&#xE14C;" FontSize="14" 
                    Click="HamburgerButton_Click"/>
        </RelativePanel>

        <SplitView Name="MySplitView" 
                   Grid.Row="1" 
                   DisplayMode="CompactOverlay" 
                   OpenPaneLength="200" 
                   CompactPaneLength="34" 
                   HorizontalAlignment="Left">
            <SplitView.Pane>
                <ListBox Name="IconsListBox" SelectionMode="Single" SelectionChanged="IconsListBox_SelectionChanged">
                    <ListBoxItem Name="Biblia">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE128;" FontSize="18"/>
                            <TextBlock Text="Bíblia" FontSize="12" Margin="15,0,0,0"/>
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="PesquisarPalavraChave">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE11A;" FontSize="18"/>
                            <TextBlock Text="Pesquisar palavra chave" FontSize="12" Margin="15,0,0,0"/>
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="PesquisarAssunto">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE773;" FontSize="18"/>
                            <TextBlock Text="Pesquisar assunto" FontSize="12" Margin="15,0,0,0"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="MyFrame"/>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

Here is it's code behind of MainPage:

private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    MyFrame = this.Frame;
    if (Biblia.IsSelected) { Frame.Navigate(typeof(View.BiblePage), bible);}
    else if (PesquisarPalavraChave.IsSelected) {Frame.Navigate(typeof(View.SearchWordPage));}
    else if (PesquisarAssunto.IsSelected) { Frame.Navigate(typeof(View.SearchMatterPage)); }    
}

Here is BiblePage OnNavigatedTo event:

protected override void OnNavigatedTo(NavigationEventArgs e)
{            
    bible = (Bible)e.Parameter;
}

The problem is that BiblePage's "OnNavigatedTo" evento is not triggered so I can't transport my "bible" variable from MainPage to BiblePage.

When I do this procedure outside the splitview's content it works perfectly.

How can I load xaml pages inside my MainPage's splitview content passing parameters?

Answer

Jean-S&#233;bastien Dupuy picture Jean-Sébastien Dupuy · Dec 14, 2015

Please perform the following test // just tested and didn't get any issue.

1/ MainPage.xaml

<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SplitView DisplayMode="Inline" Background="Black" IsPaneOpen="True" OpenPaneLength="360" >
        <SplitView.Pane>
            <Button Content="GoToPage" Click="GoToPage_Click" Foreground="White"/>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame x:Name="contentFrame"/>
        </SplitView.Content>
    </SplitView>
</Grid>
</Page>

2/ MainPage.xaml.cs

namespace App3
{
/// <summary>
/// Une page vide peut être utilisée seule ou constituer une page de destination au sein d'un frame.
/// </summary>
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void GoToPage_Click(object sender, RoutedEventArgs e)
    {
        contentFrame.Navigate(typeof(SecondPage), new Params() { MyProperty = 42 });
    }
}

public class Params
{
    public int MyProperty { get; set; }
}
}

3/ SecondPage.xaml.cs

namespace App3
{

public sealed partial class SecondPage : Page
{
    public SecondPage()
    {
        this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        Params result = (Params)e.Parameter;
        base.OnNavigatedTo(e);  
    }
}
}