locked
how to navigate from one xaml page to another xaml page? RRS feed

  • Question

  • i created a blank app in c# & xaml,now i have a bunch of controls like button , combobox in main page of application & another set of controls are in another page say page2.xaml , now i want to navigate from main page.xaml to page2.xaml with click of a button which is present in mainpage.xaml , how can i achieve this , please give me neat & detailed example of markup & codebehind file implementation to acheve this. 
    Friday, November 15, 2013 6:19 AM

Answers

  • Hello kranthi88, 

    try this :

    //design in xaml file:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <StackPanel>
    <ComboBox x:Name="cmb1" />
                <Button x:Name="btnsample" Content="Click to navigate another page" Click="btnsample_Click_1" Margin="0,10,0,0"/>
                <TextBlock x:Name="tbl1" Foreground="White" FontSize="25" Margin="10,10,0,0"/>
            </StackPanel>
        </Grid>

    in code file of mainpage.xaml:

     private void btnsample_Click_1(object sender, RoutedEventArgs e)
            {
                this.Frame.Navigate(typeof(page2));
            }
    • Marked as answer by kranthi88 Sunday, November 17, 2013 3:05 PM
    Saturday, November 16, 2013 11:59 AM

All replies

  • Hi ,

    In you XAML and where the button is it should say something like this

    <Button  x:Name="MyNavButton" Content="Navigate"  FontSize="18" BorderThickness="0"  HorizontalAlignment="Left" Height="43" Margin="4,89,0,0" VerticalAlignment="Top" Width="106" Grid.ColumnSpan="2">
                    <Button.ContentTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </Button.ContentTransitions>
                </Button>

    Now type Click in 

    <Button  x:Name="MyNavButton" Content="Navigate"  FontSize="18" BorderThickness="0"  HorizontalAlignment="Left" Height="43" Margin="4,89,0,0" VerticalAlignment="Top" Width="106" Click="" Grid.ColumnSpan="2">
                    <Button.ContentTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </Button.ContentTransitions>
                </Button>

    It will open the intelisense and you should be prompted to create a new handler. Select it and continue.

    If you don't get the intellisense type a handler of your own

    For example

    <Button  x:Name="MyNavButton" Content="Navigate"  FontSize="18" BorderThickness="0"  HorizontalAlignment="Left" Height="43" Margin="4,89,0,0" VerticalAlignment="Top" Width="106"Click="MyNavButton_Click" Grid.ColumnSpan="2">
                    <Button.ContentTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </Button.ContentTransitions>
                </Button>

    Right Click to MyNavButton_Click  and select Go to definition. It will open the new event by itself.

    In the click event type

       this.Frame.Navigate(typeof(page2));

    and that's it.

    Do the same to page2 and put 

     this.Frame.Navigate(typeof(MainPage));

    thank you

    • Proposed as answer by zakkar Saturday, November 16, 2013 12:34 PM
    Friday, November 15, 2013 3:00 PM
  • Hello kranthi88, 

    try this :

    //design in xaml file:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <StackPanel>
    <ComboBox x:Name="cmb1" />
                <Button x:Name="btnsample" Content="Click to navigate another page" Click="btnsample_Click_1" Margin="0,10,0,0"/>
                <TextBlock x:Name="tbl1" Foreground="White" FontSize="25" Margin="10,10,0,0"/>
            </StackPanel>
        </Grid>

    in code file of mainpage.xaml:

     private void btnsample_Click_1(object sender, RoutedEventArgs e)
            {
                this.Frame.Navigate(typeof(page2));
            }
    • Marked as answer by kranthi88 Sunday, November 17, 2013 3:05 PM
    Saturday, November 16, 2013 11:59 AM
  • tried as you said khant nipun , but not working...
    Saturday, November 16, 2013 2:03 PM
  • sorry khant , i made a mistake & rectified it , now navigation working fine , thanx.
    Sunday, November 17, 2013 3:04 PM
  • Go to Min 52:00."http://"+www."+"microsoftvirtualacademy.com/Content/ViewContent.aspx?et=5695&m=5691&ct=23171" Here you will see a step by step walk through of how to use Blend to generate the code you need. It's much easier to see here and be able to learn from it.


    • Edited by Jake_S_UMI Sunday, June 1, 2014 6:52 PM
    Sunday, June 1, 2014 6:51 PM
  • Create A Button With Content="Page 2" with C# Code
    privatevoid Button_Click(object sender, RoutedEventArgs e) { Frame.Navigate(typeof(page2)); }
    and Now it Will Navigate To page2 .

    Monday, July 21, 2014 12:43 PM