Question

我刚刚开始学习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＆＃34;和6＆＃34; 原文4＆＃34;和6＆＃34;屏幕：

我在6＆＃34;屏幕，所以我应该在最小的屏幕上定义布局或我应该怎么做？非常感谢你。

Answer 1

针对您的方案的彻底解决方案是根据屏幕大小定义自适应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>

如果您还需要更多信息，请与我们联系。

Answer 2

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

Margin="10, 20, 250, 10"

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

<ColumnDefinition Width="350" />

你不应该硬编码这样的值 - 以你的用户界面流畅和敏感的方式使用面板。

首先阅读Define layouts with XAML

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

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

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

3 个答案: