XAML開發(fā)入門之XAML的五大元素

2019-11-17 04:43:24

字體：大中小

供稿：網(wǎng)友

　　所有的XAML均是一個(gè)WPF類，但是并不是所有的WPF類都可以用XAML描述。那些可以用XAML描述出來的元素大多數(shù)是用來表現(xiàn)用戶界面的，這些元素都是由System.Windows.UIElement類派生出的。該類包含一些與可視化用戶界面相關(guān)的屬性，以提供給XAML元素使用。一個(gè)從System.Windows.UIElement派生的元素可以在頁面上進(jìn)行可視化的呈現(xiàn)、可以接受來自鍵盤和鼠標(biāo)的輸入、還可以可視化地調(diào)整大小和布局子元素的位置，以及觸發(fā)事件。

　　并不是所有的XAML元素都派生自System.Windows.UIElement。例如LineBreak、TableColumn和Document等元素，都是派生自System.Windows.FrameworkContentElement類。通常該類中的元素是不能在頁面上進(jìn)行呈現(xiàn)出來的。

　　大部分的XAML元素按照其功能可以分為如下的5個(gè)部分：

　　·根元素
　　·控件元素
　　·面板元素
　　·圖形和幾何元素
　　·文檔元素

　　根元素

　　根元素是用來作為包含所有用戶界面元素的基本容器。一個(gè)XAML頁面必須要有一個(gè)根元素，最常用的根元素有Page、Window、StackPanel、DockPanel、Canvas和Grid。我們可以在一個(gè)根元素包含一個(gè)或者多個(gè)XAML元素，這些包含在內(nèi)的XAML元素稱為該根元素的子元素(在你打開XAMLPad工具時(shí)，它會(huì)自動(dòng)為你創(chuàng)建一個(gè)根元素－Page)。除了上述的幾種根元素外，我們還可以從Page或Window中派生出一個(gè)新類，這樣我們就可以創(chuàng)建自定義的根元素，并在XAML頁面中使用。

　　根元素還必須引用適合的命名空間，就像以前的示例程序所顯示的那樣，我們?cè)赪PF程序中經(jīng)常引用的命名空間為：

01 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/02 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　控件元素

　　控件元素處理和用戶的交互。例如我們使用文本框控件輸入數(shù)據(jù)、使用多選控件選擇列表項(xiàng)或者執(zhí)行其它的一些交互操作。這些控件元素按照其特性也可以分成5類

　　·簡(jiǎn)單控件直接由System.Windows.Control派生而來，并且不包含Content、Items或Header等屬性。這些控件主要有HorizontalScrollBar、VerticalScrollBar、Frame、TextBox和RichTextBox。

　　·內(nèi)容控件有Cotent屬性，但是沒有Items或Header屬性。注重內(nèi)容控件中只可以有一個(gè)XAML元素作為其包含的內(nèi)容，但是所包含的XAML元素又可以包含多個(gè)元素，例如Panel元素。內(nèi)容控件主要有Button、RepeatButton、Label、RadioButton、CheckBox、ListBoxItem、GroupItem、StatusBarItem、ToolT ip、ScrollViewer和Window。

　　·項(xiàng)目控件包含Items屬性，但是沒有Head和Content屬性。項(xiàng)目控件通常用來展示多個(gè)選項(xiàng)供用戶選擇。這些控件主要有ListBox、ComboBox、Menu、ContextMenu、RadioButtonList, 和TabControl。

　　·標(biāo)題項(xiàng)目控件包含Head和Items屬性，但是沒有Content屬性。Header屬性用來為各個(gè)項(xiàng)目添加一個(gè)標(biāo)題，而Items屬性可以用來指定多個(gè)子元素。注重在標(biāo)題項(xiàng)目控件中，Items屬性是隱式聲明的，也就是說我們并不直接使用Items屬性指定各個(gè)子元素。下面通過下面的代碼片斷來查看標(biāo)題項(xiàng)目控件(這里為MenuItem)的具體實(shí)現(xiàn)方式：

