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>