通用 Windows 10 应用程序中的 Adaptivness Webview答案

【问题标题】：Adaptivness Webview in universal windows 10 app通用 Windows 10 应用程序中的 Adaptivness Webview
【发布时间】：2015-12-15 20:52:50
【问题描述】：

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Unloaded="Unlaoded" Margin="-47,0,0,0" HorizontalAlignment="Right" Width="1398">


        <WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" Height="814" VerticalAlignment="Top" Margin="-55,10,10,0" Grid.RowSpan="2" HorizontalAlignment="Right" Width="1396" RenderTransformOrigin="0.506,0.695" 

/>

        <ProgressRing x:Name="ProgressRing1" 
                      Margin="642.019,405,671.173,378.647" 
                      Height="50.353" Width="84.808" 
                      Foreground="BlueViolet" 
                      UseLayoutRounding="False" d:LayoutRounding="Auto" 
                      >

            <ProgressRing.RenderTransform>
                <CompositeTransform Rotation="1.006"/>
            </ProgressRing.RenderTransform>
        </ProgressRing>



    </Grid>
</Page>

大家好，我是这个论坛的新手，也是 uwp 编程的新手。我处于绝望的境地，我需要一些帮助。我无法在所有平台（桌面、Windows 手机）中使上述 webview 响应。我从本地应用程序的代码中加载 webview，但无法使其在所有平台上都具有自适应性。谁能帮我让它从 xaml 工作。

我需要放吗

<RelativePanel .../>

在 xaml 代码中。

【问题讨论】：

标签： c# xaml webview microsoft-metro uwp

【解决方案1】：

您不应该对宽度和高度使用固定值。看看以下链接： Arranging UI Elements 和 Layout with Absolute and Dynamic Positioning 了解定位在 XAML 中的工作原理。

我认为您使用设计器创建了 UI，这就是您获得这些值的原因。

以下是一个简单的示例，其中 Web 视图填充了页面中的所有空间：

XAML

<Page
x:Class="Stack1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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="WebView" 
        LoadCompleted="WebView_LoadCompleted" 
        Source="https://www.google.com"/>

    <ProgressRing x:Name="ProgressRing" 
                  Foreground="BlueViolet"
                  IsActive="True"
                  Width="100"
                  Height="100"
                  >
    </ProgressRing>

</Grid>

后面的C#代码

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

    private void WebView_LoadCompleted(object sender, NavigationEventArgs e)
    {
        ProgressRing.Visibility = Visibility.Collapsed;
    }
}

在加载 web 视图内容之前，ProgressRing 是可见的（使用 LoadCompleted 事件）

与自适应 UI 相关的你可以看看这个video。

【讨论】：

【解决方案2】：

如果您的嵌入式网站 URL 源是响应式的，则以下代码更改将有助于您的网站适合所有屏幕尺寸。自动布局大小和对齐将帮助您适应所有屏幕尺寸。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    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}" Unloaded="Unlaoded">

        <WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" />

        <ProgressRing x:Name="ProgressRing1"            
            Height="50.353" Width="84.808" 
            Foreground="BlueViolet" 
            UseLayoutRounding="False" d:LayoutRounding="Auto" />
    </Grid>
</Page>

【讨论】：