通用窗口 10 应用中的自适应 Web 视图

本文关键字：自适应 Web 视图 应用 窗口 | 更新日期: 2023-09-27 18:26:52

<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(中响应。我从本地应用程序的代码加载 Web 视图，但我无法使其在所有平台上都自适应。谁能帮我让它从 xaml 工作。

我需要把吗 

<RelativePanel .../>

在 XAML 代码中。

通用窗口 10 应用中的自适应 Web 视图

不应对"宽度"和"高度"使用固定值。查看以下链接：排列 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 视图内容之前，进度环将可见(使用 LoadCompleted 事件(

与自适应 UI 相关，您可以观看此视频。

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

<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>
相关文章：