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

我刚开始学习UWP编程。我想写一个类似于Windows 10中的人的应用程序。我支持多个屏幕有问题。UWP - 如何正确支持多种屏幕分辨率

我有布局是这样的：

<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" 屏幕输出：

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

来源

2015-11-03 miskohut

250右边缘在第一个屏幕截图上按下你的图像，所以看起来不好

Margin="10, 20, 250, 10"

此外，您的文本框的宽度是硬编码一样，

<ColumnDefinition Width="350" />

你不应该硬编码值 - 的方式，你的UI是流畅性和响应的使用面板。

开始通过阅读Define layouts with XAML

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

来源

2015-11-03 18:37:38

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

请让我知道你是否需要更多。

来源

2015-11-04 01:58:24

最好的方法是使用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)

来源

2015-11-04 08:11:44 hal9k2

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

回答

相关问题