WPF控件的使用和布局ppt課件

1、TCSS V1.0 WPF學(xué)習(xí)之控件與規(guī)劃 TCSS V1.0 控件究竟是什么？q 程序的本質(zhì)就是“數(shù)據(jù)+算法-用戶輸入原始的數(shù)據(jù)，算法處置原始數(shù)據(jù)并得到結(jié)果數(shù)據(jù)。問題就在于程序如何將結(jié)果數(shù)據(jù)顯示給用戶。同樣一組數(shù)據(jù)，他可以運(yùn)用LED陣列顯示出來，或者以命令行方式借助各種格式控制符(如TAB)對(duì)齊并輸出，但這些都不如圖形界面(GUI Graphic User Interface)來的友好和方便。GUI的方便在于它對(duì)數(shù)據(jù)展現(xiàn)的直觀性，程序員可以經(jīng)過編程的方式將數(shù)據(jù)經(jīng)過圖形的方式展現(xiàn)出來，從而防止了用戶面對(duì)一大堆復(fù)雜數(shù)據(jù)的苦楚。提高了任務(wù)效率，普及了計(jì)算機(jī)的操作。TCSS V1.0q GUI是程序

2、界面的優(yōu)勝者，在Windows上實(shí)現(xiàn)圖形用戶界面有很多種方法，每種方法又都有本人的一套開發(fā)理念和工具。每種GUI開發(fā)方法與它的理念和工具共同組成了一種方法論，常見的有:q Windows API(Win API)：調(diào)用Windows的底層繪圖函數(shù)，運(yùn)用C言語(yǔ)，最原始也是最根底的。q Microsoft Foundition Class(MFC)：運(yùn)用C+言語(yǔ)將最原始的Win32 API封裝成控件類。q Visual Component Library(VCL)：Delphi和C+ Builder運(yùn)用的與MFC相近的控件類庫(kù)。q Visual Basic+ActiveX(VB6)：運(yùn)用組件化的思

3、想把Win32 API封裝成控件，以期與多種言語(yǔ)共用。q Java Swing/AWT：Java SDK中用于跨平臺(tái)開發(fā)的控件類庫(kù)。q Windows Form:.NET平臺(tái)上用于開發(fā)GUI的老牌勁旅，完全組件化，但是需求運(yùn)轉(zhuǎn)時(shí)支持。q Windows Presentation Foundition(WPF)：后起之秀，運(yùn)用全新的數(shù)據(jù)驅(qū)動(dòng)UI理念。TCSS V1.0q 縱覽Windows GUI開發(fā)歷程，這些方法論可以分為4代:q Win API時(shí)代：函數(shù)調(diào)用+音訊處置。q 封裝時(shí)代：運(yùn)用面向?qū)ο罄砟顚in API封裝成類，由來自UI的音訊驅(qū)動(dòng)程序處置數(shù)據(jù)。q 組件化時(shí)代：運(yùn)用面向組件理念在

4、類的根底上分裝成組件；音訊被封裝成了事件。變成事件驅(qū)動(dòng)。q WPF時(shí)代：在組件的根底上，運(yùn)用專門的UI設(shè)計(jì)言語(yǔ)并引入數(shù)據(jù)驅(qū)動(dòng)UI的理念。TCSS V1.0q WPF之所以會(huì)被稱做是新一代關(guān)鍵有兩點(diǎn)：第一，之前幾代GUI只是運(yùn)用編程言語(yǔ)進(jìn)展UI設(shè)計(jì)，而WPF有本人專門設(shè)計(jì)UI的言語(yǔ)XAML。第二：前幾代的UI在和數(shù)據(jù)交互上都是由Windows音訊到控件事件一脈相承，一直把UI控件放在主導(dǎo)位置而數(shù)據(jù)處于被動(dòng)位置，用UI來驅(qū)動(dòng)數(shù)據(jù)的改動(dòng)，WPF在事件驅(qū)動(dòng)的根底上引入了數(shù)據(jù)驅(qū)動(dòng)的理念，讓數(shù)據(jù)重歸中心位置讓UI回歸數(shù)據(jù)表達(dá)者的位置。q UI是讓用戶可以察看數(shù)據(jù)和操作數(shù)據(jù)，為了讓用戶察看數(shù)據(jù)，我們需求用U

