控制項與布局

2022-08-31 12:15:12 字數 2622 閱讀 7171

1、不應顯示的設定控制項的尺寸,可以通過設定最大和最小尺寸來限制可以接受的大小範圍

2、不應該使用螢幕座標指定元素的位置,若控制項元素之間新增空白空間則使用margin屬性進行設定

3、布局容器和他們的子元素「共享」可以使用的空間,由容器根據控制項元素的內容設定更合適的尺寸

wpf布局包括兩個階段,一各測量(measure)和乙個排列(arrange)階段,在測量階段,容器遍歷所有子元素,並詢問元素所期望的尺寸,排列階段則容器在合適的位置放置子元素!

3.1布局屬性

所有的布局容器都是由system.windows.controls.panel抽象類派生而來,

此抽象類包含三個公有屬性

1、backgroud:該屬性用於為面板背景著色的畫刷,若需接收滑鼠事件則該屬性必須設定為非空值(可以使用透明色)

2、children:該屬性是面板中儲存的子元素集合  

3、isitemshost:該屬性是乙個布林值,若面板用於顯示乙個itemcontrol控制項相關聯的項,那麼這個屬性為true

雖然布局由容器決定,但是子元素依然具有一定的布局屬性設定,這些屬性由frameworkelement繼承而來,因此所有的wpf控制項都支援這些屬性

horizontalalignment:當水平方向上有額外空間時,該屬性決定了子元素在布局容器中如何定位,可以使用center,left,right和stretch屬性

verticalalignment:當垂直方向上有額外空間時,該屬性調整元素的定位,可選值center,top,bottom或stretch屬性

margin:該屬性在元素的周圍新增一定的空間,兩種賦值方式

margin=「5」 表示此元素距容器上下左右都為5個畫素點

margin=「5,10,15,20」  :表示該元素距父容器左邊距離5px,頂部距離10px,右邊距離15px,底部距離20px

minwidth,minheight :最小寬度和最小高度,

maxwidth,maxheight:最大寬度和最大高度

width和height:  顯示的設定控制項大小,一般不建議使用此方式

border不是面板控制項,而通常與布局面板一起使用的元素,用於為布局控制項新增背景或是在其周圍增加邊框,

border類常用屬性

background:使用brush物件設定邊框中所有內容後面的背景!

borderbrush和broderthickness:使用brush物件設定border物件邊緣線的顏色,並相應的設定邊框的寬度

cornerradius:該屬性設定border是否使用圓角,值越大,圓角效果越明顯

padding:  該屬性設定邊框和內部元素的距離

預設從上至下的元素排列方式,元素的高度由元素控制項的內容決定  

orientation="horizontal" 此屬性可以更改為由左至右進行元素排列

通過容器內子元素的附加屬性(dockpanel.dock屬性) 來設定子元素停靠的位置,未設定停靠屬性的元素預設由從左至右進行放置

grid通過不可見的虛線將面板劃分出乙個乙個的小格仔,在除錯階段可以使用grid.showgridlines屬性設定為true,可以顯示看到面板上被劃分格仔的虛線

使用grid布局的步驟一: 首先設定所希望的行和列的數量,如下圖,grid被劃分為3行3列的格仔,將數字按鈕依次放置在合適的格仔內

通過使用grid內元素的附加屬性 grid.row和gridcolum去設定元素放置的格仔內,座標由0開始,若未顯示設定,那麼子元素的附加值都為0,如圖button1沒有設定任何屬性,被放置在左上角第乙個格仔內

grid調整行和列,一般打通關組合使用下列屬性使介面適應不同解析度下的裝置顯示效果

1、直接設定行和列的大小,不夠靈活,無法適配其他解析度的裝置  

2、自動設定尺寸大小,每行每列的尺寸剛好滿足其元素的展示,

3、按照比例設定格仔大小   , 將grid劃分為2個格仔,第二個格仔為第乙個格仔的兩倍大小

下圖所示,第乙個格仔的寬度固定為100,第二個寬度為*,第三個格仔為2*  

在wpf中,分隔條由gridsplitter類表示,並且它是grid面板的特性之一,通過grid面板新增gridsplitter物件,使用者可以自定義列的寬度

使用原則:gridsplitter物件必須放置在grid單元格內,gridsplitter總是改變整行整列的尺寸

canvas面板是最輕量級的布局面板,面板中的子元素控制項 採用canvas的附加屬性,top,left,bottom,right來確定元素在面板的位置! 如果再canvas面板上有重疊的元素,則可以設定元素附加的canvas.zindex值來改變元素顯示的順序

WPF 布局與控制項Border

border 是乙個裝飾的控制項,此控制項繪製邊框及背景,在 border 中只能有乙個子控制項,若要顯示多個子控制項,需要將乙個附加的 panel 控制項放置在父 border 中。然後可以將子控制項放置在該 panel控制項中。border 的幾個重要屬性 background 用用乙個 bru...

控制項的布局

控制項的布局 當視窗中有多個控制項時,如何決定每個控制項的位置和大小。布局的方式 1 視覺化布局 在設計器裡拖放操作 2 手工布局 用 計算每個控制項的位置 3 使用布局器 用布局器自動布局 演示 新增幾個控制項,進行視覺化布局 按鈕,button 文字框,textbox 框,picturebox ...

Extjs的布局控制項 border布局

布局控制項 所謂的布局就是指容器元件中子元素的分布,排列組合方式.ext的所有容器元件都支援布局操作.每乙個容器都會有乙個對應的布局,布局負責管理容器元件中子元素的排列,組合以及渲染方式 extjs的布局基類為 ext.layout.containerlayout,其他的布局都是繼承該類.extjs...