(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.pswp.cn/news/286155.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286155.shtml
英文地址,請注明出處:http://en.pswp.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 : 程序的一次執行(程序編…