通用Windows 10应用程序中的Adaptiveness Webview

Question

<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 Phone）上使上述Webview响应。 我从本地应用程序的代码加载Webview，但我无法使其在所有平台上都具有适应性。 谁能帮我从xaml使其工作。

我需要放吗

<RelativePanel .../>

在xaml代码中。

Answer 1

不应将宽度和高度使用固定值。 看一下以下链接： 使用绝对和动态定位来安排UI元素和布局，以了解定位在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事件）

与Adaptive UI相关，您可以看一下该视频 。

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