UWP 元素大小调整

Question

我是 UWP 初学者，

我们如何为在手机和桌面上都能正常工作的元素指定尺寸？

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

Answer 1

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

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

自适应触发器
DeviceFamily 文件夹
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 的 Channel9 视频，了解定制的 UWP 设计：

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

UWP 元素大小调整

UWP element sizing

size

uwp