WPF之路 WPF布局系統

2021-06-19 08:56:45 字數 3723 閱讀 2463



0,什麼是布局

這是乙個很簡單的問題。簡單來說,就是把一些控制項有條理的擺放在介面上合適的位置,顯然擺的亂七八糟不能算布局。在wpf中,這個條理與winform中略有不同,讓我們看個很簡單的介面:

這樣子的介面大家在熟悉不過了。依圖所示,wpf先用藍線(假設的線)將介面劃分為上下兩部分,然後再有紅線劃分出多個方格,最後放入控制項,其中每部分中的控制項或劃分的空格只能縱向排列,或橫向排列,不能有其他選擇。大多數情況下,wpf程式介面上的控制項都要按照此種遞迴的方法逐個排列,最終形成所看到的介面。

1,基本元素——面板

在上節中我們了解了wpf布局原理,這可以簡單理解為大控制項中按排或列放入小控制項,小控制項在按照同樣規則放入更小控制項。這種能放入其他控制項的控制項是wpf布局系統中的基本元素——面板。面板是用來放東西的,既包括控制項元素,也包括面板自己。面板不僅能承載其他子元素(控制項),還能控制子元素的大小,位置以及如何排列。例如上述例子中,藍線劃分的面板控制子元素只能上下排列,而紅線劃分的面板控制的子元素只能橫向排列。

wpf預設提供了幾種面板都是從基面板(panel)繼承而來,看一下它們的繼承鏈。

system.windows.threading.dispatcherobject

system.windows.dependencyobject

system.windows.media.visual

system.windows.uielement

system.windows.frameworkelement

system.windows.controls.control

system.windows.controls.panel

system.windows.controls.canvas

system.windows.controls.dockpanel

system.windows.controls.grid

system.windows.controls.stackpanel

system.windows.controls.virtualizingpanel

2,常用容器控制項

wpf預設提供了數種布局控制項,常用的包括如下幾種:  名稱

用法說明

此面板可承載任意元素,包括控制項,圖形,甚至文字。各種元素依據螢幕座標確定位置。

此面板可指定元素的排列停靠方式,每個子元素的排列方式可以不同。

此面板使子元素按照縱橫網格排列。

此面板使子元素按照水平或垂直方向排列,兩個方向只能選其一。

與stackpanel相同,不同之處在於它可以使內容虛擬化。

使子元素按照水平或垂直方向排列,在行或列處換行或列,依舊按照水平或垂直方向從左到右或從上到下排列。

3,測量與排列

當我們在面板上放入子元素,並設定相應的屬性時,wpf的布局系統自動為我們完成2個過程:測量和排列,這是兩個非常重要的過程。

由於wpf介面元素有很多與布局有關的屬性,如座標,大小,對齊方式,相對位置,間距等。首先這些屬性使用的是與裝置無關的解析度單元,這導致同樣大小的元素在不同介面上顯示的效果可能不同;其次每個屬性值有一定的優先順序,例如button的height和width屬性優先於stretch屬性,如果設定 height, width 以及 stretch,會導致 stretch被忽略。

因此,儘管在設計時指定了屬性值,布局系統依然需要重新計算每個子元素在介面上的實際大小,位置,邊距等值,這些值被稱為「finalsize」。

4,基本屬性:alignment,margin和pading

在設計ui時,wpf為我們提供了一些屬性用於精確定位元素,其中最常用的有三個:alignment(包括水平,垂直),margin,pading,具體用法如下: 名稱

說明alignment

子元素在水平(垂直)方向的對齊方式,有左對齊,右對齊(頂端對齊,底部對齊),中間對齊,拉伸填充等四種方式。

margin

用於指定元素與其子級或同級之間的距離,包括上下左右四個值。也可通過使用 margin="20" 同時指定四個值。

pading

padding 在大多數方面類似於 margin,

只有少數元素有(公開),用於

將子元素的有效大小增大指定的厚度。

5,附加屬性

通過上面我們了解到子元素通過一些屬性值的設定實現在面板上布局,比如alignment對齊屬性,dock停靠排列屬性。這些屬性不屬於子元素本身,而依賴與所在的父元素。比如同樣是button,在dockpanel中有dock屬性,而在grid中就沒有。這些屬性的存在依賴與父元素,在wpf中稱做「附加屬性」。

附加屬性的用途是允許不同的子元素為實際在父元素中定義的屬性指定唯一值,目的是讓子元素通知父元素它將如何在介面中呈現。

如上面提到的dockpanel.dock 屬性

,因為它將在 dockpanel 中包含的元素上設定,而不是在 dockpanel 本身設定。注意,相對於子元素,父元素提供的附加屬性相當於全域性屬性。

6,布局與效能

通過上面我們了解到,當給介面元素的布局屬性賦值時,布局系統需要重新計算和排列所有子元素的「finalsize」(因為改變影響不可知)。這是乙個遞迴的過程。如果不注意,可能會帶來效能問題。因此在設計時應注意下面幾點:

1,應注意哪些屬性值更改會引起執行布局系統的遞迴更新;

2,如有可能,應使用 rendertransform 而不要使用 layouttransform;

3,避免不必要地呼叫 updatelayout,因為updatelayout強制呼叫布局系統的遞迴更新;

4,當包含大量元素集合時,請使用 virtualizingstackpanel虛擬化元素;

7,總結

通過本文,我們大概了解了wpf的布局系統,常用的布局面板,與布局有關的幾個屬性,以及設計開發ui時的注意事項。這些內容很多與winform中的相關概念相通,可以說是舊瓶裝新酒,稍加思考,並不難理解;如果深入了解,會發現與winform截然不同。但作為初學者,如果能靈活使用文中所講的知識點,深入理解注意點,對自身的提高還是很有幫助的。

WPF之路 WPF布局系統

前言 前段時間忙了一陣子google earth,這週又忙了一陣子架構師 開題報告,現在終於有時間繼續從helloworld到wpf world 中,我們對wpf有了個大概的了解,並了解了初學wpf時應該從哪些知識點入手。今天我們就從最基本的知識點之一布局系統來繼續學習wpf,主要包括如下內容。0,...

WPF 基礎 布局系統

布局系統 術語 布局 描述測量和排列 元素的 集合的成員 然後在螢幕上繪製它們的過程。每當子 改變其位置時,布局系統就可能觸發乙個新的處理過程。簡單地說,布局是乙個遞迴系統,實現在螢幕上對元素進行大小調整 定位和繪製。布局系統為 集合的每個成員完成兩個處理過程 測量處理過程和排列處理過程。不論何時呼...

WPF學習之路(一) 初識WPF

參考 葵花寶典 wpf自學手冊 vs2012 先建立第乙個wpf小程式 1.建立wpf程式 2.檢視solution,wpf中xaml檔案和cs檔案經常成對出現 3.新增button和click事件 mainwindow.xaml mainwindow.xaml.cs private void bu...