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

更新日期: 2018-09-25 阅读次数: 2767 分类: 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

爱评论不评论

近期节日

2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
2019年09月10日 教师节
2019年09月13日 中秋节
2019年09月16日 国际臭氧层保护日
2019年09月16日 世界清洁地球日
2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
查看更多节日