(02).NET MAUI实战 布局

1.概要

既然要做实战开发会建项目之后就需要认识布局控件了,本篇文章分享.NET MAUI中的一些基础常用的布局控件。

  • Grid

  • StackLayout

  • FalyxLayout

  • AbsoluteLayout

2.详细内容

  • (1)Grid

语法:

<Grid RowDefinitions="50,50,50,50" RowSpacing="10" ColumnDefinitions="10,10" ColumnSpacing="10" Margin="{OnPlatform WinUI=5}"></Grid>

解读:

在MAUI中Grid的语法相比WPF来说,有不少的优化我们来逐个看看有哪些更新。(本文只演示了部分用法不代表全部)

属性名作用
RowDefinitions定义有几行(每用一个逗号分隔就代表有几行,以上代码为例有4个50那么就定义了4行高度为50的行)
RowSpacing定义行间距(每行的间隔为10px)
ColumnDefinitions定义有几列(每用一个逗号分隔就代表有几列,以上代码为例有2个10那么就定义了2列宽度为10的列)
ColumnSpacing列间距(每行的间隔为10px)
Margin定义内边距(这里的边距定义还需要指定对应的生效的平台,同时可以指定多个平台的上表现,以上代码的定义是在WinUI的平台上的每行的间隔为5px,还能指定其它平台的内容。如果不关心平台那么可以直接设定default默认全平台都按照这个样式来展现)


同时MAUI中的Grid也保留了以前WPF中Grid的定义,大家能看到蓝色的波浪线说明两种写法只能用其中一种。

427311d05669970e1c52e6ce0a75d3a2.png

代码应用:

2664d36cd4a649ae7e60f50e98929c1f.png

  • (2)StackLayout

语法:

<StackLayout Orientation="Horizontal" Spacing="10"  HorizontalOptions="Center" VerticalOptions="Center"/>

解读:

StackLayout和WPF中的StackPanle基础用法没有太大区别,不过还是多了一些MAUI中的特性。(本文只演示了部分用法不代表全部)

属性名作用
Orientation指定布局内容横向排列或纵向排列
Spacing指定布局内容的排列间距
HorizontalOptions按比例横向空间分布布局内容

e3636dcb63b3c732f4476ba549de21d3.png

VerticalOptions按比例纵向空间分布布局内容

40c31320f9de5c5939bb3c83cc202569.png


代码应用:

<StackLayout Orientation="Horizontal" Spacing="10"  HorizontalOptions="Center" VerticalOptions="Center"><Button></Button></StackLayout>
  • (3)FalyxLayout

语法:

<FlexLayout><Button WidthRequest="100" HeightRequest="20"></Button><Button WidthRequest="100" HeightRequest="20"></Button><Button WidthRequest="100" HeightRequest="20"></Button>
</FlexLayout>

解读:

我个人的理解是,该布局控件会自适应父级控件的宽高来自动调整布局。(这个控件的用法可以参考xamarin的文档。)

f137f943bd9182d91a1bee51f09a1ded.png

当窗体缩小时,布局会“收拢”。

21f0a1c877360728abd0c45991d9120c.png

  • (4)AbsoluteLayout

语法:

<AbsoluteLayout><Button AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="50,50"/>
</AbsoluteLayout>

解读:

AbsoluteLayout和WPF中的Canvs非常类似。绝对定位的布局方式。(本文只演示了部分用法不代表全部)

属性名作用
AbsoluteLayout.LayoutFlags指定布局方式的枚举

34fc3028972294635a6ea3ad2eaab6a6.png

AbsoluteLayout.LayoutBounds指定控件位置的坐标(示例中:x轴50,y轴50),可选值:AutoSize, 比例值(1为最大值可填0.7),位置值50

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286155.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Javascript] Avoid Creating floats if they are not needed

https://channel9.msdn.com/Series/Practical-Performance-Tips-to-Make-Your-HTMLJavaScript-Faster/06?WT.mc_id13400-DEV-sitepoint-article24 转载于:https://www.cnblogs.com/yoyohappy/p/5884629.html

七、后台入口及添加影院实现《仿淘票票系统前后端完全制作(除支付外)》

一、登录后台窗口显示与跳转 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节已经完成了登录和注册功能&#xff0c;在这一节咱们将会实现对应的后台入口进入和一些后台功能的制作。 首先咱们需要记录一下登录的UID&#xff0c;因为咱们后台界面…

正则表达式 学习笔记4.3

下面看看逆序环视结构&#xff1a;publicclassGeneralSix { publicstaticvoidmain(String[] args) { String[] strings newString[]{"see","bee","tee"};String[] regexs newString[]{"(?<s)ee","(?<!s)ee"}; for…

【MATLAB统计分析与应用100例】案例003:matlab调用smooth函数进行加噪数据的平滑处理

文章目录 1. 产生加噪正弦波信号,绘制加噪波形图2. 利用移动平均法对加噪信号进行平滑处理,绘制平滑波形图3. 利用lowess方法对加噪信号进行平滑处理,绘制平滑波形图4. 利用rlowess方法对加噪信号进行平滑处理,绘制平滑波形图5. 利用loess方法对加噪信号进行平滑处理,绘制…