03 ＜MenuItem Header="First Menu Item"＞
04 ＜MenuItem Header="First Child Item" /＞
05 ＜MenuItem Header="Second Child Item" /＞
06 ＜/MenuItem＞
　　上述的示例中包含一個(gè)主MenuItem元素，并且使用Header屬性為其指定說明信息。在＜MenuItem＞和＜/MenuItem＞之間還包含了另外兩個(gè)MenuItem元素，作為主MenuItem元素的子項(xiàng)目。

　　標(biāo)題項(xiàng)目控件有如下兩種，分別為MenuItem和ToolBar。

　　·標(biāo)題內(nèi)容控件包含Header和Content屬性，但是沒有Items屬性。如同內(nèi)容控件一樣，標(biāo)題內(nèi)容控件可以通過Content屬性指定一個(gè)子元素。標(biāo)題內(nèi)容控件包括EXPander和TabItem。

　　Table 3-1. Attributes supported by control typ

控件類型ContentHeaderItemsSimpleN N N ContentY NNItemN NYHeader itemN YYHeader contentY YN
　　面板元素

　　面板元素主要是用來處理頁面的布局，并且可以作為容器來包含其它的元素，例如控件或其它的面板。一些從Panel派生的元素通常被用作為根元素，但是Panel的首要目的還是為XAML頁面提供布局支持，并對(duì)頁面上的各個(gè)元素進(jìn)行合理的布置。尤其是一些非凡的面板元素，可以在設(shè)計(jì)時(shí)指定一個(gè)特定的布局方案。用來用戶界面設(shè)計(jì)的面板元素包括DockPanel、StackPanel、Canvas、WrapPanel和Grid。

　　圖形和幾何元素

　　圖形和幾何元素通常是用來呈現(xiàn)二維矢量圖形。圖形元素派生自Shape類，我們使用這些元素我就可以直接創(chuàng)建相關(guān)的圖形。在WPF中可以直接使用的圖形包括Ellipse(橢圓)、Line(線)、Path、Polygon(多邊形)、Polyline(折線)和Rectangle(矩形)。圖形元素也是UIElement中的一種，這就意味著我們可以在Panel元素和其它的控件中使用這些圖形控件。

　　幾何元素，同樣是用來呈現(xiàn)二維矢量圖形，但是它比圖形元素更具靈活性。我們可以使用幾何元素來生成一些簡(jiǎn)單的二維矢量圖形，例如圓或平面多邊形，也可以用來構(gòu)建一些復(fù)雜的矢量圖形，例如貝塞爾曲線和弧形。注重，幾何元素是無法進(jìn)行自我呈現(xiàn)的，它必須依靠其它的元素才能繪制圖形,例如Drawing和Path。因?yàn)閹缀卧刂皇莿?chuàng)建圖形的輪廓，并沒有具體的呈現(xiàn)，所以我們還要使用那些在圖形元素中經(jīng)常使用的屬性Fill(填充)、Stroke(畫筆)和StrokeThicknessare(畫筆濃度)，來創(chuàng)建矢量圖形的具體呈現(xiàn)方式。幾何元素包括CombinedGeometry、LineGeometry, EllipseGeometry、GeometryGroup、PathGeometry、RectangleGeometry、PathSegment、ArcSegment, LineSegmen、BezierSegment、QuadraticBezierSegment、PolyQuadraticBezierSegment、PolyLineSegment, PolyBezierSegment、StartSegment和CloseSegment等。文檔元素

　　文檔元素是用來處理文檔的呈現(xiàn)方式。文檔一般分為兩大類，流式布局和固定布局。FixedDocument元素就是用來設(shè)計(jì)那種所見即所得的固定布局。也就是說你在設(shè)計(jì)時(shí)，文檔的格式是什么，在呈現(xiàn)時(shí)它的格式也是什么，沒有任何的差異。

