使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

更新日期: 2018-09-25 阅读次数: 3588 分类: UWP

昨晚写了个练手的 UWP 程序,但是在 1280 x 720 切换到 3000 x 2000 分辨率之后,发现整个排版都是乱的。

突然觉得自适应布局是个不能忽视的问题。因为,UWP 的审核太严格了,不知道会不会因为这个拒绝通过审核。。。

今天上午啃了一遍 UWP XAML Layout Panel 相关的文档,感觉有了大概的概念。于是把页面的布局大概画了个草图

使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

即,使用 Grid 加 StackPanel 实现自适应布局。非常类似于 grid tutorial 官方文档的案例。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>

定义三列,会看到可视化编辑视图里,会对应的出现三列。

使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>

再定义两行

使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

最终实现效果

使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

总结

XAML 可视化编辑功能,其实主要用来预览,真要排版起来,还是手写 XAML 代码要高效的多,代码可读性也比自动生成的要好一万倍。

参考

https://docs.microsoft.com/en-us/windows/uwp/design/layout/grid-tutorial

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2019年12月20日 澳门回归日
2019年12月21日 国际篮球日
2019年12月22日 冬至
2019年12月24日 平安夜
2019年12月25日 圣诞节
查看更多节日