依功能分類的控制項Controls by function
Windows 的 XAML UI 架構提供一個支援 UI 開發的龐大控制項程式庫。The XAML UI framework for Windows provides an extensive library of controls that support UI development. 部分控制項以視覺方式呈現；其餘控制項則當做其他控制項或內容 (例如影像與媒體) 的容器。Some of these controls have a visual representation; others function as the containers for other controls or content, such as images and media.
您可以下載 XAML UI 基本知識範例，以查看許多 Windows UI 控制項。You can see many of the Windows UI controls in action by downloading the XAML UI Basics sample.
| XAML 控制項庫XAML Controls Gallery | |
|---|---|
 |
如果您已安裝 XAML 控制項庫應用程式，請按一下這裡開啟應用程式並查看 NavigationView 運作情形 。If you have the XAML Controls Gallery app installed, click here to open the app and see the NavigationView in action |
以下是可用於 App 的常用 XAML 控制項清單 (依功能分類)。Here's a list by function of the common XAML controls you can use in your app.
應用程式列與命令Appbars and commands
應用程式列App bar
顯示應用程式特定命令的工具列。A toolbar for displaying application-specific commands. 請參閱＜命令列＞。See Command bar.
應用程式列按鈕App bar button
使用應用程式列樣式顯示命令的按鈕。A button for showing commands using app bar styling.
參考：AppBarButton、SymbolIcon、BitmapIcon、FontIcon、PathIconReference: AppBarButton, SymbolIcon, BitmapIcon, FontIcon, PathIcon
設計和作法︰應用程式列和命令列控制項指南Design and how-to: App bar and command bar control guide
範例程式碼：XAML 命令範例Sample code: XAML Commanding sample
應用程式列分隔符號App bar separator
在視覺上分隔命令列中的命令群組。Visually separates groups of commands in a command bar.
參考：AppBarSeparatorReference: AppBarSeparator
範例程式碼：XAML 命令範例Sample code: XAML Commanding sample
應用程式列切換按鈕App bar toggle button
用於在命令列中切換命令的按鈕。A button for toggling commands in a command bar.
參考：AppBarToggleButtonReference: AppBarToggleButton
範例程式碼：XAML 命令範例Sample code: XAML Commanding sample
命令列Command bar
一個處理應用程式列按鈕元素大小調整的特殊化應用程式列。A specialized app bar that handles the resizing of app bar button elements.
<CommandBar>
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
</CommandBar>
參考：CommandBarReference: CommandBar
設計和作法︰應用程式列和命令列控制項指南Design and how-to: App bar and command bar control guide
範例程式碼：XAML 命令範例Sample code: XAML Commanding sample
按鈕Buttons
按鈕Button
回應使用者輸入並引發 Click 事件的控制項。A control that responds to user input and raises a Click event.
<Button x:Name="button1" Content="Button"
Click="Button_Click" />
設計和作法︰按鈕控制項指南Design and how-to: Buttons control guide
HyperlinkHyperlink
請參閱＜超連結按鈕＞。See Hyperlink button.
超連結按鈕Hyperlink button
顯示為標記文字並且會在瀏覽器中開啟指定 URI 的按鈕。A button that appears as marked up text and opens the specified URI in a browser.
<HyperlinkButton Content="www.microsoft.com"
NavigateUri="https://www.microsoft.com"/>
參考：HyperlinkButtonReference: HyperlinkButton
設計和作法︰超連結控制項指南Design and how-to: Hyperlinks control guide
重複按鈕Repeat button
一個按鈕，從按下到放開的這段期間，會重複引發 Click 事件。A button that raises its Click event repeatedly from the time it's pressed until it's released.
<RepeatButton x:Name="repeatButton1" Content="Repeat Button"
Click="RepeatButton_Click" />
參考：RepeatButtonReference: RepeatButton
設計和作法︰按鈕控制項指南Design and how-to: Buttons control guide
集合/資料控制項Collection/data controls
翻轉檢視Flip view
讓使用者可以逐一瀏覽項目集合 (一次瀏覽一個項目) 的控制項。A control that presents a collection of items that the user can flip through, one item at a time.
<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
<Image Source="Assets/Logo.png" />
<Image Source="Assets/SplashScreen.png" />
<Image Source="Assets/SmallLogo.png" />
</FlipView>
參考：FlipViewReference: FlipView
設計和作法︰翻轉檢視控制項指南Design and how-to: Flip view control guide
格線檢視Grid view
在可以垂直捲動的列和欄中顯示項目集合的控制項。A control that presents a collection of items in rows and columns that can scroll vertically.
<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</GridView>
參考：GridViewReference: GridView
設計和作法︰清單Design and how-to: Lists
範例程式碼：ListView 範例Sample code: ListView sample
項目控制項Items control
在資料範本指定的 UI 中顯示項目集合的控制項。A control that presents a collection of items in a UI specified by a data template.
<ItemsControl/>
參考：ItemsControlReference: ItemsControl
清單檢視List view
在可以垂直捲動的清單中顯示項目集合的控制項。A control that presents a collection of items in a list that can scroll vertically.
<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</ListView>
參考：ListViewReference: ListView
設計和作法︰清單Design and how-to: Lists
範例程式碼：ListView 範例Sample code: ListView sample
日期和時間控制項Date and time controls
行事曆日期選擇器Calendar date picker
可讓使用者使用下拉式行事曆顯示畫面選取日期的控制項。A control that lets a user select a date using a drop-down calendar display.
<CalendarDatePicker/>
參考：CalendarDatePickerReference: CalendarDatePicker
設計和作法︰行事曆、日期和時間控制項Design and how-to: Calendar, date, and time controls
行事曆檢視Calendar view
可讓使用者選取單一或多個日期的可設定式行事曆顯示畫面。A configurable calendar display that lets a user select single or multiple dates.
<CalendarView/>
參考：CalendarViewReference: CalendarView
設計和作法︰行事曆、日期和時間控制項Design and how-to: Calendar, date, and time controls
日期選擇器Date picker
讓使用者能夠選取日期的控制項。A control that lets a user select a date.
<DatePicker Header="Arrival Date"/>
參考：DatePickerReference: DatePicker
設計和作法︰行事曆、日期和時間控制項Design and how-to: Calendar, date, and time controls
時間選擇器Time picker
讓使用者能夠設定時間值的控制項。A control that lets a user set a time value.
<TimePicker Header="Arrival Time"/>
參考：TimePickerReference: TimePicker
設計和作法︰行事曆、日期和時間控制項Design and how-to: Calendar, date, and time controls
飛出視窗Flyouts
操作功能表Context menu
請參閱＜功能表飛出視窗＞和＜快顯功能表＞。See Menu flyout and Popup menu.
飛出視窗Flyout
顯示一則要求使用者互動的訊息。Displays a message that requires user interaction. (與對話方塊不同的是，飛出視窗不會建立另一個視窗，也不會封鎖其他使用者互動)。(Unlike a dialog, a flyout does not create a separate window, and does not block other user interaction.)
<Flyout>
<StackPanel>
<TextBlock Text="All items will be removed. Do you want to continue?"/>
<Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart"/>
</StackPanel>
</Flyout>
設計和作法︰飛出視窗Design and how-to: Flyouts
功能表飛出視窗Menu flyout
暫時顯示與使用者目前正在執行之動作相關的命令或選項清單。Temporarily displays a list of commands or options related to what the user is currently doing.
<MenuFlyout>
<MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
<MenuFlyoutSeparator/>
<ToggleMenuFlyoutItem Text="Shuffle"
IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
<ToggleMenuFlyoutItem Text="Repeat"
IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>
參考：MenuFlyout、MenuFlyoutItem、MenuFlyoutSeparator、ToggleMenuFlyoutItemReference: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem
設計和作法︰功能表和操作功能表Design and how-to: Menus and context menus
範例程式碼：XAML 操作功能表範例Sample code: XAML Context Menu sample
快顯功能表Popup menu
顯示您所指定命令的自訂功能表。A custom menu that presents commands that you specify.
參考：PopupMenuReference: PopupMenu
設計和作法︰對話方塊Design and how-to: Dialogs
工具提示Tooltip
顯示元素資訊的快顯視窗。A pop-up window that displays information for an element.
<Button Content="Button" Click="Button_Click"
ToolTipService.ToolTip="Click to perform action" />
參考：ToolTip、ToolTipServiceReference: ToolTip, ToolTipService
設計和作法︰工具提示的指導方針Design and how-to: Guidelines for tooltips
映像Images
影像Image
顯示影像的控制項。A control that presents an image.
<Image Source="Assets/Logo.png" />
設計和作法︰Image 和 ImageBrushDesign and how-to: Image and ImageBrush
範例程式碼：XAML 控制項庫Sample code: XAML Controls Gallery
圖形與筆墨Graphics and ink
InkCanvasInkCanvas
接收及顯示筆墨筆觸的控制項。A control that receives and displays ink strokes.
<InkCanvas/>
參考：InkCanvasReference: InkCanvas
形狀Shapes
各種保留模式圖形物件，可以使用橢圓形、長方形、直線、貝茲路徑之類的物件顯示。Various retained mode graphical objects that can be presented like ellipses, rectangles, lines, Bezier paths, etc.
<Ellipse/>
<Path/>
<Rectangle/>
作法：繪製形狀How to: Drawing shapes
範例程式碼：XAML 向量繪製範例Sample code: XAML vector-based drawing sample
配置控制項Layout controls
框線Border
在另一個物件周圍繪製框線、背景或兩者皆繪製的容器控制項。A container control that draws a border, background, or both, around another object.
<Border BorderBrush="Blue" BorderThickness="4"
Height="108" Width="64"
Padding="8" CornerRadius="4">
<Canvas>
<Rectangle Fill="Orange"/>
<Rectangle Fill="Green" Margin="0,44"/>
</Canvas>
</Border>
畫布Canvas
支援將子元素以畫布左上角為起點進行絕對定位的配置面板。A layout panel that supports the absolute positioning of child elements relative to the top left corner of the canvas.
<Canvas Width="120" Height="120">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
<Rectangle Fill="Orange" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>
方格Grid
支援以列和欄排列子元素的配置面板。A layout panel that supports the arranging of child elements in rows and columns.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>
移動瀏覽捲動檢視器Panning scroll viewer
請參閱＜捲動檢視器＞。See Scroll viewer.
RelativePanelRelativePanel
一個面板，可讓您定位及排列彼此有關係或與上層面板有關係的子物件。A panel that lets you position and align child objects in relation to each other or the parent panel.
<RelativePanel>
<TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
<Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>
參考：RelativePanelReference: RelativePanel
捲軸Scroll bar
請參閱＜捲動檢視器＞。See scroll viewer. (ScrollBar 是 ScrollViewer 的元素。(ScrollBar is an element of ScrollViewer. 您通常不會將它做為獨立控制項)。You don't typically use it as a stand-alone control.)
參考：ScrollBarReference: ScrollBar
捲動檢視器Scroll viewer
讓使用者移動瀏覽和縮放內容的容器控制項。A container control that lets the user pan and zoom its content.
<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible"
Height="200" Width="200">
<Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>
參考：ScrollViewerReference: ScrollViewer
設計和作法︰捲動和移動瀏覽控制項指南Design and how-to: Scroll and panning controls guide
範例程式碼：XAML 捲動、移動瀏覽和縮放範例Sample code: XAML scrolling, panning and zooming sample
堆疊面板Stack panel
可以將子元素按水平或垂直方向排列到單行中的配置面板。A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.
<StackPanel>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Orange"/>
</StackPanel>
參考：StackPanelReference: StackPanel
VariableSizedWrapGridVariableSizedWrapGrid
支援以列和欄排列子元素的配置面板。A layout panel that supports the arranging of child elements in rows and columns. 每個子元素可以橫跨多列和多欄。Each child element can span multiple rows and columns.
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Height="80"
VariableSizedWrapGrid.RowSpan="2"/>
<Rectangle Fill="Green" Width="80"
VariableSizedWrapGrid.ColumnSpan="2"/>
<Rectangle Fill="Orange" Height="80" Width="80"
VariableSizedWrapGrid.RowSpan="2"
VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>
參考：VariableSizedWrapGridReference: VariableSizedWrapGrid
ViewboxViewbox
將內容縮放為指定大小的容器控制項。A container control that scales its content to a specified size.
<Viewbox MaxWidth="25" MaxHeight="25">
<Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
<Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
<Image Source="Assets/Logo.png"/>
</Viewbox>
縮放捲動檢視器Zooming scroll viewer
請參閱＜捲動檢視器＞。See Scroll viewer.
媒體控制項Media controls
音訊Audio
請參閱＜媒體元素＞。See Media element.
媒體元素Media element
播放音訊和視訊內容的控制項。A control that plays audio and video content.
<MediaElement x:Name="myMediaElement"/>
參考：MediaElementReference: MediaElement
設計和作法︰媒體元素控制項指南Design and how-to: Media element control guide
MediaTransportControlsMediaTransportControls
為 MediaElement 提供播放控制項的控制項。A control that provides playback controls for a MediaElement.
<MediaTransportControls MediaElement="myMediaElement"/>
參考：MediaTransportControlsReference: MediaTransportControls
設計和作法︰媒體元素控制項指南Design and how-to: Media element control guide
範例程式碼：媒體傳輸控制項範例Sample code: Media Transport Controls sample
視訊Video
請參閱＜媒體元素＞。See Media element.
瀏覽Navigation
NavigationViewNavigationView
可調整的容器和有彈性的瀏覽模型，可實作左瀏覽窗格、上方瀏覽和索引標籤模式。An adaptable container and flexible navigation model that implements the left navigation pane, top navigation and tabs pattern.
參考：NavigationViewReference: NavigationView
設計和作法︰NavigationView 控制項指南Design and how-to: NavigationView control guide
SplitViewSplitView
具有兩個檢視的容器控制項；一個檢視供主要內容使用，另一個檢視則通常用於導覽功能表。A container control with two views; one view for the main content and another view that is typically used for a navigation menu.
<SplitView>
<SplitView.Pane>
<!-- Menu content -->
</SplitView.Pane>
<SplitView.Content>
<!-- Main content -->
</SplitView.Content>
</SplitView>
參考：SplitViewReference: SplitView
設計和作法︰分割檢視控制項指南Design and how-to: Split view control guide
網頁檢視Web view
裝載網頁內容的容器控制項。A container control that hosts web content.
<WebView x:Name="webView1" Source="https://developer.microsoft.com"
Height="400" Width="800"/>
設計和作法︰網頁檢視的指導方針Design and how-to: Guidelines for Web views
範例程式碼：XAML WebView 控制項範例Sample code: XAML WebView control sample
語意式縮放Semantic zoom
讓使用者在項目集合的兩個檢視之間縮放的容器控制項。A container control that lets the user zoom between two views of a collection of items.
<SemanticZoom>
<ZoomedInView>
<GridView></GridView>
</ZoomedInView>
<ZoomedOutView>
<GridView></GridView>
</ZoomedOutView>
</SemanticZoom>
參考：SemanticZoomReference: SemanticZoom
設計和作法︰語意式縮放控制項指南Design and how-to: Semantic zoom control guide
範例程式碼：XAML GridView 群組和 SemanticZoom 範例Sample code: XAML GridView grouping and SemanticZoom sample
進度控制項Progress controls
進度列Progress bar
顯示一條列來指示進度的控制項。A control that indicates progress by displaying a bar.
顯示特定值的進度列。A progress bar that shows a specific value.
<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>
顯示不確定進度的進度列。A progress bar that shows indeterminate progress.
<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>
參考：ProgressBarReference: ProgressBar
設計和作法︰進度控制項指南Design and how-to: Progress controls guide
進度環Progress ring
顯示一個環形來指示不確定進度的控制項。A control that indicates indeterminate progress by displaying a ring.
<ProgressRing x:Name="progressRing1" IsActive="True"/>
參考：ProgressRingReference: ProgressRing
設計和作法︰進度控制項指南Design and how-to: Progress controls guide
文字控制項Text controls
自動建議方塊Auto suggest box
在使用者輸入時提供建議文字的文字輸入方塊。A text input box that provides suggested text as the user types.
參考：AutoSuggestBoxReference: AutoSuggestBox
設計和作法︰文字控制項、自動建議方塊控制項指南Design and how-to: Text controls, Auto suggest box control guide
範例程式碼：AutoSuggestBox 移轉範例Sample code: AutoSuggestBox migration sample
多行文字方塊Multi-line text box
請參閱＜文字方塊＞。See Text box.
密碼方塊Password box
用於輸入密碼的控制項。A control for entering passwords.
<PasswordBox x:Name="passwordBox1"
PasswordChanged="PasswordBox_PasswordChanged" />
參考：PasswordBoxReference: PasswordBox
設計和作法︰文字控制項、密碼方塊控制項指南Design and how-to: Text controls, Password box control guide
範例程式碼：XAML 文字顯示範例、XAML 文字編輯範例Sample code: XAML text display sample, XAML text editing sample
Rich Edit 方塊Rich edit box
讓使用者能夠編輯 RTF 文件 (內容包括格式化文字、超連結及影像等) 的控制項。A control that lets a user edit rich text documents with content like formatted text, hyperlinks, and images.
<RichEditBox />
參考：RichEditBoxReference: RichEditBox
設計和作法︰文字控制項、Rich Edit 方塊控制項指南Design and how-to: Text controls, Rich edit box control guide
範例程式碼：XAML 文字範例Sample code: XAML text sample
搜尋方塊Search box
請參閱＜自動建議方塊＞。See Auto suggest box.
單行文字方塊Single-line text box
請參閱＜文字方塊＞。See Text box.
靜態文字/段落Static text/paragraph
請參閱＜文字區塊＞。See Text block.
文字區塊Text block
顯示文字的控制項。A control that displays text.
<TextBlock x:Name="textBlock1" Text="I am a TextBlock"/>
參考：TextBlock、RichTextBlockReference: TextBlock, RichTextBlock
設計和作法︰文字控制項、文字區塊控制項指南、RTF 區塊控制項指南Design and how-to: Text controls, Text block control guide, Rich text block control guide
範例程式碼：XAML 文字範例Sample code: XAML text sample
文字方塊Text box
單行或多行純文字欄位。A single-line or multi-line plain text field.
<TextBox x:Name="textBox1" Text="I am a Text Box."
TextChanged="TextBox_TextChanged"/>
設計和作法︰文字控制項、文字方塊控制項指南Design and how-to: Text controls, Text box control guide
範例程式碼：XAML 文字範例Sample code: XAML text sample
選取控制項Selection controls
核取方塊Check box
使用者可以選取或清除的控制項。A control that a user can select or clear.
<CheckBox x:Name="checkbox1" Content="CheckBox"
Checked="CheckBox_Checked"/>
參考：CheckBoxReference: CheckBox
設計和作法︰核取方塊控制項指南Design and how-to: Check box control guide
下拉式方塊Combo box
使用者可以選取項目的下拉式清單。A drop-down list of items a user can select from.
<ComboBox x:Name="comboBox1" Width="100"
SelectionChanged="ComboBox_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ComboBox>
參考：ComboBoxReference: ComboBox
設計和作法︰清單Design and how-to: Lists
清單方塊List box
顯示使用者可以選取項目的內嵌項目清單的控制項。A control that presents an inline list of items that the user can select from.
<ListBox x:Name="listBox1" Width="100"
SelectionChanged="ListBox_SelectionChanged">
<x:String>List item 1</x:String>
<x:String>List item 2</x:String>
<x:String>List item 3</x:String>
</ListBox>
設計和作法︰清單Design and how-to: Lists
選項按鈕Radio button
允許使用者從選項群組中選取單一選項的控制項。A control that allows a user to select a single option from a group of options. 當選項按鈕被群組在一起時，彼此是互斥的。When radio buttons are grouped together, they are mutually exclusive.
<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1"
Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1"
Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1"
Checked="RadioButton_Checked"/>
參考：RadioButtonReference: RadioButton
設計和作法︰選項按鈕控制項指南Design and how-to: Radio button control guide
滑桿Slider
一個控制項，透過讓使用者沿著軌跡移動 Thumb 控制項，從一定範圍內選取值。A control that lets the user select from a range of values by moving a Thumb control along a track.
<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />
設計和作法︰滑桿控制項指南Design and how-to: Slider control guide
切換按鈕Toggle button
可以在兩種狀態之間切換的按鈕。A button that can be toggled between 2 states.
<ToggleButton x:Name="toggleButton1" Content="Button"
Checked="ToggleButton_Checked"/>
參考：ToggleButtonReference: ToggleButton
設計和作法︰切換控制項指南Design and how-to: Toggle control guide
切換開關Toggle switch
可以在兩種狀態之間切換的開關。A switch that can be toggled between 2 states.
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
OnContent="On" OffContent="Off"
Toggled="ToggleSwitch_Toggled"/>
參考：ToggleSwitchReference: ToggleSwitch
設計和作法︰切換控制項指南Design and how-to: Toggle control guide