How to put an image on web browser control

问题:

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!

回答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; 
        } 
    } 
} 

回答2:

In a brand new app, in MainPage.xaml I replaced

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

with

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <phone:WebBrowser x:Name="theBrowser" />
    <Image Source="/Background.png"
           Stretch="None"
           HorizontalAlignment="Left"
           VerticalAlignment="Bottom" />
</Grid>

Then in the page constructor I added

theBrowser.Navigate(new Uri("http://stackoverflow.com/"));

This lead to a display like:

This proves it's perfectly popssible.
Unfortunately your incomplete sample in your question (the XAML) and code that has no bearing on your actual question (the .cs) makes it hard to say exactly why you can't get it to work.

Additionally, please read http://tinyurl.com/so-hints before posting further and ask future questions in a way that will make it easier for people to help you.