Question

我有一个简单的html页面加载到Windows Phone中的webview控件，它不会缩放到全屏，并且会出现一个白色的补丁（如附图所示）。

WebView代码如下：

<Page
x:Class="loadtime.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:loadtime"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView x:Name="mainWebView"></WebView>
</Grid>

html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="background-color:red; border: 1px solid blue;">
    </body>
</html>

可能是什么原因？是否还需要启用其他属性？

Answer 1

您需要将WebView HorizontalAlignment和VerticalAlignment设置为Stretch

以下是我的完整代码。

<强> XAML

<Page
    x:Class="App16.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App16"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="mainWebView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Page>

代码背后

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App16
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string Loaded = "<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta charset=\"utf-8\" /><title></title></head><body style=\"background-color:red; border: 1px solid blue;\"></body></html>";
            mainWebView.NavigateToString(Loaded);
        }
    }
}

以下是输出。

Answer 2

问题是状态栏，这解决了问题。

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
        {
            await StatusBar.GetForCurrentView().HideAsync();
        }

Answer 3

我有类似的问题。但是，仅添加Margin即可解决我的问题并全屏打开，这是我的代码，可能会对您有所帮助，

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Height="auto" Margin="0,0,0,0"

只需将边距设置为0，一切顺利，希望对您有所帮助，：）

UWP Web视图示例中的全视图：

Windows 10手机 - UWP应用webview html页面无法扩展到全屏

3 个答案: