Thursday, December 20, 2012

Windows Phone Dynamic Navigation between Screens on button clicks


The Navigation between the Screen can be dynamic and we can pass the data/message between differet screen. in this example there are three screens and MainPage.xaml,Page2.xaml,Page3.xaml and corresponding MainPage.xaml.cs,Page2.xaml.cs,Page3.xaml.cs respectively associated with them. You can just copy all the code given below to corresponding files and you can achieve the navigation and message passing between different screens. 
it is very obvious that windows phone is using Stack to place screens one by one on clicking back button at the bottom you can anlyze the behaviour of the program.

1)MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="Page 1"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="4*" />
            </Grid.RowDefinitions>
            <StackPanel
                Grid.Row="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Orientation="Horizontal">
                <Button
                    Name="RetrieveData"
                    Content="Retrieve Data"
                    Width="225"
                    Margin="5" />
                <Button
                    Name="Page3"
                    Content="Page 3"
                    Width="225"
                    Margin="5" />
            </StackPanel>
            <TextBlock
                Text=""
                Name="DisplayText"
                Grid.Row ="1" />



        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>



2)MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            RetrieveData.Click += ( RetrieveData_Click );
            Page3.Click += ( o, e ) => { NavigationService.Navigate( new Uri( "/Page3.xaml", UriKind.Relative ) ); };

        }

        void RetrieveData_Click( object sender, RoutedEventArgs e )
        {
            NavigationService.Navigate( new Uri( "/Page2.xaml", UriKind.Relative ) );
        }

        protected override void OnNavigatedTo(
            System.Windows.Navigation.NavigationEventArgs e )
        {
            string newText = string.Empty;
            if (NavigationContext.QueryString.TryGetValue(
                "DataEntered",
                out newText ))
            {
                DisplayText.Text = newText;
                NavigationService.RemoveBackEntry();
            }
            base.OnNavigatedTo( e );
        }

    }
}

3) Page2.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="Get Data"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="124*" />
                <ColumnDefinition
                    Width="332*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="4*" />
            </Grid.RowDefinitions>
            <TextBlock
                Height="30"
                HorizontalAlignment="Left"
                Text="Enter Data"
                VerticalAlignment="Bottom" />
            <TextBox
                Name="DataEntered"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Width="300"
                Grid.Column="1" />
            <StackPanel
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Grid.Row="1"
                Grid.Column="1"
                Orientation="Horizontal">
                <Button
                    Name="OK"
                    Content="OK"
                    Width="150"
                    Margin="5" />
                <Button
                    Name="Cancel"
                    Content="Cancel"
                    Width="150"
                    Margin="5" />
            </StackPanel>
        </Grid>
     
     
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>



4)Page2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class Page2 : PhoneApplicationPage
    {
        public Page2()
        {
            InitializeComponent();
            OK.Click += ButtonClick;
            Cancel.Click += ButtonClick;
        }

        void ButtonClick( object sender, RoutedEventArgs e )
        {
            Button btn = sender as Button;
            string msg = string.Empty;
            if (btn.Name == "OK")
            {
                msg = DataEntered.Text;
            }
            NavigationService.Navigate(
                new Uri( "/MainPage.xaml?DataEntered=" + msg,
                    UriKind.Relative ) );
        }
    }
}

5) Page3.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.Page3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="New Page"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Button
                Content="Page 1"
                Height="72"
                HorizontalAlignment="Left"
                Margin="166,39,0,0"
                Name="Page1"
                VerticalAlignment="Top"
                Width="160" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

6) Page2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class Page3 : PhoneApplicationPage
    {
        public Page3()
        {
            InitializeComponent();
            Page1.Click += ( o, e ) => { NavigationService.Navigate( new Uri( "/mainpage.xaml", UriKind.Relative ) ); };

        }
    }
}




Have a great day with Windows Phone Application development  :)

No comments:

Post a Comment