使用.Net Core開發WPF App系列教程( 六、WPF中的常用控件（上）)

本文轉載自查看原文 2020-09-03 16:37 1144 C#/ .Net Core/ .Net Core WPF/ WPF

使用.Net Core開發WPF App系列教程

一、.Net Core和WPF介紹

二、在Visual Studio 2019中創建.Net Core WPF工程

三、與.Net Framework的區別

四、WPF中的XAML

五、WPF中的布局

六、WPF中的常用控件（上）

控件分類

在第一篇文章.Net Core和WPF介紹中的WPF的功能和特性部分根據功能性介紹了WPF的控件名稱。

在接下來的文章中，將會詳細的介紹各個控件的概念及使用。

主要包括：

內容控件：Label、Button、CheckBox、ToggleButton、RadioButton、ToolTip和ScrollViewer

帶有標題的內容控件：TabItem、GroupBox、Expander

導航控件：Frame、TabControl、Page

窗體控件：Window

文本控件：TextBox、PasswordBox、RichTextBox

列表控件：ListBox和ComboBox

基於范圍的控件：Slider和ProgressBar

日期控件：Calender和DatePicker

媒體控件：Image和MediaElement

System.Windows.Controls.Control類

控件通常在描述為與用戶交互的元素，也就是能接收焦點並接受鍵盤或鼠標輸入的元素。

在WPF中，所有控件都是繼承自System.Windows.Controls.Control類。這個類定義了一小部分基本的基礎結構：

Background和Foreground

背景畫刷和前景畫刷，使用System.Windows.Media.Brush對象，常用的有System.Windows.Media.SolidColorBrush，System.Windows.Media.TileBrush，System.Windows.Media.LinearGradientBrush等

BorderBrush

用於填充控件的邊框的畫刷，使用System.Windows.Media.Brush對象

BorderThickness

獲取或設置控件的邊框寬度

FontFamily

獲取或設置字體名稱，使用System.Windows.Media.FontFamily對象

FontSize

獲取或設置字體大小，使用Double類型

FontStretch

獲取或設置字體的拉伸或壓縮程度，使用System.Windows.FontStretch 結構，可以從System.Windows.FontStretches類的靜態屬性中獲取需要的預定義FontStretch對象

FontWeight

獲取或設置指定字體的粗細

HorizontalContentAlignment

設置元素水平方向相對於父元素的位置，使用System.Windows.HorizontalContentAlignment枚舉值

VerticalContentAlignment

設置元素垂直方向相對於父元素的位置，使用System.Windows.VerticalContentAlignment枚舉值

內容控件(ContentControl)

內容控件可以包含並顯示內容。但只能有一個子元素。

類繼承結構示意圖如下

Content屬性

內容控件最重要的就是Content屬性，用於設置控件的內容。

Content支持所有類型的對象。但根據對象繼承類的不同，呈現方式也有所不同。

未繼承自System.Windows.UIElement：獲取對象的ToString()方法返回來文本來設置Content

繼承自System.Windows.UIElement：調用UIElement.OnRender()方法在內部進行顯示

下面使用Label控件，來進行演示

設置Content屬性為普通的字符串

1  <Label>HelloWorld</Label>

設置Content屬性為DateTime對象

1 <Label xmlns:sys="clr-namespace:System;assembly=mscorlib" Grid.Row="1">
2             <sys:DateTime>2020.09.21</sys:DateTime>
3 </Label>

設置Content屬性為Image對象

1 <Label>
2        <Image Source="4.jpg" />
3 </Label>

設置Content屬性為布局容器，這種方式在為控件設置樣式時，會經常用到。

1 <Label Grid.Row="2">
2             <Grid>
3                 <Label Content="HelloWorld" HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="1"></Label>
4                 <Image Source="4.jpg" HorizontalAlignment="Center" VerticalAlignment="Center"/>
5             </Grid>
6 </Label>

有了前面的基礎，下面開始介紹具體的內容控件

Label控件

Label是最簡單的內容控件，通常會使用Label來放置一些靜態文本。

在前面的介紹中已經對Label控件的使用做了一些演示。

下面介紹一下Label的Target屬性，Target屬性可以獲取或設置當用戶按下標簽的訪問鍵時獲得焦點的元素。

1 <StackPanel>
2         <Label Target="{Binding ElementName=tboxA}" Content="Choose _A"></Label>
3         <TextBox Name="tboxA"></TextBox>
4 </StackPanel>

