WPF介面設計技巧 使用UI自動化布局

2021-05-07 21:48:06 字數 2542 閱讀 4324

今天開始編寫附屬的加密/解密工具,對ui自動化布局有些心得,就此分享出來。

我們先來看一下實現的效果:

這樣的介面是怎麼個自動法呢?請看下圖:

就是說介面在適度的伸縮時,不會破壞其布局結構及美觀性。

這樣做有什麼好處呢?你可以想象以下情況:

1.需要使用者或通過程式控制變更窗體尺寸以適應特殊要求時。ui自動化可以伸縮各元素以適應變化後的窗體。

2. 軟體語言變更,或需要字型/區域性元素縮放時。將設計初始時的語言改變為其他語言,按鈕、標籤等元素呈現所需的最小空間都會有增減,ui自動化可以調整變動元素,並使與之相關的元素也能做出相應的調整。

3.需要對ui設計進行更改時。可以說執行ui自動化是一件一勞永逸的事,此後你都不必再為諸如乙個標籤的文字變更而去調整其他元素的座標與尺寸了。

下面我們就來談一談ui自動化所需的各種技巧:

讓視窗適應內容的大小

我們通常所做的都是為window設定固定的尺寸,然後再向裡面填東西,但是也許反過來會更便於操作和使用。

清除window的寬度和高度,並為之設定 sizetocontent="widthandheight" 即可。

同理,window內的布局容器(如grid)也應當避免使用絕對寬度和高度,除非在其內容無法決定寬度或高度的情況下。

但請注意,此類設定可以留在布局即將完成時再進行,否則你可能會在編輯器裡看到乙個0寬0高的窗體,從而沒有了視覺化的操作空間。或者,你可以為容器設定較小的minheight和minwidth值,這樣它們即保留了伸縮特性,又會具有一定的可視/操作空間。

使用grid進行全域性性布局

微軟把 grid 作為 visual studio 的預設 wpf 模板的布局不是沒有道理的,grid的確可為各種布局控制項之首。

grid 可以說是結合了傳統的**布局與座標布局的優點的新型布局方案。

如你所見,藍色的線條就是grid劃分的格仔,一些元素老老實實的呆在乙個格仔裡,還有一些毫不客氣的橫跨了多個格仔。

要設計這樣的布局,你需要拿出當年w3c跑出來叫板之前的**布局網頁理念,才能游刃有餘地安排元素。

元素在格仔內的相對位置由其 margin 操控。

其相對的方向採用上、下、左、右均可,但橫向和豎向都至少依賴乙個方向,通過verticalalignment和horizontalalignment屬性設定。

我們來看一下我這個布局的grid是如何定義的:

我定義了3個列,都沒有設定寬度,這三列用來承載最下方的三個按鈕,我希望按鈕的最小尺寸會根據其內容而定,所以不進行絕對值設定。

我又定義了5個行,其中4個是具有絕對的高度值,中間的乙個就是listbox所在的區域,我希望介面高度伸縮時,唯一可隨之變化的就是這個區域,所以設定為*,但是這時如果我不為grid指定絕對高度值的話,grid將無法判斷中間這個區域的高度具體應為多少,它把它會變為0,所以我指定了grid的高度為391。

讓按鈕自動化

我們可以不為按鈕指定固定的寬度或高度,這樣它就會隨其內容而伸縮了,不過這樣按鈕邊緣會緊貼其內容,這可以通過設定其padding屬性來進行調整:

用內容和 padding 屬性撐起了按鈕的最小尺寸後,還可以通過 margin 屬性與其所在的 grid 格仔邊緣進行關聯,這樣在格仔變小時,不會小於按鈕的最小尺寸,格仔變大時,按鈕會隨之伸展。

其他元素大都也與按鈕同理,如label、textblock。

利用dockpanel進行區域性布局

雖然grid很棒,但我們不能完全依賴於它,滿螢幕畫上密密麻麻的格仔或是一層又一層巢狀的grid都不便於設計和維護,並且grid布局會消耗很多的運算資源。

對於區域性的布局,可以採用更輕量級的布局方案,有時會獲得更好的收效,dockpanel就是一種簡便的**布局控制項。

我通過dockpanel實現了這個區域的布局:

這個區域的布局要求是:

1.標籤居左,採用最小寬度

2.按鈕居右,採用最小寬度

3.中間的空檔由密碼框完全佔據

實現的**是這樣:

通過dockpanel.dock屬性可以設定元素位於dockpanel布局方位。

標籤未設定該屬性,因為其預設為居左,也就是dockpanel.dock="left"。

按鈕設定為 dockpanel.dock="right" 。

本該排列在第二,也就是會居中並填滿空白區域的密碼框寫在了最後,並且也未設定dockpanel.dock屬性,難道它也是採用了預設的 dockpanel.dock="left" 嗎?非也,如果你顯式設定為dockpanel.dock="left",它就會向左排在標籤後面,並縮成一小團,非常難看。這其實是因為dockpanel有乙個預設為真的屬性:

最後乙個元素會用以填滿剩餘的區域。

這個設計手法看起來是不是很像css布局時設定的float浮動屬性?

)金鑰:

粘帖入直接加密/解密

加密/解密並備份原檔案

加密/解密到指定目錄..

當然,你不能期待直接編譯或使用這個**了,它只是我的程式的一部分。

我會在以後更多地分享我在編寫 mailmail 期間獲得的經驗的,現在的任務是趕緊把它造出來,嘿嘿。

現在是這個樣子滴:

UI介面設計 介面設計流程

人類社會逐步向非物質社會邁進,網際網路資訊產業已經走入我們的生活。在這樣乙個非物質社會中,與軟體這些非物質產品再也不象過去那樣緊緊靠技術就能處於不敗之地。工業設計開始關注非物質產品。但是在國內依然普遍存在這樣乙個稱呼 美工 工 的意思就是沒有思想緊緊靠體力工作的人。這是乙個很愚昧的做法,愚昧在於稱呼...

UI介面設計 skin

具體見 使用方法 1 將skinppwtl.lib skinppwtl.dll skinppwtl.h三個檔案及相應 拷貝至工程資料夾下 2 在stdafx.件中加入 include skinppwtl.h endif afx no afxcmn support include skinppwtl....

UI設計 介面設計原則

最近一段時間專案的功能開發基本完成,目前進行介面的修改和完善,一屋子人一起討論cs生產終端的頁面設計,這是個好問題,下面來一起學習一下。使用者在學習和接受新的事物時是需要很大成本的,所以你的設計越簡單越好。這其中包括介面簡單 使用者需要操作的功能一目了然 視覺效果便於理解和使用。如上所示,簡單的登入...