依功能分類的控制項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 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.

參考:AppBarReference: AppBar

應用程式列按鈕App bar button

使用應用程式列樣式顯示命令的按鈕。A button for showing commands using app bar styling.

應用程式列按鈕圖示

參考:AppBarButtonSymbolIconBitmapIconFontIconPathIconReference: 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" />

參考:ButtonReference: Button

設計和作法︰按鈕控制項指南Design and how-to: Buttons control guide

請參閱<超連結按鈕>。See 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 控制項

<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>

參考:飛出視窗Reference: Flyout

設計和作法︰飛出視窗Design and how-to: Flyouts

暫時顯示與使用者目前正在執行之動作相關的命令或選項清單。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>

參考:MenuFlyoutMenuFlyoutItemMenuFlyoutSeparatorToggleMenuFlyoutItemReference: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem

設計和作法︰功能表和操作功能表Design and how-to: Menus and context menus

範例程式碼:XAML 操作功能表範例Sample code: XAML Context Menu sample

顯示您所指定命令的自訂功能表。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" />

參考:ToolTipToolTipServiceReference: ToolTip, ToolTipService

設計和作法︰工具提示的指導方針Design and how-to: Guidelines for tooltips

映像Images

影像Image

顯示影像的控制項。A control that presents an image.

<Image Source="Assets/Logo.png" />

參考:影像Reference: Image

設計和作法︰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.

多邊形 路徑A polygon A path

<Ellipse/>
<Path/>
<Rectangle/>

參考:形狀Reference: Shapes

作法:繪製形狀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>

參考:BorderReference: 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>

參考:CanvasReference: 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>

參考:GridReference: 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 控制項

<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>

參考:ViewboxReference: 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.

可調整的容器和有彈性的瀏覽模型,可實作左瀏覽窗格、上方瀏覽和索引標籤模式。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"/>

參考:WebViewReference: WebView

設計和作法︰網頁檢視的指導方針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

請參閱<自動建議方塊>。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"/>

參考:TextBlockRichTextBlockReference: 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"/>

參考:TextBoxReference: TextBox

設計和作法︰文字控制項文字方塊控制項指南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>

參考:ListBoxReference: 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" />

參考:滑桿Reference: Slider

設計和作法︰滑桿控制項指南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