_A代表快捷鍵Alt+A，當按下快捷鍵時，TextBox會獲得焦點

Label的常規用法

1 <Grid Grid.Row="0">
2             <Label Content="Visual Studio 2015" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="30" Foreground="White"/>
3 </Grid>

按鈕控件

常用的按鈕控件有三種：Button、CheckBox和RadioButton。它們都繼承自ButtonBase類。

ButtonBase類定義了Click（單擊）事件以及ClickMode，ClickMode屬性用於決定何時引發Click事件以響應鼠標動作。默認值是ClickMode.Release，代表鼠標按鍵釋放時引發Click事件，除此之外，還可以設置Press（按下）、Hover（滑過）等值

Button控件

Button就是我們平常見到的常規按鈕，像這樣

Button的常規用法

1  <Button Content="Cancel" VerticalAlignment="Center" Width="88" Margin="5" Click="Button_Click"></Button>

Button增加了兩個屬性：IsCancel和IsDefault

IsCancel：如果設置了IsCancel為True，則該按鈕就變成了窗口的取消按鈕，按下Esc，會觸發按鈕事件

IsDefault：如果設置了IsDefault為True，則該按鈕就變成了窗口的確定按鈕，當焦點不在窗口內時，按下Enter，會觸發按鈕事件。

說明：

1、IsCancel和IsDefault屬性在一個窗體只使用一次，也就是一個不要將多個按鈕的IsDefault或IsCancel屬性設為True

ToggleButton控件

ToggleButton包含了按下和未按下兩種狀態。單擊ToggleButton按鈕時，會使按鈕保持按下狀態，再點單擊，會使按鈕釋放。效果如下：

ToggleButton控件不常用，被定義在 System.Windows.Controls.Primitives 命名空間下

ToggleButton包含了一個選中事件(Checked)和取消選中事件(UnChecked)，常規使用方法如下：

1  <ToggleButton Content="Button1" Width="88" HorizontalAlignment="Left" Margin="5" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked"/>

ToggleButton還包含了一個用於設置或獲取選中的狀態的屬性IsChecked，以及是否能將復選框設置為不確定狀態的IsThreeState屬性(IsThreeState屬性在ToggleButton中效果不明顯，在CheckBox可以看到明顯的效果)

說明：

1、ToggleButton在觸發Checked、UnChecked、Indeterminate（第三種狀態）三個事件時，都會觸發Click事件

2、需要將ToggleButton設置為第三種狀態，可以使用如下方式

1  <ToggleButton IsThreeState="True" Content="Three State" Margin="5" IsChecked="{x:Null}"/>

CheckBox控件

CheckBox繼承自ToggleButton，所以CheckBox也包含了選中和未選中兩種狀態，只是呈現方式和ToggleButton稍有不同：

設置IsThreeState屬性為true，並設置 IsChecked="{x:Null}，效果如下：

CheckBox的常規用法

1 <CheckBox  Content="允許我保存憑據" Margin="5"/>

RadioButton控件

RadioButton繼承自ToggleButton

RadioButton的常規用法

1 <RadioButton Content="Radio Button" Margin="5"/>

RadioButton增加了GroupName屬性，對於設置為同一GroupName的多個RadioButton，只能有一個RadioButton被選中

1  <RadioButton Name="radioButton1" Content="1" GroupName="group1" Margin="5"/>
2  <RadioButton Name="radioButton2" Content="2" GroupName="group1" Margin="5"/>

上面的示例中，設置兩個RadioButton的GroupName都為group1，設置后只能選中radioButton1或radioButton2，而不能同時選中。如果未設置相同的GroupName，則可以同時選中

其它用法和CheckBox一樣，這里就不多做介紹

ToolTip控件

ToolTip就是提示信息控件，像Windows系統中，將鼠標放置在特定位置，可以看到提示文本

由於ToolTip是內容控件，所以可以放置任何可視化元素。像下面這樣

ToolTip的常規用法

1 <Button Content="OK" ToolTip="OK"/>

或

1 <Button Content="Cancel">
2        <Button.ToolTip>
3               <ToolTip>OK</ToolTip>
4         </Button.ToolTip>
5 </Button>

ToolTip還有一些常用的屬性，如下：

Placement

ToolTip顯示的位置，使用System.Windows.Controls.Primitives.PlacementMode枚舉值。默認值是Mouse，即根據鼠標位置顯示ToolTip。

HorizontalOffset和VerticalOffset

