Grid布局方式

2021-09-06 18:43:31 字數 1858 閱讀 4590

wp7中grid布局類似html中的**,但是又不太一致!

為了測試新乙個3行3列的grid

方了方便,剔除掉其它xaml**

[c-sharp:collapse]view plain

copy

"layoutroot"showgridlines="true"> 

"r1">

"r2">

"r3">

"c1">

"c2">

"c3"> 

行分別命名為r1,r2,r3

其中行用高度,列用寬度來指定大小,同html不同的是用*表示百分比,確切的說不叫百分比。

示例1,僅以行做示例:

[xhtml:collapse]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

如果按百分比,三個行已經超過了100%,但是實際上sl是三個行平分的,可以想象成分成120份,每行佔40份,就是每行1/3。平均分配

示例2:

[xhtml:collapse]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

r3行佔20*嗎?實際上r1的高度是r3的20倍,r2的高度是r3的40倍,r2的高度是r1的2倍

示例3:

[xhtml:collapse]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

r3根據裡面的控制項高度占用高度,餘下的r1和r2按比例分,即r2是r1高度的2倍

示例4:

[xhtml]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

如果對r3的高度指定為自動,則不會受min/maxheight高度的限制,只會受內部控制項高度影響

示例5:

[xhtml:collapse]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

此時r3的高度受min/maxheight高度控制,若50/(20+40+50)*總高度  > 200,則按200顯示,否則按50/(20+40+50)*總高度 顯示

示例6:

[xhtml:collapse]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

此時r3的高度一直保持200,餘下的r1和r2按比例分配,即高度大於最大高按最大高度顯示,高度小於最小高度按最小高度顯示。

示例7:

[xhtml]view plain

copy

rowdefinition>

rowdefinition>

rowdefinition>

各行按實際高度展示,若總寬度不等於350,預設r3高度適應(但是actualheight = 50)

布局篇 Grid布局

特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式,可設定最大值和最小值 3 內部元素可以設定自己所在的行 列,還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...

grid布局學習

今天工作清閒時刷到grid布局,之前一直沒有關注,趁現在進行記錄一下,該文件主要是對翻閱的資料進行整理歸納 實際需求中經常有迴圈展示資料的情況,以前一直用float,flex等方式,但如果在一些複雜的網頁結構中,grid要更加靈活。對於居中 特別是垂直居中 問題 還有元素的一維分布 一條線上如何分布...

grid布局小結

定義grid容器的方式 display grid 或者display inline grid 行內塊元素 容器屬性 舉例 container舉例 container舉例 舉例 container container containergrid template屬性是grid template col...