Windows Phone中的Canvas视图问题

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>

这是我的MainPage.xaml文件代码，我将WebBrowser组件放在Canvas中。现在我的问题是，当我在Emulator WVGA 512MB上测试此代码时，它看起来很像这样

但是当我在Emulator WXGA（768x1280）上测试它时，WebBrowser会离开屏幕，看起来像这样

我该如何解决？请帮忙。我不想删除画布视图。

修改： 得到了修复。感谢@ Vyas_27和@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

尝试看看它是否有效;

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

添加;

Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"

到你的webbrowser控件。

Answer 2

您可以保留画布，但将WebBrowser控件放在其外面：

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

这样，它将通过网格正确调整大小，您仍然可以使用画布放置其他控件。