UWP元素大小调整

Question

我是UWP的初学者，

我们如何为手机和台式机中正常工作的元素提供尺寸？

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

Answer 1

了解Adaptive Layout in UWP

简而言之，您将使用新的自适应触发器根据屏幕宽度更改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>

Answer 2

在手机和桌面上实现漂亮和流畅的布局行为的方法很少。

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/

我也非常推荐Dante Gagne关于定制UWP设计的观看Channel9视频：

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