如何在uwp中编程多种尺寸的屏幕？

Question

您好我正在开发通用Windows 10应用程序平台上的应用程序，当我在XAML窗口上放置一些对象时，当更改屏幕大小时它会保持原样，所以它适合新的屏幕尺寸，如果我修复它它适合旧的屏幕大小，我需要应用程序是通用的。

我的xaml代码：

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

<Grid Loaded="Grid_Loaded">

    <Grid.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/backPHONE.jpg"/>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="55*"/>
        <RowDefinition Height="9*"/>
    </Grid.RowDefinitions>
    <RelativePanel>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="41,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="128" Width="360" Text="test 123" FontFamily="Century Gothic" FontStretch="UltraExpanded" FontStyle="Italic" FontSize="26" Tapped="textBlock_Tapped" TextAlignment="Center"/>
    <ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="84,700,0,-666.8" VerticalAlignment="Top" Width="264" SelectionChanged="comboBox_SelectionChanged" Height="32" Grid.Row="1">
        <ComboBoxItem Content="test" IsSelected="True"/>
    </ComboBox>
    <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="164,675,-2.8,-665" TextWrapping="Wrap" Text="test" VerticalAlignment="Top" Height="20" Width="120" Grid.Row="1" SelectionHighlightColor="#FFF10000" FontFamily="Century Gothic"  FontSize="12" FontStretch="UltraExpanded" FontStyle="Italic" Foreground="White"/>
    </RelativePanel>
</Grid>

感谢

Answer 1

让我介绍两种可能的方法来处理与通用Windows 10应用程序相关的各种屏幕尺寸。

<强> 1。自适应触发器 - 您可以使用它们将布局调整到不同的设备系列 - 例如，您可以定义智能手机上的页面外观以及在PC上启动应用程序的方式。下面我尝试添加一些简短的说明如何开始使用它们。

a）当您打开Visual Studio时，请右键单击MainPage.xaml并选择“Design in Blend ...”：

b）转到“状态”选项卡并选择名为“添加状态组”的图标（下面标记为红色矩形）：

c）现在你必须添加状态，所以点击“Visual State Group”旁边的图标，如下所示：

d）现在添加两个状态：“Mobile”和“Desktop”，如下所示：

e）最后一步是设置最小窗口宽度以检测屏幕尺寸何时更改：

f）现在您可以为“移动”状态设置最小窗口宽度： 请输入320，如下所示（请记住，这些是有效像素而不是物理像素）

单击“确定”后，将配置“移动”的可视状态。 执行相同的上述步骤，但对于“桌面”状态，并键入1024以获得最小窗口宽度：

现在我可以在两种状态之间切换并调整每种状态的设计： （请注意，当前选择的状态标有红色矩形）：

<强> 1。设备系列文件夹 - 您可以为Pages指定两个单独的视图，但后面有一个代码。如果您必须专门为移动设备制作您的设计，例如PC，那么这可能会有所帮助。

a）右键单击该项目并添加名为“DeviveFamily-Mobile”的新falder：

b）添加与您的上一页相同的新Xaml视图 - 在我的情况下，这是“MainPage”：

c）现在，您有一个代码隐藏在类后面但有两个单独的视图将相应地应用于设备系列：

我希望它会帮助你开始。 您还可以观看非常好的Channel9视频或访问my blog，我正在尝试展示与UWP相关的大量有用示例。

Answer 2

您必须使用AdaptiveTriggers

http://www.wintellect.com/devcenter/jprosise/using-adaptivetrigger-to-build-adaptive-uis-in-windows-10