可以精確控制ToolTip的位置（支持正值和負值）

PlacementTarget

相對另一個元素定位ToolTip的顯示位置。（需要使用PlacementMode的Left、Right、Top、Bottom或Center值）

IsOpen

可以使用代碼控制ToolTip是否顯示

ScrollViewer控件

內容控件不僅包括Label、Button及ToolTip等基本控件，還包含了特殊容器。ScrollViewer就是其中的一種。

ScrollViewer控件的作用就是讓Content支持滾動

在下面的示例代碼中：

在Grid中定義了兩行，由於窗體高度是400，所以每一行的高度是200。

放置在第一行的Image控件，高度是250，並不能顯示完全

放置在第二行的Image控件，位於ScrollViewer控件內部，高度也是250，也不能顯示完全，但是出現了垂直滾動條

ScrollViewer的就作用就是當內容顯示不完全時，出現滾動條，讓內容支持滾動

 1 <Window x:Class="ScrollViewerDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:ScrollViewerDemo"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="400" Width="300" ResizeMode="NoResize" WindowStyle="ToolWindow">
 9     <Grid>
10         <Grid.RowDefinitions>
11             <RowDefinition/>
12             <RowDefinition/>
13         </Grid.RowDefinitions>
14        
15         <Image Height="250" Source="4.jpg"/>
16 
17         <ScrollViewer Grid.Row="1">
18             <Image Height="250" Source="4.jpg"/>
19         </ScrollViewer>
20     </Grid>
21 </Window>

常用屬性

VerticalScrollBarVisibility

用於設置是否顯示垂直滾動條，使用System.Windows.Controls.ScrollBarVisibility枚舉值，如下：

Auto（默認）：代表當內容超出時，顯示滾動條，內容不超出時，隱藏滾動條。

Disabled：禁用滾動條

Visible：總是顯示滾動條

Hidden：總是隱藏滾動條

HorizontalScrollBarVisibility

用於設置是否顯示水平滾動條

常用函數

ScrollToEnd、ScrollToHome

控制滾動條滾動到底部和頂部

ScrollToVerticalOffset、ScrollToHorizontalOffset

控制垂直、水平滾動條滾動到特定位置

LineLeft、LineRight

控制水平滾動條向左滾動預先系統定義的值。（實際效果跟單擊水平滾動條兩端的按鈕是一樣的）

LineUp、LineDown

控制水平滾動條向上、向下滾動一行。（實際效果跟單擊垂直滾動條兩端的按鈕是一樣的）

PageLeft、PageRight、PageUp、PageDown

控制水平滾動條向左、右、上、下滾動一頁。（實際效果跟單擊滾動條空白區域是一樣的）

帶有標題的內容控件

帶有標題的內容控件繼承自System.Windows.Controls.HeaderedContentControl類，相比普通內容控件，它增加一些屬性。最常用的是Header屬性，用於顯示標題內容。Header屬性與Content屬性一樣，可以接受任何類型的對象。常用的帶有標題的內容控件有TabItem、GroupBox、Expander等

TabItem控件

TabItem表示TabControl（后面會介紹TabControl控件）的一頁。

TabItem的常規用法：

 1 <TabControl>
 2         <TabItem Header="TabItem1">
 3             <StackPanel>
 4                 
 5             </StackPanel>
 6         </TabItem>
 7         <TabItem Header="TabItem2" IsSelected="True">
 8             <Grid>
 9                 
10             </Grid>
11         </TabItem>
12 </TabControl>

TabItem的常用屬性

IsSelected

代表當前Tab是否被選中（只能有一個Tab項被選中）

GroupBox控件

GrouBox顯示為具有標題的方框

GroupBox的常規用法：

1 <GroupBox Margin="10" Header="Group Box">
2             <Grid>
3                 
4             </Grid>
5 </GroupBox>

Expander控件

Expander控件可以通過點擊箭頭按鈕顯示或隱藏所包含內容

Expander與常規內容控件不同的時，它可以被折疊起來，並且不占用布局空間。

可以通過ExpandDirection屬性設置Expander展開的方向，該值使用System.Windows.Controls.ExpandDirection枚舉，包含了Left(左)、Up(上)、Right(右)、Down(下)四個值。效果如下：

Expander控件在展開時會觸發Expanded事件，在折疊時會觸發Collapsed事件。

Expander的常規用法：