5、I來顯示數(shù)據(jù)；為了讓用戶可以操作數(shù)據(jù)，我們需求運(yùn)用UI來響運(yùn)用戶的操作。WPF中那些可以展現(xiàn)數(shù)據(jù)響運(yùn)用戶操作的UI元素稱之為控件Control。控件所展現(xiàn)的數(shù)據(jù)，我們稱之為控件的“數(shù)據(jù)內(nèi)容?？丶陧戇\(yùn)用戶的操作之后會(huì)執(zhí)行本人的一些方法或以事件的方式通知運(yùn)用程序，我們稱之為控件的行為或算法內(nèi)容?？梢奧PF中的控件扮演著雙重角色，是個(gè)非?；\統(tǒng)的概念。-Control是數(shù)據(jù)和行為的載體。而無需具有固定的籠統(tǒng)。TCSS V1.0WPF的內(nèi)容模型q 所謂物以類聚，根據(jù)能否可以轉(zhuǎn)載內(nèi)容，可以裝載什么樣的內(nèi)容，WPF中的內(nèi)容可以分為以下幾種類型:TCSS V1.0q 可以把控件想象成一個(gè)容器，容器中的內(nèi)容就

6、是控件的內(nèi)容。控件的內(nèi)容可以直接是數(shù)據(jù)，也可以是控件。當(dāng)控件的內(nèi)容還是控件的時(shí)候就構(gòu)成了控件的嵌套，所以WPF中的UI會(huì)呈現(xiàn)出一種樹形構(gòu)造。假設(shè)不思索控件內(nèi)部的樹形構(gòu)造，只察看用控件組成的樹，那么這棵樹稱為邏輯樹(Logical Tree);WPF控件往往是由更根本的控件構(gòu)成的，即控件本身就是一棵樹，假設(shè)連控件本身的樹都思索在內(nèi)，這棵樹比邏輯樹更繁茂，這棵樹被稱為可視元素樹(Visual Tree)。q 控件是內(nèi)存中的對(duì)象，控件的內(nèi)容也是內(nèi)存中的對(duì)象?？丶?jīng)過本人的某個(gè)屬性援用著其作為內(nèi)容的對(duì)象。這個(gè)屬性稱為內(nèi)容屬性。內(nèi)容屬性是個(gè)統(tǒng)稱，詳細(xì)到某個(gè)控件的時(shí)候，內(nèi)容屬性都有本人確切的名字-有的直接

7、叫Content，有的叫Child；有些控件的內(nèi)容可以是集合，其內(nèi)容屬性有叫Items或叫Children的。TCSS V1.0各內(nèi)容模型詳解q 我們把符合某類類容模型的元素稱為一個(gè)族，每個(gè)族用它們共同的基類來命名。q ContentControl族q 該族控件有以下特點(diǎn)q 均派生自ContentControl類。q 它們都是控件。q 內(nèi)容屬性的稱號(hào)是Content。q 只能由單一內(nèi)容充任其內(nèi)容。TCSS V1.0q HeaderedContentControlq 該族控件有如下特點(diǎn)q 均派生自HeaderedContentControl類，HeaderedContentControl是Con

8、tentControl的派生類。q 它們都是控件，用于顯示帶標(biāo)題的數(shù)據(jù)。q 除了用于顯示主體內(nèi)容的區(qū)域外，控件還有一個(gè)顯示標(biāo)題的區(qū)域。q 內(nèi)容屬性為Content和Header。q 無論是Content還是Header都只允許一個(gè)元素作為器內(nèi)容。TCSS V1.0q ItemControl族q 特點(diǎn):q 均派生自ItemControl類。q 它們都是控件，用于顯示列表化的數(shù)據(jù)。q 內(nèi)容屬性為Items或者ItemsSource。q 每種ItemControl都對(duì)應(yīng)著本人的條目容器(Item Container)。TCSS V1.0q HeaderedItemControlq 本族控件不光要具備

9、ItemControl的特性外，還要具有顯示標(biāo)題的才干。q 該族控件有以下特點(diǎn):q 均派生自HeaderedItemControl類。q 它們都是控件，用于顯示列表化的數(shù)據(jù)，同時(shí)可以支持顯示一個(gè)標(biāo)題。q 內(nèi)容屬性為Items,ItemsSource和Header。q 本族控件只需3個(gè):MenuItem、TreeViewItem、ToolBar。TCSS V1.0q Decorator族q 本族元素是在UI上起裝飾效果的。本族元素特定如下:q 均派生自Decorator類。q 起UI裝飾作用。q 內(nèi)容屬性為Child。q 只能有單一內(nèi)容充任其內(nèi)容。TCSS V1.0q TextBox和TextB

