0

嗨,我正在通用 Windows 10 应用程序平台上开发应用程序,当我在 XAML 窗口上放置一些对象并更改屏幕尺寸时,它会保持以前的状态,因此它适合新的屏幕尺寸,如果我修复它,它就适合旧屏幕尺寸,我需要该应用程序是通用的。

我的xml代码:

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

谢谢

4

2 回答 2

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. 设备系列文件夹- 您可以为页面指定两个单独的视图,但后面有一个代码。如果您必须专门为移动设备(例如 PC)制作设计,这会有所帮助。

a) 右键单击​​项目并添加名为“DeviveFamily-Mobile”的新 falder:

在此处输入图像描述

b) 添加新的 Xaml 视图,其名称与上一页相同 - 在我的情况下,这是“MainPage”:

在此处输入图像描述

c) 现在您在类后面有一个代码,但有两个单独的视图将相应地应用于设备系列:

在此处输入图像描述

我希望它能帮助你开始。您还可以观看非常好的Channel9视频或访问我的博客,我试图在其中展示许多与 UWP 相关的有用示例。

于 2016-05-15T11:46:32.443 回答
0

你必须使用 AdaptiveTriggers

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

于 2016-04-17T13:54:39.043 回答