How to navigate to other page with button in WPF

user_3000291 0
Viewed 76816

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 Page2.xaml

I have this for my button inside of my Page1.xaml:

<Grid>
    <Button x:Name="localModeBtn" 
            Style="{StaticResource MainButtonStyle}"  
            Content="local mode" 
            Click="localModeBtn_Click" />
</Grid>

And for the button event handler:

private void localModeBtn_Click(object sender, RoutedEventArgs e)
    {
        Uri uri = new Uri("Page2.xaml", UriKind.Relative);
        this.NavigationService.Navigate(uri);
    }

Upon clicking the button I receive an error that says "Cannot locate resource page2.xaml" The thing is that Page2.xaml is in the same folder as Pag1.xaml so I can't see where I've gone wrong?

button xaml wpf c#
9 Answers

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));
user_79642170

First of all, you'll need a frame in your window to hold the pages, so in my MainWindow.xaml I'll add a frame like this:

<Frame x:name="mainFrame"/>

Then We'll add an event listener to our navigation button in our MainWindow.xaml like this:

<Button
    x:Name="navBtn"       
    Content="LIVE VIEW"       
    Click="NavBtn_Click">
</Button>

Now after we've set our window xaml up, we'll go to MainWindow.xaml.cs and write our code:

//this function should be automatically generated
private void NavBtn_Click(object sender, RoutedEventArgs e) 
    {
        //we'll write this line, which opens our page
        mainFrame.Content = new YourPage(); 
    }

and that's it your navigation is ready!

user_126953270

In View (.xaml file):

<StackPanel>
    <TextBlock>Outside area of frame</TextBlock>
    <StackPanel Height="20" Width="400" VerticalAlignment="Top" Orientation="Horizontal">
        <Button Content="Page 1" Width="200" Click="Button_Click"/>
        <Button Content="Page 2" Width="200" Click="Button_Click_1"/>
    </StackPanel>
    <Frame Name="Main" Height="300" Width="700" Background="LightGray">
    </Frame>
</StackPanel>

In code behind (.xaml.cs file):

private void Button_Click(object sender, RoutedEventArgs e)
    {
        Main.Content = new Page1();
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        Main.Content = new Page2();
    }

Thesse two buttons will now help you to navigate between pages named Page1 and Page2. (Please take care of namespaces if the pages are present in folders or so).

user_190424250
Related