內容控件(content control)是更特殊的控件類型,它們可包含並顯示一塊內容。從技術角度看,內容控件時能夠包含單個嵌套元素的控件。與佈局容器不一樣的是,內容控件只能包含一個子元素,而佈局容器主要願意能夠包含任意多個牽頭元素。網絡
正如前面所介紹,全部WPF佈局容器都繼承自抽象類Panel,該類提供了對包含多個元素的支持。相似地,全部內容控件都繼承自抽象類ContentControl。下圖顯示了ContentControl類的層次結構。app
圖 ContentControl類的層次結構ide
如上圖所示,幾個常見的控件實際上都是內容控件,包括Label控件以及ToolTip控件。此外,全部類型的按鈕都是內容控件,包括衆所周知的Button控件、RadioButton控件以及CheckBox控件。還有幾個更特殊的內容控件,如ScrollViewer控件(可以使用該控件建立可以滾動的面板)和UserControl類(該類容許重用一組自定義控件)。用於在應用程序中表示每一個窗口的Window類自己也是內容控件。工具
最後,還有繼承自HeaderedContentControl類的內容控件子集。這些控件同時具備內容區域和標題區域兩部分,標題區域用於顯示一些標題。這些控件包括GroupBox控件、TabItem控件(位於TabControl控件中的一頁)以及Expander控件。佈局
1、Content屬性學習
與Panel類提供Children集合來保存嵌套的元素不一樣,Control類添加了Content屬性,該屬性只接受單一對象。Content屬性支持任何類型的對象,但可將該屬性支持的對象分爲兩大類,針對每一類進行不一樣的處理:字體
爲理解Content屬性的工做原理,考慮簡單的按鈕。到目前位置,所看到的全部包含按鈕的示例都簡單地提供了一個字符串:動畫
<Button Margin="3">Text Button</Button>
該字符串被設置爲按鈕的內容,並在按鈕上顯示該內容。然而,可經過在按鈕上放置任何其餘元素來獲取更有趣的內容。例如,可以使用Image類在按鈕上放置一幅圖像。spa
<Button Margin="3"> <Image Source="happyface.jpg" Stretch="None"</Image> </Button>
還可在佈局容器(如StackPanel面板)中組合文本和圖像:設計
<Button Margin="3"> <StackPanel> <TextBlock Margin="3">Image and Text Button</TextBlock> <Image Source="happyface.jpg" Stretch="None"></Image> <TextBlock Margin="3">Courtesy of the StackPanel</TextBlock> </StackPanel> </Button>
若是但願建立一個真正意義上的極具特點的按鈕,甚至可在該按鈕中放置其餘內容控件,如文本框和按鈕(還能夠在這些元素內部繼續嵌套元素)。
<Button Margin="3" Padding="3" HorizontalContentAlignment="Stretch"> <StackPanel> <TextBlock Margin="3">Type something here:</TextBlock> <TextBox Margin="3" HorizontalAlignment="Stretch">Text box in a button</TextBox> </StackPanel> </Button>
上面的XAML顯示以下所示:
這與窗口使用的內容模型相同。與Button類類似,Window類也只能包含單一嵌套元素,能夠是一塊文本、一個任意對象或一個元素。
除Content屬性外,ContentControl類沒有添加多少其餘屬性。它包含HasContent屬性,若是在控件中有內容,該屬性返回true。還有ContentTemplate屬性,經過該屬性能夠建立一個模板,用於高速控件如何顯示他沒法識別的對象。使用ContentTemplate模板,可更加只能地顯示非繼承自UIElement的對象。不是僅調用ToString()方法獲取字符串,而是可使用各類屬性值,將它們佈置到更復雜的標記中。
2、對齊方式
在前面介紹佈局中,在FrameworkElement基類中定義的HorizontalAlignment和VerticalAlignment屬性,在容器中對齊不一樣的控件。然而,一旦控件包含了內容,就須要考慮另外一個組織級別。須要決定內容控件中額內容如何和邊框對齊,這是經過使用HorizontalContentAlignment和VerticalContentAlignment屬性實現的。
HorizontalContentAlignment和VerticalContentAlignment屬性與HorizontalAlignment和VerticalAlignment屬性支持相同的值。這意味着可將內容對象到控件的任意邊緣(使用Top、Bottom、Left或Right值),能夠居中(使用Center值),也能夠拉伸內容使其充滿可用空間(使用Stretch值)。這些設置直接應用於嵌套的內容元素,但你可使用多層嵌套建立複雜佈局。例如,若是在Label元素中嵌套StackPanel面板,Label.HorizontalContentAlignment屬性決定了StackPanel面板被放置在Label控件中的何處,但StackPanel面板及其子藝元素的對齊方式和尺寸選項則會決定其他的佈局。
在佈局章節中,學習了Margin屬性,經過該屬性可在相鄰元素之間添加空間。內容控件使用和Margin屬性互補的Padding屬性,該屬性在控件邊緣和內容邊緣之間插入空間。比較下面兩個按鈕,觀察他們之間的區別:
<Button>Absolutely No Padding</Button> <Button Padding="3">Well Padded</Button>
對於沒有內邊距(padding)的按鈕(默認),其文本和按鈕邊緣擁擠到一塊兒。每條邊都具備3個單位內邊距的按鈕則具備更合理的空白空間。以下圖所示:
3、WPF內容原則
如今,可能會懷疑WPF內容模型設計得這麼複雜是否值得。畢竟,可選擇在按鈕上放置一幅圖像,可是未必須要將圖像嵌入到其餘控件或整個佈局面板中。然而,有幾個很是重要的緣由促進了觀念轉變。
在前面示例中,包含一個簡單的圖像按鈕,在Button控件中放置了一個Image元素。這種方法不是很是理想,由於位圖不是分辨率無關的。在高DPI顯示器上,位圖顯示可能會變模糊,由於WPF必須經過插值添加更多的像素,以確保圖像保持正確的大小。更完善的WPF節目應避免使用位圖,而應當使用矢量圖像的組合來建立自定義繪圖按鈕以及其餘圖像修飾。
這種方式可與內容控件模型很好地集成在一塊兒。由於Button類是內容控件,因此能夠自由地使用一幅固定的位圖對其進行填充——相反,能夠包含其餘內容。例如,可以使用System.Windows.Shapes名稱空間中的類,在按鈕中繪製一幅矢量圖像。下面的示例建立了一個具備兩個菱形的按鈕。
<Button Margin="3"> <Grid> <Polygon Points="100,25 125,0 200,25 125,50" Fill="LightSteelBlue"></Polygon> <Polygon Points="100,25 75,0 0,25 75,50" Fill="White"></Polygon> </Grid> </Button>
效果圖以下所示:
顯然,在這個示例中使用嵌套的內容模型比爲Button類添加額外的屬性以支持不一樣類型的內容更簡單。嵌套內容典型不只更靈活,還容許Button類提供更簡單的接口。由於全部內容控件都支持以相同的方式嵌套內容,因此沒必要爲多個類添加不一樣的內容屬性。
實際上,使用嵌套內容模型須要進行折中。它簡化了元素的類模型,由於不須要使用額外的繼承層次,以便爲支持不一樣類型的內容添加屬性。然而,須要使用稍複雜的對象模型——元素能夠由其餘嵌套的元素構成。
4、標籤
在全部內容控件中,最簡單的是Label控件。與其餘任意內容控件相似,Label控件接受但願放入其中的單一內容。但不一樣的是Label控件支持記憶符(mnemonics)——本質上,記憶符是可以爲連接的控件設置焦點的快捷鍵。
爲支持此功能,Label控件添加了Target屬性。爲了設置Target屬性,須要使用指向另外一個控件的綁定表達式。下面是必須遵循的語法:
<StackPanel Margin="5"> <Label Target="{Binding ElementName=txtA}">Choose _A</Label> <TextBox Name="txtA"></TextBox> <Label Target="{Binding ElementName=txtB}">Choose _B</Label> <TextBox Name="txtB"></TextBox> </StackPanel>
標籤文本中的下劃線指示快捷鍵(若是確實須要在標籤中顯示下劃線,必須添加兩個下劃線)。全部記憶符都使用Alt鍵和已經肯定的快捷鍵工做。例如在該例中,若是用戶按下了Alt+A組合鍵,第一個標籤會將焦點傳遞給連接的控件,即txtA。一樣,若是按下了Alt+B組合鍵,會將焦點傳遞給txtB文本框。
快捷鍵字符一般是隱藏的,直到用戶按下了Alt鍵,這時它們才顯示爲具備下劃線的字母。可是這一行爲取決於系統設置。
5、按鈕
WPF提供了三種類型的按鈕控件:熟悉的Button控件、CheckBox控件和RadioButton控件。全部這些控件都是繼承自ButtonBase類的內容控件。
ButtonBase類增長了幾個成員。定義了Click事件並添加了對命令的支持,從而容許爲更高層的應用程序任務觸發按鈕。最後,ButtonBase類添加了ClickMode屬性,該屬性決定什麼時候引起Click事件以響應鼠標動做。默認值時ClickMode.Release,這意味着當單擊和釋放鼠標鍵時引起Click事件。然而,也可選擇當鼠標第一次按下時引起Click事件(ClickMode.Press)。更奇特的是,只要將鼠標移動到按鈕上並在按鈕上懸停一下子舊會引起Click事件(ClickMode.Hover)。
一、Button控件
Button類表示一直使用的Windows下壓按鈕。它添加了兩個可些屬性:IsCancel和IsDefault。
若是將IsCancel屬性設置爲true,按鈕就成爲窗口的取消按鈕。在當前窗口的任何位置若是按下Esc鍵,就會觸發該按鈕。
若是將IsDefault屬性設置爲true,按鈕就成爲默認按鈕(也就是接受按鈕)。其行爲取決於焦點在窗口中的當前位置。若是焦點位於某個非按鈕控件上(如TextBox控件、RadioButton控件和CheckBox控件等),默認按鈕具備藍色陰影,幾乎像是具備焦點。若是按下Enter鍵,就會觸發默認按鈕。但若是焦點位於另外一個按鈕控件上,當前有焦點的按鈕即具備藍色陰影,並且按下Enter鍵會觸發當前按鈕而不是默認按鈕。
許多用戶依賴與這些快捷方式(特別是使用Esc鍵關閉不須要的對話框),因此花一些時間在建立的每一個窗口中定義這些細節是有意義的。仍需爲取消按鈕和默認按鈕編寫事件處理代碼,由於WPF沒有提供這一行爲。
某些狀況下,將窗口中的同一個按鈕既設置爲取消按鈕,又設置爲默認按鈕也是有意義的。一個例子是About對話框中的OK按鈕。不過,窗口中只能有一個取消按鈕和一個默認按鈕。若是指定多個取消按鈕,按下Esc鍵將把焦點移到下一個默認按鈕,而不是觸發它。若是設置多個默認按鈕,按下Enter鍵後的行爲更混亂。若是焦點在某個非按鈕控件上,按下Enter鍵會把焦點移到下一個默認按鈕。若是焦點位於一個Button控件上,按下Enter鍵就會觸發該Button控件。
二、ToggleButton控件和RepeatButton控件
除Button類以外,還有三個類繼承自ButtonBase類。這些類包括:
RepeatButton和ToggleButton類都是在System.Windows.Controls.Primitives名稱空間中定義的,這代表他們一般不單獨使用。相反,它們一般經過組合來構建更復雜的控件,或經過繼承擴展其功能。例如,RepeatButton類經常使用語構建高級的ScrollBar控件(最終,甚至ScrollBar控件都是高級的ScrollViewer控件的一部分)。RepeatButton類使滾動條兩端的箭頭按鈕具備它們所特有的行爲——只要按住箭頭按鈕不釋放就會一直滾動。相似地,ToggleButton控件一般用於派生出更有用的CheckBox類和RadioButton類,後面將介紹這兩個類。
然而,RepeatButton類和ToggleButton類都不是抽象類,因此可在用戶界面中直接使用他們。ToggleButton控件在工具欄中很是有用,後面介紹工具欄的時候進行詳細介紹。
三、CheckBox控件
CheckBox控件和RadioButton控件是不一樣類型的按鈕。它們繼承自ToggleButton類,這意味着用戶可切換它們的開關狀態,即他們的「開關」行爲。對於CheckBox控件,切換到控件的「開」狀態,意味着在其中放置複選標記。
CheckBox類沒有添加任何成員,因此CheckBox類的基本接口是在ToggleButton類中定義的。最重要的是,ToggleButton類添加了IsChecked屬性。IsChecked屬性是可空的Boolean類型,這意味着該屬性能夠設置爲true、false或null。顯然,true表示選中的複選框,而false表示空的複選框。null值使用起來較爲棘手——表示不肯定狀態,顯示爲具備陰影的複選框。不肯定狀態一般用於表示還沒有設置的值。或存在一些差別的區域。例如,在文本應用程序中一般有用於加粗文本字體的複選框,而且若是當前選擇的文本既包含粗體文本又包含正常文本,這時可將複選框設置爲null,表示一種不肯定狀態。
爲在WPF標記中指定null值,須要使用null標記擴展,以下所示:
<CheckBox IsChecked="{x:null}">A check box in indeterminate state</CheckBox>
除了IsChecked屬性外,ToggleButton類還添加了IsThreeState屬性,該屬性決定了用戶是否能將複選框設置爲不肯定狀態。若是IsThreeState屬性被設置爲false(默認值),單擊複選框時,其狀態會在選中和未選中兩種狀態之間切換,而且這時只能經過代碼將複選框設置爲不肯定狀態。若是IsThreeState屬性被設置爲true,單擊複選框時,就會在全部可能的三種狀態之間循環切換。
ToggleButton類還定義了當複選框進入特定狀態時會觸發的三個事件:Checked、UnChecked和Indeterminate。大多數狀況下,能夠很容易地經過處理繼承自ButtonBase類的Click事件,將這一邏輯合併爲單個事件處理程序。不管什麼時候改變按鈕的狀態都會觸發Click事件。
四、RadioButton控件
RadioButton類也繼承自ToggleButton類,並使用相同的IsChecked屬性和相同的Checked、Unchecked以及Indeterminate事件。此外,RadioButton類還增長了GroupName屬性,該屬性用於控制如何對單選按鈕進行分組。
單選按鈕一般由他們的容器進行分組。這意味着,若是在StackPanel面板中放置三個單選按鈕,那麼這三個單選按鈕就造成了一個組,並且只要選擇這三個單選按鈕中的一個。另外一方面,若是在兩個獨立的StackPanel控件中放置一組單選按鈕,就有了兩組相互獨立的單選按鈕。
可使用GroupName屬性覆蓋這一默認行爲。可以使用該屬性在同一個容器中建立多個組,或將包含在多個容器中的單選按鈕建立爲一組。對於這兩種狀況,技巧很簡單——只需爲全部屬於同一組的單選按鈕提供相同的組名便可。
分析下面的這個示例:
<StackPanel> <GroupBox Margin="5"> <StackPanel> <RadioButton>Group 1</RadioButton> <RadioButton>Group 1</RadioButton> <RadioButton>Group 1</RadioButton> <RadioButton Margin="0,10,0,0" GroupName="Group2">Group 1</RadioButton> </StackPanel> </GroupBox> <GroupBox Margin="5"> <StackPanel> <RadioButton>Group 3</RadioButton> <RadioButton>Group 3</RadioButton> <RadioButton>Group 3</RadioButton> <RadioButton Margin="0,10,0,0" GroupName="Group2">Group 3</RadioButton> </StackPanel> </GroupBox> </StackPanel>
這個示例中有兩個包含單選按鈕的容器,但有三組單選按鈕。每一個分組框底部的最後一個單選按鈕屬於第三組。這個示例中的設計有些使人困惑,但有些狀況下,可能但願以微妙的方式從包中分離出一個特定的單選按鈕,而又不會致使該按鈕離開原來的分組。
6、工具提示
WPF爲工具提示(當在一些感興趣的內容上懸停鼠標時,就會彈出的那些臭名昭著的黃色方框)提供了一個靈活模型。由於在WPF中工具欄提示的是內容控件,因此可在工具提示中放置任何可視化元素。還可改變各類時間設置來控制工具提示的顯示和隱藏速度。
直接使用ToolTip類不是顯示工具提示的最簡單方式。相反,可爲元素簡單地設置ToolTip屬性。ToolTip屬性是在FrameworkElement類中定義的,因此全部能放到WPF窗口上的元素均可以使用該元素。
例如,下面的按鈕具備基本的工具提示:
<Button ToolTip="This is my tooltip" >I have a tooltip</Button>
當在該按鈕上懸停鼠標時,就會在熟悉的黃色方框中顯示「This is my tooltip "文本。
若是但願提供更復雜的工具提示內容,如組合的嵌套元素,就須要將ToolTip屬性分爲單獨的元素。下面的示例使用更復雜的嵌套內容設置按鈕的ToolTip屬性:
<Button > <Button.ToolTip> <ToolTip > <StackPanel> <TextBlock Margin="3" >Image and text</TextBlock> <Image Source="happyface.jpg" Stretch="None" /> <TextBlock Margin="3" >Image and text</TextBlock> </StackPanel> </ToolTip> </Button.ToolTip> <Button.Content>I have a fancy tooltip</Button.Content> </Button>
一、設置ToolTip對象的屬性
ToolTip是內容控件,所以可調整它的標準屬性,如Background屬性(從而再也不是黃色的方框)、Padding屬性以及Font屬性。還能夠修改在ToolTip類中蒂尼工藝的成員(以下表所示)。這些屬性中的大部分都用於幫助將工具提示放到所指望的位置。
下面的標記使用ToolTip屬性建立了一個工具提示,該工具提示窗口沒有陰影效果,但使用了透明的紅色背景,從而可透過該工具提示看到底層的窗口和控件:
<Button > <Button.ToolTip> <ToolTip Background="#60AA4030" Foreground="White" HasDropShadow="False" > <StackPanel> <TextBlock Margin="3" >Image and text</TextBlock> <Image Source="happyface.jpg" Stretch="None" /> <TextBlock Margin="3" >Image and text</TextBlock> </StackPanel> </ToolTip> </Button.ToolTip> <Button.Content>I have a fancy tooltip</Button.Content> </Button>
大多數狀況下,使用標準的工具提示位置便足以知足要求了,這是工具提示窗口位於當前鼠標位置。然而,ToolTip的各類屬性提供了更多的選擇。下面列出一些可用於放置工具提示的策略:
二、設置ToolTipService屬性
有有幾個工具提示屬性不能經過ToolTip類的屬性進行配置。在這種狀況下,須要使用另外一個類,即ToolTipService類。使用ToolTipService類能夠配置顯示工具提示的相關延遲時間。ToolTipService類的全部屬性都是附加屬性,因此可在控件標籤中直接設置它們。
ToolTipService類定義了許多與ToolTip相同的屬性,從而當處理只有文本的工具提示時可以使用更簡單的語法。不是天津嵌套的ToolTip元素,可以使用特性設置全部內容。
<Button ToolTip="This is my tooltip" ToolTipService.Placement="Bottom">I have a tooltip</Button>
下表列出了ToolTipService類的屬性。ToolTipService類還提供了兩個路由事件:ToolTipOpening和ToolTipClosing。可響應這些事件,使用即時內容填充工具提示,或重寫工具提示的工做方式。例如,若是在這個兩個事件中設置已經處理過的標誌,將再也不自動顯示或隱藏工具提示。反而,須要經過設置IsOpen屬性來手動顯示和隱藏工具提示。
三、Popup控件
Popup控件在許多方面與ToolTip控件相同,儘管他們之間沒有相互繼承的關係。與ToolTip相似,Popup也只能包含單一內容,該單一內容包含任何WPF元素(該內容存儲在Popup.Child屬性中,而不想ToolTip內容那樣存儲在ToolTip.Content屬性中)。另外,與ToolTip控件同樣,Popup控件也延伸出窗口的邊界。最後,可以使用相同的佈局屬性放置Popup控件,而且可以使用相同的IsOpen屬性顯示或隱藏Popup控件。
由於必須手動顯示Popup控件,因此可能徹底經過代碼建立。但也能夠可使用XAML標記定義Popup控件——但務必包含Name屬性,從而可使用代碼操做該控件。
簡單示例以下所示:
<Window x:Class="Controls.PopupTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="PopupTest" Height="300" Width="300"> <Grid Margin="10"> <TextBlock TextWrapping="Wrap">You can use a Popup to provide a link for a specific <Run TextDecorations="Underline" MouseEnter="run_MouseEnter" >term</Run> of interest.</TextBlock> <Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200" PopupAnimation="Slide" AllowsTransparency = "True"> <Border BorderBrush="Beige" BorderThickness="2" Background="White"> <TextBlock Margin="10" TextWrapping="Wrap" > For more information, see <Hyperlink NavigateUri="http://en.wikipedia.org/wiki/Term" Click="lnk_Click">Wikipedia</Hyperlink> </TextBlock> </Border> </Popup> </Grid> </Window>
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace Controls { /// <summary> /// PopupTest.xaml 的交互邏輯 /// </summary> public partial class PopupTest : Window { public PopupTest() { InitializeComponent(); } private void run_MouseEnter(object sender, MouseEventArgs e) { popLink.IsOpen = true; } private void lnk_Click(object sender, RoutedEventArgs e) { Process.Start(((Hyperlink)sender).NavigateUri.ToString()); } } }