　　而用FlowDocument元素構(gòu)建的流式布局文檔在呈現(xiàn)時(shí)具備更好的靈活性，并且也提高了文檔的可讀性。流式布局文檔的呈現(xiàn)效果是由多種因素決定的，例如屏幕和頁面的大小、字體大小，以及用戶的喜好所作的設(shè)置。流式布局文檔是由一個(gè)或多個(gè)自Block或者Inline派生的元素組成的。Block、Figure、Floater、List、ListItem、Paragraph、Section、Table和TableCell等Block元素通常是用來組織和格式化文本塊。而Inline元素則是用來格式化文本塊中的文本信息，Inline元素主要包括Bold、accessKey、LineBreak、Hyperlink、Italic、Subscript、Superscript和Underline。

　　一些文檔元素看起來是不是似曾相識(shí)，例如Paragraph、Table和Italic。是的，我們其它的一些用戶界面標(biāo)記語言中也會(huì)用到這些類似的格式化元素，例如Html中的＜p＞、＜table＞和＜i＞。雖然它們的實(shí)現(xiàn)機(jī)制都差不多，但是XAML中的文檔元素包含了豐富的屬性，這是相應(yīng)的HTML副本所不具備的。

　　盡管XAML的核心語法和其他的標(biāo)記語言(例如HTML)非常類似，但是XAML的用戶界面元素在包含要呈現(xiàn)的內(nèi)容時(shí)，所受到的限制是非常有限的，并不像HTML中那么嚴(yán)格。例如，我們?cè)谑褂靡粋€(gè)Button元素時(shí)并不一定就要使用文本作為提示信息，你還可以使用圖片或者其它的由UIElement派生的元素作為提示信息。下面的這個(gè)示例就是一個(gè)在Button元素中，使用一個(gè)"紅綠燈"式的三個(gè)圓作為提示信息。

07 ＜StackPanel xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
08 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
09 HorizontalAlignment="Center"
10 Margin="10"＞
11 ＜Button
12 Width="50"
13 Height="100"＞
14 ＜DockPanel＞
15 ＜Ellipse Margin="5"
16 DockPanel.Dock="Top"
17 Stroke="Black"
18 Width="10"
19 Height="10"
20 Fill="Red" /＞
21 ＜Ellipse Margin="5"
22 DockPanel.Dock="Top"
23 Stroke="Black"
24 Width="10"
25 Height="10"
26 Fill="Yellow" /＞
27 ＜Ellipse Margin="5"
28 DockPanel.Dock="Top"
29 Stroke="Black"
30 Width="10"
31 Height="10"
32 Fill="Green" /＞
33 ＜/DockPanel＞
34 ＜/Button＞
35 ＜/StackPanel＞

QQread.com 推出各大專業(yè)服務(wù)器評(píng)測(cè) linux服務(wù)器的安全性能 SUN服務(wù)器 HP服務(wù)器 DELL服務(wù)器 IBM服務(wù)器聯(lián)想服務(wù)器浪潮服務(wù)器曙光服務(wù)器同方服務(wù)器華碩服務(wù)器寶德服務(wù)器屬性

　　在本文曾多次提過XAML元素的屬性是和WPF類中的屬性對(duì)應(yīng)的，例如XAML中的Button元素存在Width屬性，該屬性是和System.Windows.Button類中的Width屬性對(duì)應(yīng)的。為了說明XAML和WPF類的相互關(guān)系，我們分別在如下的兩個(gè)程序清單中使用XAML和C#來聲明一個(gè)Button元素實(shí)例：

36 ＜Button
37 Width="100"
38 Name="myButton"
39 Height="20"
40 Content="This is my button" /＞
　　相應(yīng)的C#代碼實(shí)現(xiàn)：

41 Button myButton;
42 myButton.Width=100;
43 myButton.Height=20;
44 myButton.Content = "This is my button";
　　就如同XAML中的Button元素名稱和Button類的名稱相同一樣，Button元素的各個(gè)屬性也和Button類中的屬性名稱一一對(duì)應(yīng)(Name= Name,Height=Height，依此類推)。

