按功能列出控件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

下面是按功能列出的可在应用中使用的常见 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 images sample

图形和墨迹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.

2 个矩形周围的边框

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

参考:画布Reference: 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>

参考:网格Reference: 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

AudioAudio

请参阅媒体元素。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 视图Web view

可托管 Web 内容的容器控件。A container control that hosts web content.

<WebView x:Name="webView1" Source="https://developer.microsoft.com" 
         Height="400" Width="800"/>

参考:WebViewReference: WebView

设计和操作方法:Web 视图指南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 box

使用户可以编辑带有格式化文本、超链接和图像等内容的富文本文档的控件。A control that lets a user edit rich text documents with content like formatted text, hyperlinks, and images.

<RichEditBox />

参考:RichEditBoxReference: RichEditBox

设计和操作方法:文本控件可编辑对话框控件指南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 TextBox" 
         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.

3 种状态的复选框

<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>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>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

可以在 2 种状态之间进行切换的一种按钮。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

可以在 2 种状态之间进行切换的一种开关。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