c# - Webブラウザコントロールに画像を配置する方法

Question

Windows Phone 7用のWebブラウザーアプリで、グリッド上にWebブラウザーコントロール（xaml.cs）を作成しました。その後、グリッド上に画像を作成しました。しかし、エミュレーターでWebブラウザーを開くと、その画像は表示されません。タブ付きのブラウザです。ただし、画像はグリッドには表示されますが、Webブラウザーコントロールには表示されません（アプリのデバッグ後）。UCブラウザのようにこれがあります。以下の画像をご覧ください。グリッド上では画像は表示されますが、Webブラウザコントロールでは画像は表示されません。

.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>

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

Webブラウザコントロールにその画像が必要です。誰か助けてもらえますか？

よろしくお願いします！

Answer 1

まったく新しいアプリで、MainPage.xamlで置き換えました

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

と

<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>

次に、ページコンストラクターに追加しました

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

これにより、次のような表示になります。

これは、それが完全にポップ可能であることを証明しています。
残念ながら、質問の不完全なサンプル（XAML）と、実際の質問（.cs）に関係のないコードでは、なぜそれを機能させることができないのかを正確に言うのは困難です。

さらに、さらに投稿する前にhttp://tinyurl.com/so-hintsを読んで、人々があなたを助けやすくなるような方法で将来の質問をしてください。

Answer 2

ブラウザコントロールをコードに追加するときは、画像の上に配置します。コントロールを保持するには、グリッド内にコンテナーが必要です。ただし、最終的には、MattLaceyが上に示したように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">
        <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>

グリッド「BrowserHolder」が追加されていることに注意してください。それが最初に追加されたので、そのコントロールに追加したものはすべて画像の後ろに表示されます。

したがって、コードは次のようになります。

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