Issue with Canvas view in windows phone - windows-phone-8

Question

<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This is my MainPage.xaml file code where I have put my WebBrowser component inside a Canvas. Now my problem is, when I test this code on Emulator WVGA 512MB it looks fine like this
But when I test it on Emulator WXGA(768x1280) WebBrowser is going out of the screen and looks like this
How can I fix it. Please help. I dont want to remove canvas view.
EDIT:
Got fixed with this. Thanks to #Vyas_27 and #KooKiz
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas"
Background="Transparent">
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
</Grid>

Answer 1

You can keep your canvas, but put your WebBrowser control outside of it:
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted">
</phone:WebBrowser>
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This way, it'll be correctly sized by the Grid, and you can still place the other controls as you wish by using the canvas.

Answer 2

try this see if it works;
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
Just add;
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
to your webbrowser control.