UWP - 如何正確支持多種屏幕分辨率

Question

我剛開始學習UWP編程。我想寫一個類似於Windows 10中的人的應用程序。我支持多個屏幕有問題。

我有佈局是這樣的：

<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" 屏幕上定義該佈局中，所以我應該在最小的屏幕上定義佈局，或者我應該怎麼做呢？非常感謝。

Answer 1

250右邊緣在第一個屏幕截圖上按下你的圖像，所以看起來不好

Margin="10, 20, 250, 10" 

此外，您的文本框的寬度是硬編碼一樣，

<ColumnDefinition Width="350" /> 

你不應該硬編碼值 - 的方式，你的UI是流暢性和響應的使用面板。

開始通過閱讀Define layouts with XAML

然後繼續你的佈局試驗 - 這是最好的學習方式。

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

請讓我知道你是否需要更多。

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)