　　在上述代碼示例中，Name和Content屬性的類型都是String，因?yàn)閄ML本身就是一種基于文本的格式，所以其屬性值用文本來描述是合乎情理的。那么作為XML的一種衍生類型，XAML其屬性是否還有其它類型呢？我們?cè)谙旅娴氖纠a使用了不同的屬性類型：

45 ＜Rectangle
46 Width="200"
47 Height="100"
48 Stroke="Red"
49 Fill="Yellow" /＞
　　在上述的Rectangle元素中沒有一個(gè)屬性是String類型的，Width和Height都是Double類型的，而Stroke和Fill是Brush類型的。為了支持各自不同的屬性類型，XAML需要使用.NET中的類型轉(zhuǎn)換系統(tǒng)(TypeConverter)。也就是在XAML中的所有屬性值都是用文本字符串來描述的，但是類型轉(zhuǎn)換系統(tǒng)會(huì)在某一特定的階段將這些文本字符串和屬性本身的類型映射起來。例如在上述的示例中，LengthConverter類型轉(zhuǎn)換器會(huì)自動(dòng)將Width和Height對(duì)應(yīng)的"200"和"100"文本字符串轉(zhuǎn)換為雙精度類型的200和100(WPF之所以知道使用Double類型是因?yàn)樵贔rameworkElement類中的WidthProperty和HeightProperty字段被標(biāo)記了一個(gè)TypeConverterAttribute，這樣就可以知道在類型轉(zhuǎn)換時(shí)使用何種類型轉(zhuǎn)換器)。由于Stroke和Fill這兩個(gè)屬性并沒有標(biāo)記一個(gè)TypeConverterAttribute，但是它們都是屬性Brush類型的，而Brush類型又標(biāo)記一個(gè)TypeConverterAttribute來指定其類型轉(zhuǎn)換器為BrushConverter，所以BrushConverter會(huì)自動(dòng)將其文本字符串類型的屬性值轉(zhuǎn)換為Brush類型。

　　盡管WPF中的類型轉(zhuǎn)換系統(tǒng)是非常有用的，但是在某些情況下它仍然存在著一些不足。例如某個(gè)屬性值不存在適合的類型轉(zhuǎn)換器進(jìn)行從文本到實(shí)際類型的轉(zhuǎn)換，或者是一個(gè)描述屬性值的文本字符串過于復(fù)雜，以致我們不得不作大量的工作才可以實(shí)現(xiàn)類型的轉(zhuǎn)換。現(xiàn)在請(qǐng)你考慮一個(gè)問題，我們要實(shí)現(xiàn)上述的給矩形填充一種顏色是非常輕易的，但是假如我們要給一個(gè)矩形填充多種顏色該怎么實(shí)現(xiàn)呢(具體的效果見3-3)？我們不可以像上面那樣直接使用Fill="Yellow Red…"這樣的方式去為矩形設(shè)置不同的顏色，也就是說BrushConverter類型轉(zhuǎn)換器是無法直接轉(zhuǎn)換這種包含多個(gè)顏色描述文本的字符串的。為了講解上述類型轉(zhuǎn)換系統(tǒng)的缺點(diǎn)，這里引入了一個(gè)新的概念，那就是從屬屬性。

圖3-3 帶漸變效果的Button元素

　　這里先使用一個(gè)簡(jiǎn)單的實(shí)例來說明下什么是從屬屬性，從屬屬性就是一種"屬性－元素"的語法，使用這種語法來設(shè)置一個(gè)屬性時(shí)，你可以使用一種嵌套方式的元素替代原本要設(shè)置的屬性。這個(gè)嵌套方式的元素其格式為"父元素.屬性名"，這里的父元素就是將要設(shè)置屬性的元素，而屬性名就是對(duì)應(yīng)的在元素中要設(shè)置的屬性。這里說的可能讓你有點(diǎn)糊涂，沒關(guān)系，現(xiàn)在我們看看下面的程序清單：