1 <Expander Header="Expander 1">
2             <Grid>
3                 <TextBlock Text="Expander is a HeaderedContentControl" VerticalAlignment="Center" FontSize="20"/>
4             </Grid>
5 </Expander>

導航控件

導航控件就是可以將一個頁面切換到另一個頁面的控件。像平常我們在上網時，點擊一個鏈接可以跳轉到另外一個頁面，這就是導航模型的體現。

在WPF中，可以實現導航操作的常用控件有Frame、TabControl、Page。

Page控件

Page類與Window類差不多，都是只能包含一個嵌套元素。然后，Page類不是內容控件，它直接繼承自FrameworkElement類。

Page控件就是包含內容的頁面，這個頁面可以被放置在Windows Internet Explorer, NavigationWindow控件和Frame控件中，但是不能單獨顯示出來，必須要有容器。

添加Page的方法如下：

默認的標記如下：

 1 <Page x:Class="PageDemo.Page1"
 2       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6       xmlns:local="clr-namespace:PageDemo"
 7       mc:Ignorable="d" 
 8       d:DesignHeight="450" d:DesignWidth="800"
 9       Title="Page1">
10 
11     <Grid>
12         
13     </Grid>
14 </Page>

Page的常用屬性

Background

指定背景畫刷

Content

頁面中顯示的單一內容，通常是布局窗口，如Grid，StackPanel等

NavigationService

返回NavigationService對象的引用，可通過代碼使用該對象將用戶導航到哪一個頁面

KeepAlive

當頁面跳轉時，決定原來的頁面是否保持存活狀態。在下面的Frame控件中，也說會到這個屬性

Page類還有一些其它特性，可以在示例代碼中看到。如果需要了解Page類更詳細的信息，可以訪問文末的鏈接。

Frame控件

Frame控件是支持導航的內容控件。

Frame的常用屬性

Source

指定當前頁面內容的URI

1 <Frame Name="frame" Source="StartupPage.xaml"></Frame>

NavigationUIVisibility

設置導航條的可見性，使用System.Windows.Navigation.NavigationUIVisibility枚舉值

Automatic 自動（默許值，只有當前進列表或后退列表中具有內容時才會顯示導航條）

Hidden 隱藏導航條

Visible 總是顯示導航條

CanGoBack和CanGoForward

判斷是否能向后或向前導航

Frame的常用函數

Navigate

導航到指定的頁面

1  this.frame.Navigate(new Uri("Pages/Page2.xaml", UriKind.Relative));

也可以創建頁面進行導航，使用這種方式導航，整個對象會始終保存在內存中

1 Page1 page1 = new Page1();
2 this.frame.Navigate(page1);

在這里還可以有另外一種用法來進行導航，就是直接操作Frame控件的Content屬性。

1 Page1 page1 = new Page1();
2 this.frame.Content = page1;

GoBack

在導航列表中向后移動

GoForward

在導航列表中向前移動

Frame的常用事件

Navigating

請求新導航時發生

Navigated

找到導航的目標內容且可通過 Content 屬性得到這些內容時發生

LoadCompleted

當已加載、分析並開始呈現目標導航內容時發生

Frame導航執行過程圖如下：

說明：

1、在WPF中進行頁面導航時，會先觸發頁面的Initialized事件，再觸發Loaded事件，如果需要在頁面加載時執行指定操作，可以在Loaded事件中進行處理。

2、在WPF中進行頁面導航時，會創建新的頁面對象，如果需要保留對象，可以使用Page.KeepAlive="True"或者使用NavigationService.Navigate()的重載版本，直接傳入頁面對象。這種情況下，第二次導航時不會觸發頁面的Initialized事件。

TabControl控件

表示包含多個項的控件，這些項共享屏幕上的同一空間。

TabControl繼承自System.Windows.Controls.ItemsControl類，ItemsControl類在后面的文章中會介紹

TabControl的常規用法：

 1 <TabControl SelectedIndex="1">
 2             <TabItem Header="Tab item1" BorderBrush="Red" BorderThickness="1">
 3                 <StackPanel>
 4                     <Label Content="請輸入用戶信息"/>
 5                     <TextBox></TextBox>
 6                     <Button Content="確定" HorizontalAlignment="Right" Width="88" Margin="10"/>
 7                 </StackPanel>
 8             </TabItem>
 9             <TabItem Header="Tab item2">
10                 <Grid></Grid>
11             </TabItem>
12             <TabItem Header="Tab item3">
13                 <Grid/>
14             </TabItem>
15         </TabControl>