如何在 Windows 10 中制作自适应 UI？

Question

我正在尝试将我的旧应用程序迁移到 Windows 10，但我遇到了 Grid 问题。我在 XAML 页面中创建了一个网格，其中 WebView 和 ListView 位于 2 个不同的行中。现在的问题是它在本地机器（笔记本电脑）中看起来很好，但是当我在 Windows Phone 中检查时，它看起来不太好（图像，文本看起来非常大）。请在下面找到我的 XAML 代码和 ListView 的数据模板。我知道 RelativePanel 会节省我的时间，但任何人都可以更新我的代码并建议我，以便我可以在每个页面上使用相同的代码，因为我的应用程序经常在 Grid 中使用 ListView。

XAML 代码

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <WebView Grid.Row="0"
             x:Name="webView"
             DefaultBackgroundColor="#388941"
             IsHitTestVisible="False"/>
    <ListView x:Name="loginandRegisterOptionslist"
             Margin="0,10,0,0"
             Grid.Row="1"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
             ItemTemplate="{StaticResource WelcomePageListItemTemplate}"
             VerticalAlignment="Bottom"
             SelectionMode="Single"
             />
</Grid>

上述 ListView 的数据模板

<DataTemplate x:Key="WelcomePageListItemTemplate">

        <Grid Margin="0,2,0,2"
          Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Width="80"
               Height="60"
               Name="img1"
               Stretch="Uniform"
               Margin="4,0,4,0"
               Grid.Column="0"
               Source="{Binding IMAGE_URL}"></Image>

            <StackPanel Grid.Column="1"
                    Margin="0,8,0,8">
                <TextBlock Text="{Binding TITLE}"
                       Margin="2"
                       Style="{StaticResource HeaderContentStyle}" />
                <TextBlock Text="{Binding VALUE}"
                       Margin="2"
                       Style="{StaticResource DescriptionContentStyle}" />
            </StackPanel>
        </Grid>

</DataTemplate>

Answer 1

您可能想尝试一些解决方案：

将您的数据放置在用户控件中，使用Adaptive Trigger根据不同的屏幕尺寸自定义图像和文本的大小。
使用差异XAML查看不同的设备系列
启动应用程序时，检测设备系列，根据该信息设置正确的尺寸绑定值

如何在 Windows 10 中制作自适应 UI？

How to make adaptive UI in Windows 10?

c#

xaml

windows-10

uwp