How to navigate to other page with button in WPF

Question

I have a second .xaml page set up under the name Page2.xaml and I want to make it so that when my button is clicked, the user is taken to <

Answer 1

You should use this, this worked for me:

var Page2= new Page2(); //create your new form.
Page2.Show(); //show the new form.
this.Close(); //only if you want to close the current form.

There is a variable type of a page with the page.xaml right name in your solution. after that, you should use its methods to do it functionally.

Answer 2

private void Navigate_Click(object sender, RoutedEventArgs e)//By Prince Jain 
{
    this.NavigationService.Navigate(new Uri("Page3.xaml", UriKind.Relative));
}

Answer 3

My solution was adding a frame in the main window MainWindow.xaml

<Frame Name="Main" Content="" Margin="127,0,0,0" Background="#FFFFEDED" />

For navigation:

1- Navigating from the main windows on button click:

private void Button_Click(object sender, RoutedEventArgs e)
{
   // navigate to pages/projects.xaml inside the main frame
   Main.Content = new MyProject.Pages.Projects();
}

2- In case of navigation from the page inside a frame ex Projects.xaml

// declare a extension method in a static class (its your choice if you want to reuse)
// name the class PageExtensions (you can choose any name)

namespace MyProject
{
    public static class PageExtensions
    {
        public static void NavigateTo(this Page page, string path)
        {
            Frame pageFrame = null;
            DependencyObject currParent = VisualTreeHelper.GetParent(page);

            while (currParent != null && pageFrame == null)
            {
                pageFrame = currParent as Frame;
                currParent = VisualTreeHelper.GetParent(currParent);
            }

            if (pageFrame != null)
            {
                pageFrame.Source = new Uri(path, UriKind.Relative);
            }
        }
    }
}


// to navigate from 'pages/projects.xaml' to another page
// heres how to call the extension on button click

this.NavigateTo("NewProject.xaml");

In addition, you can add another extension method that expects another Page object, in case you want to pass parameters to the constructor

// overloading NavigateTo
public static void NavigateTo(this Page page, Page anotherPage)
{
    Frame pageFrame = null;
    DependencyObject currParent = VisualTreeHelper.GetParent(page);

    while (currParent != null && pageFrame == null)
    {
        pageFrame = currParent as Frame;
        currParent = VisualTreeHelper.GetParent(currParent);
    }

    // Change the page of the frame.
    if (pageFrame != null)
    {
        pageFrame.Navigate(anotherPage);
    }
}

// usage
this.NavigateTo(new Pages.EditProject(id));

Answer 4

Use any container and bind the content to any property in your viewmodel or codebehind. After that you just have to update the property by setting a new page and call the PropertyChanged-event (see INotifyPropertyChanged interface). This will update the content of your container and you can display anything you want.

Answer 5

Solution to my own question:

I feel a bit silly providing a solution to my own question but thanks to Jasti's link I was able to sort my code out. As he had only posted a comment, I can't mark it as an answer, so here is the solution.

I changed the NavigationWindow on to a Window and inserted:

<DockPanel>
    <Frame x:Name="_NavigationFrame" NavigationUIVisibility="Hidden" />
</DockPanel>

And within the constructor of the MainWindow.xaml.cs I added:

_NavigationFrame.Navigate(new Page1());

Then the last step was to adjust the button event handler to:

this.NavigationService.Navigate(new Uri("Pages/Page2.xaml", UriKind.Relative));

Answer 6

You don't need any C# code for this, just do it in XML:

<Button Content="local mode"
    Command="NavigationCommands.GoToPage"
    CommandParameter="/Page2.xaml"/>

(Reformatted code not tested)