Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
54 lines (38 sloc) 2.1 KB


Creating a foreground application

Introduction

Now we will create a blank foreground application. Features will be added as we progress through other tutorials.

Using the blank app template

Right click your solution and choose Add > New Project.... Choose Visual C# > Windows Universal and name it Showcase.

New project.png

  • We will create a navigation pane and a Frame in the main page. The Frame will show the main content to the user and the navigation pane will allow navigation between pages.

Navigation pane

  • The layout is made of a SplitView containing StackPanels for the buttons in its Pane and a Frame in its Content, named ContentFrame, that will keep the current page. The XAML can be seen here.

  • Whenever a button is clicked, we should move to the corresponding page. Furthermore, since it's a flat navigation tree, we don't want to keep the BackStack history (the history of pages to return to whenever the back button is pressed). The following function hides the Pane and navigates to the new page, clearing the BackStack:

private void ContentNavigate(Type page)
{
    Splitter.IsPaneOpen = false;
    if (ContentFrame.CurrentSourcePageType != page)
    {
        ContentFrame.Navigate(page);
        ContentFrame.BackStack.Clear();
    }
}
  • Now, it's just a matter of creating the callbacks for button presses and call ContentNavigate with the target page. For example, to navigate to the SlideShow when the button is pressed, do:
private void SlideShow_Click(object sender, RoutedEventArgs e)
{
    ContentNavigate(typeof(SlideShow));
}
  • A Hamburguer Button allows the user to show or collapse the panel. The code for the button click is:
private void PanelToggle_Click(object sender, RoutedEventArgs e)
{
    Splitter.IsPaneOpen = !Splitter.IsPaneOpen;
}
You can’t perform that action at this time.