passing data between pages correctly

Question

I have been trying to seperate a single WP7 app page into two seperate pages so that I can keep the functionality in one page and the view in the other. Basically I am creating a tabbed webbrowser where I have different tabs that may be viewed upon the users request, and only the currently clicked tab is the one that is displayed in the view. So far I have a solution where this works in one page, but I would like to seperate this into a TabsPage (which would control the tab instances) and a MainPage (which would present the user with the currently selected tab for display). I am not sure of how to seperate these two pages correctly so that I can accomplish this functionality. What I have is as follows (which works thus far)

MainPage.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBox x:Name="UrlTextBox" KeyDown="UrlTextBox_KeyDown" InputScope="url"/>
    <Grid x:Name="BrowserHost" Grid.Row="1" />
    <!--<my:FullWebBrowser Name="TheBrowser" Grid.Row="1"/>-->

</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBarIconButton x:Name="Tabs" IconUri="/Images/appbar.tab.rest.png" Text="tabs" Click="TabsPage_Click"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" IsEnabled="True" Text="forward" x:Name="ForwardBtn" Click="ForwardBtn_Click"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="1" Click="TabMenuItem_Click" />
            <shell:ApplicationBarMenuItem Text="2" Click="TabMenuItem_Click" />
            <shell:ApplicationBarMenuItem Text="3" Click="TabMenuItem_Click" />
            <shell:ApplicationBarMenuItem Text="4" Click="TabMenuItem_Click" />
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

MainPage.xaml.cs

private const int NumTabs = 4;
    private int currentIndex;

    private string[] urls = new string[NumTabs]; 
    ////private WebBrowser[] browsers = new WebBrowser[NumTabs]; 
    private FullWebBrowser[] browsers = new FullWebBrowser[NumTabs];

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        ShowTab(0); 
    }

    //protected override void OnNavigatedTo(NavigationEventArgs e)
    //{
    //    base.OnNavigatedTo(e);

    //}

    private void ShowTab(int index)
    {
        this.currentIndex = index;

        UrlTextBox.Text = this.urls[this.currentIndex] ?? "";

        if (this.browsers[this.currentIndex] == null)
        {
            //WebBrowser browser = new WebBrowser(); 
            FullWebBrowser browser = new FullWebBrowser();

            this.browsers[this.currentIndex] = browser;

            BrowserHost.Children.Add(browser);
        }

        for (int i = 0; i < NumTabs; i++)
        {
            if (this.browsers[i] != null)
            {
                this.browsers[i].Visibility = i == this.currentIndex ? Visibility.Visible : Visibility.Collapsed;
            }
        }
    }

    private void UrlTextBox_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Enter)
        {
            Uri url;

            //string _url;

            if (Uri.TryCreate(UrlTextBox.Text, UriKind.Absolute, out url))
            {
                this.urls[this.currentIndex] = UrlTextBox.Text;
                //_url = url.ToString();

                string _url = url.ToString();

                //this.browsers[this.currentIndex].Navigate(url); 
                this.browsers[this.currentIndex].Navigate(_url);
            }
            else
                MessageBox.Show("Invalid url");
        }
    }

    private void TabMenuItem_Click(object sender, EventArgs e)
    {
        int index = Int32.Parse(((ApplicationBarMenuItem)sender).Text) - 1;
        ShowTab(index);
    }

    //**********************************************************************

    private void TabsPage_Click(object sender, EventArgs e)
    {
        this.NavigationService.Navigate(new Uri("/TabsPage.xaml", UriKind.Relative));
    }

Note: I am using a webbrowser control named TheWebBrowser. Any help with this on how to correctly seperate the MainPage into a TabsPage as well would be greatly appreciated! I have been working on this for a while and cannot seem to be able to pass the data properly between the pages (namedly the searchbar and the current webbrowser instance to be viewed on MainPage).

Answer 1

This is how I do it when I want to share data across pages for example. Define your property in App.xaml.cs (don't forget to init wherever you need to):

public List<Contact> Contacts
{
    get
    {
        return _contacts;
    }
}

Now in the pages you want to use this data, define it like so:

private List<Contact> Contacts
{
    get
    {
        return (App.Current as App).Contacts;
    }
}

Answer 2

Just in case, this can be helpful.

EDIT: I mean, you can use this component, which is available via Nuget as

Install-Package SmartNavigation. 

Probably its a bit raw, but totally worth to take a glance.

Answer 3

I would just use Caliburn Micro to pass data between pages/screens. http://caliburnmicro.codeplex.com/ It has also a good documentation for you to begin with learning how to pass datas properly rather than doing (App.Current as App).SomeField.

Answer 4

Passing the values between Pages and still adhering to proper WP7 design can be accomplished by adding a save point in the App.xaml.cs file and then you can access the information using

(App.Current as App).SomeField

Now I have no experience with the webbrowser control you are using, but I am assuming that you can use the MVVM pattern to separate the data from the view. This is a good example. Using MVVM will also allow you to better support tombstoning with your application. Hopefully this answers your question.