10、lock。q 這兩個(gè)控件最主要的功能就是顯示文本。TextBlock只能顯示文本，不能被編輯，所以又稱為靜態(tài)文本。TextBox那么允許用戶編輯里面的內(nèi)容。TextBlock雖然不能編輯內(nèi)容，但是可以運(yùn)用豐富的印刷級(jí)的格式控制標(biāo)志顯示出專業(yè)的排版效果。q TextBox不需求太多的格式顯示，所以它的內(nèi)容就是簡(jiǎn)單的字符串，內(nèi)容屬性為Text。q TextBlock由于需求操作格式，所以內(nèi)容屬性是Inlines(印刷中的“行)，同時(shí)TextBlock也保管了一個(gè)Text屬性，當(dāng)顯示一個(gè)簡(jiǎn)單的字符串，可以運(yùn)用這個(gè)屬性。TCSS V1.0q Shape族元素。q 友好的界面離不開圖形的搭配，Shape

11、族元素就是專門用來在UI上繪制圖形的一類元素。這類元素沒有本人的內(nèi)容，我們可以運(yùn)用Fill元素為其設(shè)置填充效果，還可以運(yùn)用Stroke屬性為它們?cè)O(shè)置邊線效果。q 本族元素特定如下:q 均派生自Shape類。q 用于2D圖像的繪制。q 無內(nèi)容屬性。q 運(yùn)用Fill設(shè)置填充，運(yùn)用Stroke設(shè)置邊線。TCSS V1.0q Panel族元素q 本族元素特點(diǎn)如下:q 均派生自Panel類。q 主要功能是控制UI規(guī)劃。q 內(nèi)容屬性為Children。q 內(nèi)容可以是多個(gè)元素，Panel將控制它們的規(guī)劃。TCSS V1.0q UI規(guī)劃(Layout)q WPF作為專業(yè)的界面技術(shù)，規(guī)劃功能是它的中心技術(shù)之一。

12、友好的用戶界面和良好的用戶體驗(yàn)離不開設(shè)計(jì)精良的規(guī)劃。日常任務(wù)中，WPF設(shè)計(jì)師最大的任務(wù)量就是規(guī)劃和動(dòng)畫。除了點(diǎn)綴型的動(dòng)畫之外，大部分規(guī)劃都是動(dòng)畫間的轉(zhuǎn)換，UI規(guī)劃的重要性可見一斑。規(guī)劃是靜態(tài)的，動(dòng)畫是動(dòng)態(tài)的，用戶體驗(yàn)就是用戶在這動(dòng)靜之中與軟件功能產(chǎn)生交互式的感受TCSS V1.0q 規(guī)劃元素q Grid：網(wǎng)格?？梢宰远x行和列并經(jīng)過行列的數(shù)量、行高列寬來調(diào)整控件的規(guī)劃。近似于Html中的table。q StackPanel：棧式面板?？蓪脑卦诔潭然虼怪狈较蚺懦梢粭l線，當(dāng)移除一個(gè)元素后，后面的元素會(huì)自動(dòng)向前填充空缺。q Canvas：畫布。內(nèi)部元素可以運(yùn)用以像素為單位的絕對(duì)坐標(biāo)進(jìn)展定位，

13、類似于Windows Form的規(guī)劃方式。q DockPanel：泊靠式面板。內(nèi)部元素可以選擇泊靠的方向，類似于Winform中設(shè)置控件的Dock屬性。q WrapPanel：自動(dòng)折行面板。內(nèi)部元素在排滿一行后可以自動(dòng)折行，類似于Html中的流式規(guī)劃。TCSS V1.0q Gridq 特點(diǎn):q 可以定義恣意數(shù)量的行和列，非常靈敏。q 行的高度和列的寬度可以運(yùn)用絕對(duì)值、相對(duì)比例或自動(dòng)調(diào)整的方式進(jìn)展準(zhǔn)確設(shè)定，并可以設(shè)置最大和最小值。q 內(nèi)部元素可以設(shè)置本人所在的行和列，還可以設(shè)置本人縱向跨幾行，橫向跨幾列。q 可以設(shè)置Children元素的對(duì)齊方向。q 基于以上這些特點(diǎn)，Grid的適用場(chǎng)一切:q UI規(guī)劃的大框架設(shè)計(jì)。q 大量UI元素需求成行或者成列對(duì)齊的情況。q