WPF Navigation: Using a Page + Frame Link

The Windows Presentation Foundation has many options for creating a multi-window application. Two types stand out among them: the standard familiar Window and the “browser” Page. There was nothing particularly interesting for me in Window, so I decided to try the browser version in the desktop application. It sounds somewhat strange and perhaps absurd, but it does not become less interesting from this. In this topic, the main stages of creating this navigation will be described.

Application creation

First of all, we need to create a WPF Application project (File -> New -> Project -> C # -> WPF Application). The choice of the version of the Framework does not play any role. Our new application already has one “window” MainWindow.xaml, which will be a kind of layout for our pages. We place the menu for navigation on it, create buttons, links ... the type of the element does not affect the code.

An example using the buttons below

  


  


  

Create pages

The process is similar to creating windows. We click on our project -> Add -> Page ... After confirmation, we get the next xaml file. Unlike windows, our page class inherits Page. We do the markup as in ordinary forms, with the only difference being that the main Page tag should include only one immediate descendant, but this does not cause any special problems, since we will use the Grid, which can include any number of descendants. It is also worth remembering that this is just a frame, so you do not need to put anything extra there.
It should be said separately about the frame / page size. The final application will use the frame size, i.e. the page size does not directly affect anything, but the position of the page elements is determined by their placement on the page relative to, for example, borders, i.e. indentation at 24px from the top and 20px to the right will remain in the main window (relative to the frame borders).

We work with the main window

At this point, we should have: one main window (layout) with navigation and several pages with content. In the main window, create a Frame element, configure its location and dimensions, call, for example, “mainFrame”. We will assign an event to our buttons (links) (for example, Click at the button). Now let's start editing the code, or rather, just one function (called by the event). The function of changing the page in the frame is extremely simple and concise.

private void Button_Click (object sender, RoutedEventArgs e)
{
  frame.NavigationService.Navigate (new Uri ("Find.xaml", UriKind.Relative));
}

Accordingly, instead of “Find.xaml” we write the name of our page file. We hang similar events on other buttons, but with different file names.
That, in fact, is all. Of course, this is just a framework for future navigation, which can be modified and customized to your taste, thanks to the rich .net library.

Finally, a screenshot of what should result in: