UWP元素调整

Question

我是UWP的初学者，

我们如何给元素在手机和桌面上正常工作的元素提供大小？

即文本块主题必须在桌面上为200像素，在手机上为100像素。

Answer 1

有几种方法可以在手机和桌面上实现漂亮而平滑的布局行为。

1. 自适应触发
2. DeviceFamily文件夹
3. 的XAML行为

我发表了一篇关于如何实现良好的设计结果的两个博客文章：

https://mobileprogrammerblog.wordpress.com/2015/10/23/universal-windows-10-application-with-tailored-design-part-1/

https://mobileprogrammerblog.wordpress.com/2015/11/23/universal-windows-10-application-with-tailored-design-part-2/

https://blogs.windows.com/buildingapps/2015/11/30/xaml-behaviors-open-source-and-on-uwp/

我也肯定会推荐但丁加涅约量身设计UWP凝视着Channel9的视频：

https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2015-Final-Release-Event/Universal-Windows-Platform-Tailored-Experiences?ocid=SessionsInEvent

Answer 2

阅读有关Adaptive Layout in UWP

简而言之，您将使用新的Adaptive触发基于屏幕宽度改变你的UI。

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup> 
     <VisualState x:Name="Narrow"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MyText.Width" Value="100" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="WideScreen"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="500" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MyText.Width" Value="200" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>