C语言试题四十二之假定输入的字符串中只包含字母和*号。请编写函数fun,它的功能是:将字符串中的前导*号全部移到字符串的尾部。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

linux curl模拟登录网页

有时在批量抓取网站页面内容时&#xff0c;是需要处于登录状态的&#xff0c;否则无法获取。curl这个强大的工具可以完成这个工作。之前最好也先了解一下http POST方法&#xff0c;网站登录大都是用这个办法。本文基本上参考这篇文章,来自依云s Blog&#xff0c;是archlinux中文…

APP上架到各大应用商店的小总结

转自https://blog.csdn.net/niezhipeng8/article/details/79103436 想要把APP上架到应用市场都要先注册开发者账号才可以。这里的方法包括注册帐号和后期上架及一些需要注意的问题。注意&#xff1a;首次提交应用绝对不能随便删除&#xff0c;否则后面再提交会显示应用APP冲突…

八、影片添加页实现《仿淘票票系统前后端完全制作(除支付外)》

一、影片添加页 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一届影院添加页功能已经完成&#xff0c;这一节咱们实现影片添加页内容。 影片添加页如下&#xff1a; 该页面实现起来比较简单&#xff0c;点击图片后使用文件上传组件进行图片上传…

MAUI 通用权限框架(ABP)

简介众所周知, MAUI目前发布正式版本了, 那么对应, MAUI对应的ABP框架也应该马上出现, 这点也恰巧在我的预料之中, 所以在去年年底就开始着手Xamarin.Forms的ABP框架迭代。到目前为止,针对Xamarin.Forms 以及 WPF版本的 ABP框架已经在之前的文章当中给大家介绍过。那么本次主要…

十六、Struts2文件上传与下载

文件上传与下载 1.文件上传前提&#xff1a;<form action"${pageContext.request.contextPath}/*" method"post" enctype"multipart/form-data"> 2.动作类中字段需要符合命名规范 表单字段名&#xff1a;image 动作类&#xff1a;…

C语言试题四十三之求出ss所指字符串中指定字符的个数,并返回此值。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

《Matlab实用案例》系列Matlab从入门到精通实用100例案例教程目录(持续更新)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之《Matlab使用案例》 3. 专栏目录 【MATLAB统计分析与应用100例】案例001&#xff1a;matlab使用Importdata函数导入文本txt数据【MATLAB统计分析与应用100例】案例002&#xff…

Quartz2 定时器 《一》(概述)

为什么80%的码农都做不了架构师&#xff1f;>>> Quartz2 说白了&#xff0c;就是个功能比较完善的定时器&#xff0c;可以通过指定的时间执行指定的任务。 应用范围 a.比如让商城的活动&#xff08;对象&#xff09;在指定的时间&#xff08;定时&#xff0…

SQL 数据库远程备份 语句

DECLARE DATABakPath VARCHAR(200) N\\192.168.0.22\DataBak --远程共享目录&#xff08;备份文件夹根目录&#xff09; DECLARE UserName VARCHAR(50) N192.168.0.22\dbuser --远程目录访问用户账户 DECLARE UserPwd VARCHAR(50) N123456 --远程目录访问用户密码 DECLARE R…

九、为影院添加影片《仿淘票票系统前后端完全制作(除支付外)》

一、数据获取 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节已展示了影院页&#xff0c;但是你点击影院页进入后将看不到任何数据&#xff0c;这是因为当前影院还未有添加的影片&#xff0c;本节之后将会从页面开始完成这个功能。 首先我们应…

大话领域驱动设计——基础设施层

概述基础设施层是整个系统的⽀持层&#xff0c;通过对第三⽅类库的调⽤或系统的抽象和集成来实现对其他层的⽀持。与传统架构不同在DDD中&#xff0c;数据库访问的具体实现&#xff08;仓储&#xff09;也被放在了基础设施层。在DDD的理念中&#xff0c;基础设施层是为领域和用…

C语言试题四十四之移动一维数组中的内容,若数组中由n个整数,要求把下标从0到p(p小于等于n-1)的数组元素平移到数组的最后。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

【MATLAB统计分析与应用100例】案例004:matlab调用smoothts函数对金融时间序列数据进行平滑处理

时间序列数据进行平滑处理效果预览: Excel原数据部分预览: 1. 读取金融时间序列数据,绘制波形图 x = xlsread(examp03_02.xls); % 从文件examp03_02.xls中读取数据 price = x(:,4)

javaweb优化

http://blog.csdn.net/jiangzhaobao/article/details/8003244转载于:https://www.cnblogs.com/yzjT-mac/p/5889292.html

MultiProcess-MultiThread

听到一些关于python多进程与多线的例子&#xff0c;感觉比较经典&#xff0c;把一些例子分享一下. 内容如下&#xff1a; Process、Thread、GIL、Process fork、Multiprocessing、Queue、ProcessPool、Multiprocess-Multithread comparison (1) Process : 程序的一次执行(程序编…