01 ＜Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
02 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"＞
03 ＜Button Width="200" Height="100"＞
04 ＜Button.Background＞
05 ＜SolidColorBrush Color="Blue" /＞
06 ＜/Button.Background＞
07 Click me
08 ＜/Button＞
09 ＜/Page＞
　　這是對(duì)應(yīng)的C#實(shí)現(xiàn)代碼：

01 Button BTn = new Button( );
02 SolidColorBrush brush = new SolidColorBrush( );
03 brush.Color = Colors.Blue;
04 btn.Background = brush;
05 btn.AddText("Click me");

　　我們要為Button預(yù)算設(shè)置其背景顏色為藍(lán)色。在上面的示例中我們使用了從屬屬性"父元素.屬性名"類型的語法，其中第4行的＜Button.Background＞就是一個(gè)從屬屬性，它以元素的形式存在，但是其實(shí)質(zhì)上卻是一個(gè)屬性。

　　上面僅僅是為了讓你了解從屬屬性的用法和實(shí)現(xiàn)方式，假如只是為了實(shí)現(xiàn)上述的效果，那么下面的程序清單完全就可以實(shí)現(xiàn)，你只需將Background設(shè)置為"Blue"就行了完全沒有必要大費(fèi)周章地使用從屬屬性。盡管使用"父元素.屬性名"這樣格式的從屬屬性去設(shè)置一個(gè)背景顏色顯得很復(fù)雜，但是這種版本的實(shí)現(xiàn)可以清楚地看到你在這所創(chuàng)建的是何種類型的brush。

01 ＜Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
02 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"＞
03 ＜Button
04 Width="200"
05 Height="100"
06 Background="Blue"＞
07 ＜/Button＞
08 ＜/Page＞
　　假如使用從屬屬性只是為了了解底層的類型轉(zhuǎn)換實(shí)現(xiàn)機(jī)制的話，那么我們根本就沒有理由去使用這些冗長(zhǎng)的語法實(shí)現(xiàn)。從屬屬性之所以重要是因?yàn)樵谀承┣闆r下我們需要在一個(gè)屬性中實(shí)現(xiàn)非常復(fù)雜的定義，就如同我們上述提及的要在一個(gè)矩形中使用多種顏色作背景。其代碼如下：

01 ＜Button VerticalAlignment="Center" HorizontalAlignment="Center"＞
02 ＜Button.Background＞
03 ＜LinearGradientBrush StartPoint="0,0" EndPoint="0,1"＞
04 ＜LinearGradientBrush.GradientStops＞
05 ＜GradientStop Offset="0" Color="Yellow" /＞
06 ＜GradientStop Offset="0.35" Color="Red" /＞
07 ＜GradientStop Offset="1" Color="Green" /＞
08 ＜/LinearGradientBrush.GradientStops＞
09 ＜/LinearGradientBrush＞
10 ＜/Button.Background＞
11 Click me
12 ＜/Button＞
　　這是使用C#實(shí)現(xiàn)的對(duì)應(yīng)版本

01 Button b = new Button( );
02 b.VerticalAlignment = VerticalAlignment.Center;
03 b.HorizontalAlignment = HorizontalAlignment.Center;
04 LinearGradientBrush brush = new LinearGradientBrush( );
05 brush.StartPoint = new Point(0,0);
06 brush.EndPoint = new Point(0,1);
07 GradientStop gs = new GradientStop( );
08 gs.Offset = 0;
09 gs.Color = Color.FromRgb(0x80, 0, 0);
10 brush.GradientStops.AddChild(gs);
11 gs = new GradientStop( );
12 gs.Offset = 0.35;
13 gs.Color = Colors.Red;
14 brush.GradientStops.AddChild(gs);
15 gs = new GradientStop( );
16 gs.Offset = 0.35;
17 gs.Color = Color.FromRgb(0x50, 0, 0);
18 brush.GradientStops.AddChild(gs);
19 b.Background = brush;
20 b.AddText("Click me");

上一篇：XAML開發(fā)入門之附加屬性和綁定屬性

下一篇：XAML開發(fā)入門之用VS2005開發(fā)XAML程序