UWP Win10 – introduction to page navigation.

28 בSeptember 2016

אין תגובות

The Application block of Win10 app constructed as following:
Application > Window > Frame > Page
While this page  can be any page you like.
Commonly use pattern is leave the main page as container and inside it use internal page as Content place holder.
Lets build the solution files than continue on navigation implementation.

image

I simply create solution folder named Pages with some pages inside,
Now lets build the MainPage xaml:

<Grid Background="LightCyan">

        <Grid.RowDefinitions>

            <RowDefinition Height="1*"/>

            <RowDefinition Height="8*"/>

        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">

            <Button Content="Home" Name="homeBtn" Click="homeBtn_Click" Margin="5"/>

            <StackPanel>

                <TextBlock Text="type parameter for home page"/>

                <TextBox  Name="txtparmater" Height="30"  />

            </StackPanel>

            <Button Content="&lt;"  Name="leftBtn" Click="leftBtn_Click"  Margin="5"/>

            <Button Content=">" Name="rightBtn" Click="rightBtn_Click"  Margin="5"/>

        </StackPanel>

       <Frame Grid.Row="1"  Name="mainFrame" BorderThickness="3" BorderBrush="Red" />

    </Grid>

That give us the following look:

image

Now we make those buttons to work,
We gonna use the buit in navigation ability of Frame as this.
Frame.Navigate(x page type),
The Navigate function is built for release us from boilerplate of Creating instances of pages and initiate them into frame Content.
Frame type also provide built in option of Goback an GoForward but those function are not in my favorite list so I skip it for this post.
Yet, the Navigate function by default will create new Instance of the target type (page) by every calling to Navigate (occasionally thinking of performance and cache memory )
So if holding state is necessary we must set specific page  as NavigationCacheMode.Enabled.
Another important point is parameters,
The Navigate function support param transformation but to recive it we must override the OnNavigatedTo function per page that might recive parameters when got navigated.

the entire Codebehind of the main page is as follow:

public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

            pages[0] = new Pages.Page1();

        // ** settings specific page as cache mode to save the state

            pages[1] = new Pages.Page2() { NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled };

            pages[2] = new Pages.Page3();

        }


        int currentPageIndex = 0;


        // ** all pages reference 

        Page[] pages = new Page[3];


        private void rightBtn_Click(object sender, RoutedEventArgs e)

        {

            if (currentPageIndex < pages.Length - 1)

            {

                currentPageIndex++;

            }

            mainFrame.Navigate(pages[currentPageIndex].GetType());

        }


        private void leftBtn_Click(object sender, RoutedEventArgs e)

        {

            if (currentPageIndex > 0)

            {

                currentPageIndex--;

            }

            mainFrame.Navigate(pages[currentPageIndex].GetType());

        }


        // ** Navigate with parameters

        private void homeBtn_Click(object sender, RoutedEventArgs e)

        {

            mainFrame.Navigate(pages[0].GetType(), txtparmater.Text);

        }

As seen at navigation to first page (home button) we using parameters,
So this page is exceptional and have the next construction:

public sealed partial class Page1 : Page

    {

        public Page1()

        {

            this.InitializeComponent();


        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            base.OnNavigatedTo(e);

            if(e.Parameter != null)

            paramInput.Text = e.Parameter.ToString();

        }


    }

The paramInput keyword is a Textblock control on the page xaml surface.
And the other Pages content is empty for this demo.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *