Question

I would like to create the ability for a user to have opened more than one webbrowser instance in my windows phone application, but I have not been able to find any documentation explaning how this may be accomplished. To be more exact, I would like to mimick the tabbed browsing experience offerred by the default Windows Phone Internet Explorer application. A already have a single webbrowser isntance working correctly with navigation and whatnot, but how would I be able to add multiple ‘tabbed’ instances so each webbrowser instance may be on a seperate page simultaneously? ( I am relatively new to C# and Windows phone so any code, links, or detailed explanations would be greatly appreciated.) Thanks in advance!

my code is as follows:

MainPage.xaml

<Grid x:Name="LayoutRoot">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <my:FullWebBrowser Name="TheBrowser" Grid.RowSpan="2" InitialUri="http://www.google.com" Height="800" Margin="0,0,0,-690" />

</Grid>

TabsPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0"></Grid>
</Grid>


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True">
        <shell:ApplicationBarIconButton IconUri="/Icons/appbar.new.rest.png" IsEnabled="True" Text="new" x:Name="NewBtn" Click="NewBtn_Click"/>
                </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Right now TabsPage.xaml is blank except for an app bar icon which should allow for creation of a new webbrowser instance when clicked.

Answer 1

I wouldn’t create separate pages for the tabs, my first though is to create multiple browser controls on top of each other and show only the current tab’s browser control.

EDIT:

Normally nobody would do this but I wrote a simple multi-tab browserlike app for you. It’s very primitive, but you’ll get the idea. Btw you should try harder to come up with a solution, this is really not hard… Here is the MainPage.xaml:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBox x:Name="UrlTextBox"
             KeyDown="UrlTextBox_KeyDown" />
    <Grid x:Name="BrowserHost"
          Grid.Row="1" />
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <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>

Here is the MainPage.xaml.cs:

public partial class MainPage : PhoneApplicationPage
{
    private const int NumTabs = 4;

    private int currentIndex;
    private string[] urls = new string[NumTabs];
    private WebBrowser[] browsers = new WebBrowser[NumTabs];

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

    private void ShowTab(int index)
    {
        this.currentIndex = index;
        UrlTextBox.Text = this.urls[this.currentIndex] ?? "";
        if (this.browsers[this.currentIndex] == null)
        {
            WebBrowser browser = new WebBrowser();
            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;
            if (Uri.TryCreate(UrlTextBox.Text, UriKind.Absolute, out url))
            {
                this.urls[this.currentIndex] = UrlTextBox.Text;
                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);
    }
}