Question

In the web browser app for windows phone 7,i have created a web browser control(in xaml.cs) on the Grid. After that i have created an image on the Grid. But when i open the web browser in emulator, that image is not visible. It’s a tabbed browser. But the image is visible in the grid but not visible on web browser control(After debugging the app). Like the UC Browser has this thing. PLease the below images, on the grid, the image is visible but on the web browser control, the image is not visible.

In .xaml

    <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBox x:Name="UrlTextBox" Background="White" InputScope="URL" KeyDown="UrlTextBox_KeyDown" Margin="0,0,98,0" GotFocus="UrlTextBox_GotFocus" LostFocus="UrlTextBox_LostFocus" KeyUp="UrlTextBox_KeyUp"/>
    <Grid x:Name="BrowserHost" 
      Grid.Row="1" GotFocus="BrowserHost_GotFocus">
        <Image x:Name="Full" Source="Images/full.png" Height="60" Width="60" Margin="430,678,0,0" MouseEnter="Full_MouseEnter" Visibility="Visible" />
    </Grid>

In Xaml.cs

private void ShowTab(int index) 
{ 
    this.currentIndex = index;       
    UrlTextBox.Text = this.urls[this.currentIndex] ?? "Search"; 
    if (this.browsers[this.currentIndex] == null) 
    { 
        WebBrowser browser = new WebBrowser(); 
        this.browsers[this.currentIndex] = browser; 
        BrowserHost.Children.Add(browser); 
        browser.IsScriptEnabled = true; 
    } 
    for (int i = 0; i < NumTabs; i++) 
    { 
        if (this.browsers[i] != null) 
        { 
            this.browsers[i].Visibility = i == this.currentIndex ? Visibility.Visible : Visibility.Collapsed; 
        } 
    } 
} 

I need that image in my web browser control. Can anybody help me?

Thanks in advance for your hard work!

Answer 1

WHen you are adding the browser control in code, you are putting it on top of the image. You need a container within the Grid to hold your controls. Ultimately, though, you should probably try to set this up in XAML the way Matt Lacey shows above.

If you want do try this your way, you need something like this:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBox x:Name="UrlTextBox" Background="White" InputScope="URL" KeyDown="UrlTextBox_KeyDown" Margin="0,0,98,0" GotFocus="UrlTextBox_GotFocus" LostFocus="UrlTextBox_LostFocus" KeyUp="UrlTextBox_KeyUp"/>
    <Grid x:Name="BrowserHost" 
  Grid.Row="1" GotFocus="BrowserHost_GotFocus">
        <Grid x:Name="BrowserHolder"/>
        <Image x:Name="Full" Source="Images/Full.png" Height="60" Width="60" Margin="430,678,0,0" MouseEnter="Full_MouseEnter" Visibility="Visible" />
    </Grid>
</Grid>

Notice the addition of the Grid “BrowserHolder”. Since that one was added first, anything that you add to that control should appear behind the image.

So your code then becomes:

private void ShowTab(int index) 
{ 
    this.currentIndex = index;       
    UrlTextBox.Text = this.urls[this.currentIndex] ?? "Search"; 
    if (this.browsers[this.currentIndex] == null) 
    { 
        WebBrowser browser = new WebBrowser(); 
        this.browsers[this.currentIndex] = browser; 

        // NOTE: Changed to BrowserHolder
        BrowserHolder.Children.Add(browser); 

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