UWP - 如何正确支持多种屏幕分辨率答案

【问题标题】：UWP - How to properly support multiple screen resolutionsUWP - 如何正确支持多种屏幕分辨率
【发布时间】：2016-02-03 23:43:49
【问题描述】：

我刚刚开始学习 UWP 编程。我想在 windows 10 中写一个类似于 People 的应用程序。而且我在支持多屏幕时遇到了问题。

我有这样的布局：

 <ScrollViewer Background="Black" >
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="200"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
            </Grid.RowDefinitions>

            <TextBlock
                Text="CONTACT"
                Margin="10, 10, 10, 10"
                FontSize="25"
                Foreground="White"/>

            <Ellipse Grid.Row="1"
                     Margin="10, 20, 250, 10" >
                <Ellipse.Fill>
                    <ImageBrush ImageSource="Assets/64.png" />
                </Ellipse.Fill>
            </Ellipse>

            <TextBlock
                Grid.Row="2"
                Text="Name"
                FontSize="20"
                Margin="10, 0, 0, 0"
                VerticalAlignment="Bottom"
                Foreground="White"/>

            <Grid 
                Grid.Row="3">
                <Grid.Background>
                    <ImageBrush Stretch="Fill"/>
                </Grid.Background>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="350" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBox 
                    Grid.Column="0"
                    Margin="10, 10, 10, 10"/>

                <AppBarButton 
                    Grid.Column="1"
                    Foreground="White"
                    Icon="Edit"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"/>

            </Grid>

        </Grid>
    </ScrollViewer>

我在 4" 和 6" 上的输出 4寸和6寸屏原图：

我在 6" 屏幕上定义了这个布局，所以我应该在最小的屏幕上定义布局或者我应该怎么做？非常感谢。

【问题讨论】：

标签： wpf xaml win-universal-app uwp windows-10-mobile

【解决方案1】：

250 右边距在第一个屏幕截图上压着你的图像，所以它看起来很糟糕

Margin="10, 20, 250, 10"

此外，您的 TextBox 宽度是硬编码的

<ColumnDefinition Width="350" />

您不应该像这样对值进行硬编码 - 以您的 UI 流畅且响应迅速的方式使用面板。

从阅读Define layouts with XAML开始

然后继续尝试您的布局 - 这是最好的学习方式。

【讨论】：

【解决方案2】：

针对您的方案的彻底解决方案是根据屏幕尺寸定义自适应 UI。你可以从这个tutorial serials找到各种方法。

在这里我可以提出一个简单的解决方案：使用 VisualState 组，它可以根据不同的屏幕尺寸定义不同的布局。下面是一个示例。您可以在MSDN 上找到更多信息。

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

如果您需要更多信息，请告诉我。

【讨论】：

【解决方案3】：

实现这一点的最佳方法是结合使用 RelativePanel 和 VisualStateManager。

此外：如果您还希望它与分辨率一起使其更大，请将其放在 ViewBox 中。但是不要硬编码宽度和高度，但 MaxWidth/MaxHeight 可以工作！

<Viewbox>
<RelativePanel>
<!--Your controls here positioned in RelativePanel-->
</RelativePanel>
</Viewbox>

在 RelativePanel 中，您描述所有内容应放置的位置，在 VisualStateManager 中，您定义根据分辨率应如何表现。

查看这篇博文：MSDN BLOGS UWP: New Controls (part 1 – RelativePanel)

【讨论】：