按钮Buttons

按钮为用户提供了触发即时操作的方法。A button gives the user a way to trigger an immediate action. 某些按钮专用于特定的任务,例如导航、重复的操作或提供菜单。Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

按钮示例

Extensible Application Markup Language (XAML) 框架提供了一个标准按钮控件,以及多个专用的按钮控件。The Extensible Application Markup Language (XAML) framework provides a standard button control as well as several specialized button controls.

控件Control 描述Description
ButtonButton 用于启动即时操作的按钮。A button that initiates an immediate action. 可以与 Click 事件或 Command 绑定配合使用。Can be used with a Click event or Command binding.
RepeatButtonRepeatButton 一种按钮,在被按下时会持续引发 Click 事件。A button that raises a Click event continuously while pressed.
HyperlinkButtonHyperlinkButton 一种按钮,其样式设置类似于超链接,用于导航。A button that's styled like a hyperlink and used for navigation. 有关超链接的详细信息,请参阅超链接For more info about hyperlinks, see Hyperlinks.
DropDownButtonDropDownButton 一种带 V 形图标的按钮,用于打开附加的浮出控件。A button with a chevron to open an attached flyout.
SplitButtonSplitButton 一种按钮,分为两端。A button with two sides. 一端启动操作,另一端打开菜单。One side initiates an action, and the other side opens a menu.
ToggleSplitButtonToggleSplitButton 一种切换按钮,分为两端。A toggle button with two sides. 一端进行开/关切换,另一端打开菜单。One side toggles on/off, and the other side opens a menu.
ToggleButtonToggleButton 可以打开或关闭的按钮。A button that can be on or off.
获取 Windows UI 库Get the Windows UI Library
DropDownButtonSplitButtonToggleSplitButton 作为 Windows UI 库的一部分提供,该库是一个 Nuget 包,其中包含用于 UWP 应用的新控件和 UI 功能。DropDownButton, SplitButton, and ToggleSplitButton are included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for UWP apps. 有关详细信息(包括安装说明),请参阅 Windows UI 库For more info, including installation instructions, see Windows UI Library.
平台 APIPlatform APIs Windows UI 库Windows UI Library APIs
Click 事件Click event
Command 属性Command property
DropDownButton 类DropDownButton class
SplitButton 类SplitButton class
ToggleSplitButton 类ToggleSplitButton class

这是正确的控件吗?Is this the right control?

用户可以使用 Button 控件启动即时操作,如提交表单。Use a Button control to let the user initiate an immediate action, such as submitting a form.

当操作是导航到另一个页面时,不要使用 Button 控件,应改用 HyperlinkButton 控件。Don't use a Button control when the action is to navigate to another page; instead, use a HyperlinkButton control. 有关超链接的详细信息,请参阅超链接For more info about hyperlinks, see Hyperlinks.

重要

对于向导导航,请使用标记为“上一步”和“下一步”的按钮 。For wizard navigation, use buttons labeled Back and Next. 对于其他类型的向后导航或向上导航,请使用“上一步”按钮For other types of backwards navigation or navigation to an upper level, use a back button.

当用户可能需要反复触发某个操作时,请使用 RepeatButton 控件。Use a RepeatButton control when the user might want to trigger an action repeatedly. 例如,使用 RepeatButton 控件将计数器中的某个值递增或递减。For example, use a RepeatButton control to increment or decrement a value in a counter.

当按钮的浮出控件包含多个选项时,使用 DropDownButton 控件。Use a DropDownButton control when the button has a flyout that contains more options. 默认的 V 形以视觉方式提示用户,此按钮包含浮出控件。The default chevron provides a visual indication that the button includes a flyout.

如果希望用户能够启动即时操作或从其他选项中独立进行选择,则使用 SplitButton 控件。Use a SplitButton control when you want the user to be able to initiate an immediate action or choose from additional options independently.

如果希望用户能够在两个互斥状态之间进行即时切换,则使用 ToggleButton 控件,而按钮最能满足你的 UI 需求。Use a ToggleButton control when you want the user to be able to immediately switch between two mutually exclusive states, and a button is the best fit for your UI needs. 除非 UI 适合使用按钮,否则使用 AppBarToggleButtonCheckBoxRadioButtonToggleSwitch 可能会更好。Unless your UI benefits from a button, it might be a better choice to use an AppBarToggleButton, CheckBox, RadioButton, or ToggleSwitch.

示例Examples

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果已安装 XAML 控件库,请单击此处打开此应用,了解 Button 的实际作用If you have XAML Controls Gallery installed, click here to open the app and see the Button in action.

此示例在请求位置访问权限的对话框中使用两个按钮,即 AllowBlockThis example uses two buttons, Allow and Block, in a dialog that requests location access.

在对话框中使用的按钮示例

创建按钮Create a button

此示例显示一个响应单击操作的按钮。This example shows a button that responds to a click.

在 XAML 中创建按钮。Create the button in XAML.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

或在代码中创建按钮。Or create the button in code.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

处理 Click 事件。Handle the Click event.

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

按钮交互Button interaction

如果用手指或触笔点击某个 Button 控件,或在指针位于该控件上时按鼠标左键,则按钮会引发 Click 事件。When you tap a Button control with a finger or stylus, or press a left mouse button while the pointer is over it, the button raises the Click event. 如果按钮具有键盘焦点,则按 Enter 键或空格键也会引发 Click 事件。If a button has keyboard focus, pressing the Enter key or the Spacebar also raises the Click event.

你通常无法处理 Button 对象上的低级别 PointerPressed 事件,因为它具有 Click 行为。You generally can't handle low-level PointerPressed events on a Button object because it has the Click behavior instead. 有关详细信息,请参阅事件和路由事件概述For more info, see Events and routed events overview.

可以通过更改 ClickMode 属性来更改按钮引发 Click 事件的方式。You can change how a button raises the Click event by changing the ClickMode property. ClickMode 默认值为 Release,但你也可以将按钮的 ClickMode 值设置为 HoverPressThe default value of ClickMode is Release, but you also can set a button's ClickMode value to Hover or Press. 如果 ClickModeHover,则无法使用键盘或触控引发 Click 事件。If ClickMode is Hover, the Click event can't be raised by using the keyboard or touch.

按钮内容Button content

ButtonContentControl 类的内容控件。Button is a content control of the ContentControl class. 它的 XAML 内容属性为 Content,这对于 XAML 支持如下所示的语法:<Button>A button's content</Button>Its XAML content property is Content, which enables a syntax like this for XAML: <Button>A button's content</Button>. 可以将任何对象设置为按钮的内容。You can set any object as the button's content. 如果内容是一个 UIElement 对象,则会在按钮中呈现它。If the content is a UIElement object, it is rendered in the button. 如果该内容是另一种类型的对象,则会在按钮中显示其字符串表示形式。If the content is another type of object, its string representation is shown in the button.

按钮内容通常为文本。A button's content is usually text. 在设计该文本时,请使用以下建议:When you design that text, use the following recommendations:

  • 使用简洁具体而又明晰易懂的文本来清楚地描述按钮可以执行的操作。Use a concise, specific, self-explanatory text that clearly describes the action that the button performs. 通常,按钮文本内容是一个作为动词的单个字词。Usually button text is a single word that is a verb.

  • 请使用默认字体,除非你的品牌指南告诉你使用其他字体。Use the default font, unless your brand guidelines tell you to use something different.

  • 对于较短的文本,通过使用最小按钮宽度 120px 避免命令按钮过窄。For shorter text, avoid narrow command buttons by using a minimum button width of 120px.

  • 对于较长的文本,通过将文本最大长度限制为 26 个字符避免命令按钮过宽。For longer text, avoid wide command buttons by limiting text to a maximum length of 26 characters.

  • 如果按钮的文本内容是动态的(即,它已本地化),请考虑按钮大小将如何调整及其对周围控件的影响。If the button's text content is dynamic (that is, it is localized), consider how the button will be resized and what will happen to controls around it.

需要修复:Need to fix:
具有溢出文本的按钮。Buttons with overflowing text.
选项 1:Option 1:
如果文本长度大于 26 个字符,请增加按钮宽度、堆叠按钮和换行。Increase button width, stack buttons, and wrap if text length is greater than 26 characters.
选项 2:Option 2:
增加按钮高度并对文本换行。Increase button height, and wrap text.

还可以自定义构成按钮外观的视觉效果。You can also customize visuals that make up the button's appearance. 例如,可以将文本替换为图标,或使用图标以及文本。For example, you could replace the text with an icon, or use an icon in addition to text.

在这里,我们将一个包含图像和文本的 StackPanel 设置为按钮内容。Here, a StackPanel that contains an image and text is set as the content of a button.

<Button Click="Button_Click"
        Background="LightGray"
        Height="100" Width="80">
    <StackPanel>
        <Image Source="Assets/Photo.png" Height="62"/>
        <TextBlock Text="Photos" Foreground="Black"
                   HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

按钮如下所示。The button looks like this.

包含图像和文本内容的按钮

创建重复按钮Create a repeat button

RepeatButton 控件是一个从按下时到释放为止重复引发 Click 事件的按钮。A RepeatButton control is a button that raises Click events repeatedly from the time it's pressed until it's released. 设置 Delay 属性可指定 RepeatButton 控件在其被按下后和开始重复单击操作之间等待的时间。Set the Delay property to specify the time that the RepeatButton control waits after it is pressed before it starts repeating the click action. 设置 Interval 属性来指定重复单击操作之间的时间。Set the Interval property to specify the time between repetitions of the click action. 两个属性的时间都以毫秒为单位指定。Times for both properties are specified in milliseconds.

以下示例显示两个 RepeatButton 控件,两者各自的 Click 事件用于增加和减少文本块中显示的值。The following example shows two RepeatButton controls whose respective Click events are used to increase and decrease the value shown in a text block.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>
private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

创建下拉按钮Create a drop down button

DropDownButton 需要 Windows UI 库或 Windows 10 版本 1809(SDK 17763)或更高版本。DropDownButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. 若要下载最新 SDK,请参阅 Windows 10 SDK;若要下载较早的 SDK,请参阅 Windows SDK 和模拟器存档To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

DropDownButton 是一个按钮,它显示一个 V 形图标作为视觉指示器,表明其附加的浮出控件包含更多选项。A DropDownButton is a button that shows a chevron as a visual indicator that it has an attached flyout that contains more options. 其行为与包含浮出控件的标准 Button 控件相同,仅外观存在差异。It has the same behavior as a standard Button control with a flyout; only the appearance is different.

该下拉按钮继承了 Click 事件,但你通常不使用它,The drop down button inherits the Click event, but you typically don't use it. 而是使用 Flyout 属性附加一个浮出控件,并使用浮出控件中的菜单选项来调用操作。Instead, you use the Flyout property to attach a flyout and invoke actions by using menu options in the flyout. 单击按钮时,浮出控件会自动打开。The flyout opens automatically when the button is clicked. 请务必指定浮出控件的 Placement 属性,确保与按钮相关的放置符合需要。Be sure to specify the Placement property of your flyout to ensure the desired placement in relation to the button. 默认的放置算法不一定在所有情况下都能确保放置符合需求。The default placement algorithm might not produce the intended placement in all situations.

提示

有关浮出控件的详细信息,请参阅菜单和上下文菜单For more info about flyouts, see Menus and context menus.

示例 - 下拉按钮Example - Drop down button

此示例演示如何创建带浮出控件的下拉按钮,该控件包含的命令用于在 RichEditBox 控件中进行段落对齐。This example shows how to create a drop down button with a flyout that contains commands for paragraph alignment in a RichEditBox control. (有关详细信息和代码,请参阅富编辑框)。(For more info and code, see Rich edit box).

包含对齐命令的下拉按钮

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>
private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

创建拆分按钮Create a split button

重要

SplitButton 需要 Windows UI 库或 Windows 10 版本 1809(SDK 17763)或更高版本。SplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. 若要下载最新 SDK,请参阅 Windows 10 SDK;若要下载较早的 SDK,请参阅 Windows SDK 和模拟器存档To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

SplitButton 控件有两个可以分别调用的部分。A SplitButton control has two parts that can be invoked separately. 一个部分的行为类似于标准按钮,可以调用即时操作。One part behaves like a standard button and invokes an immediate action. 另一个部分调用浮出控件,该控件包含可供用户选择的其他选项。The other part invokes a flyout that contains additional options that the user can choose from.

备注

以触控方式调用时,拆分按钮的行为与下拉按钮一样;按钮的两部分都会调用浮出控件。When invoked with touch, the split button behaves as a drop down button; both halves of the button invoke the flyout. 使用其他输入方式时,用户可以单独调用按钮的任一部分。With other methods of input, a user can invoke either half of the button separately.

拆分按钮的典型行为如下:The typical behavior for a split button is:

  • 当用户单击按钮部分时,处理 Click 事件来调用当前已在下拉列表中选中的选项。When the user clicks the button part, handle the Click event to invoke the option that's currently selected in the drop down.

  • 当下拉列表打开时,处理下拉列表中项的调用,更改所选的选项,然后调用它。When the drop down is open, handle invocation of the items in the drop down to both change which option is selected, and then invoke it. 必须调用浮出控件项,因为在使用触控时不发生按钮 Click 事件。It's important to invoke the flyout item because the button Click event doesn't occur when using touch.

提示

可以通过多种方式将项置于下拉列表中并处理其调用。There are many ways to put items in the drop down and handle their invocation. 如果使用 ListViewGridView,一种方式是处理 SelectionChanged 事件。If you use a ListView or GridView, one way is to handle the SelectionChanged event. 如果这样做,请将 SingleSelectionFollowsFocus 设置为 falseIf you do this, set SingleSelectionFollowsFocus to false. 这样用户就可以使用键盘来导航选项,在每次变换选项时不会调用项。This lets users navigate the options using a keyboard without invoking the item on each change.

示例 - 拆分按钮Example - Split button

此示例演示如何创建拆分按钮,该按钮用于更改 RichEditBox 控件中所选文本的前景色。This example shows how to create a split button that is used to change the foreground color of selected text in a RichEditBox control. (有关详细信息和代码,请参阅富编辑框)。(For more info and code, see Rich edit box). 拆分按钮的浮出控件使用 BottomEdgeAlignedLeft 作为其 Placement 属性的默认值。Split button's flyout uses BottomEdgeAlignedLeft as the default value for its Placement property. 不能覆盖此值。You can't override this value.

用于选择前景色的拆分按钮

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>
public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

创建切换式拆分按钮Create a toggle split button

备注

ToggleSplitButton 需要 Windows UI 库或 Windows 10 版本 1809(SDK 17763)或更高版本。ToggleSplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. 若要下载最新 SDK,请参阅 Windows 10 SDK;若要下载较早的 SDK,请参阅 Windows SDK 和模拟器存档To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

ToggleSplitButton 控件有两个可以分别调用的部分。A ToggleSplitButton control has two parts that can be invoked separately. 一个部分的行为类似于可以打开或关闭的切换按钮。One part behaves like a toggle button that can be on or off. 另一个部分调用浮出控件,该控件包含可供用户选择的其他选项。The other part invokes a flyout that contains additional options that the user can choose from.

切换式拆分按钮通常用于启用或禁用某项功能,该功能有多个可供用户选择的选项。A toggle split button is typically used to enable or disable a feature when the feature has multiple options that the user can choose from. 例如,在文档编辑器中,可以使用它来打开或关闭列表,而下拉按钮则用来选择列表的样式。For example, in a document editor, it could be used to turn lists on or off, while the drop down is used to choose the style of the list.

备注

以触控方式调用时,切换式拆分按钮的行为与下拉按钮一样。When invoked with touch, the toggle split button behaves as a drop down button. 使用其他输入方式时,用户可以切换并单独调用按钮的两个部分。With other methods of input, a user can toggle and invoke the two halves of the button separately. 使用触控时,按钮的两部分都会调用浮出控件。With touch, both halves of the button invoke the flyout. 因此,必须在浮出控件中包括一个用来通过切换方式打开或关闭按钮的选项。Therefore, you must include an option in your flyout content to toggle the button on or off.

与 ToggleButton 的差异Differences with ToggleButton

ToggleButton 不一样,ToggleSplitButton 没有不确定状态。Unlike ToggleButton, ToggleSplitButton does not have an indeterminate state. 因此,应注意以下差异:As a result, you should keep in mind these differences:

  • ToggleSplitButton 没有 IsThreeState 属性或 Indeterminate 事件。ToggleSplitButton does not have an IsThreeState property or Indeterminate event.
  • ToggleSplitButton.IsChecked 属性就是一个布尔值,而不是一个可为 null 的The ToggleSplitButton.IsChecked property is just a Boolean, not a Nullable.
  • ToggleSplitButton 只有 IsCheckedChanged 事件,没有单独的 CheckedUnchecked 事件。ToggleSplitButton has only the IsCheckedChanged event; it does not have separate Checked and Unchecked events.

示例 - 切换式拆分按钮Example - Toggle split button

以下示例演示如何在 RichEditBox 控件中使用切换式拆分按钮来启用或禁用列表格式设置,以及更改列表的样式。The following example shows how a toggle split button could be used to turn list formatting on or off, and change the style of the list, in a RichEditBox control. (有关详细信息和代码,请参阅富编辑框)。(For more info and code, see Rich edit box). 切换式拆分按钮的浮出控件使用 BottomEdgeAlignedLeft 作为其 Placement 属性的默认值。The flyout of the toggle split button uses BottomEdgeAlignedLeft as the default value for its Placement property. 不能覆盖此值。You can't override this value.

用于选择列表样式的切换式拆分按钮

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>
private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

建议Recommendations

  • 请确保用户清楚地了解按钮的目的和状态。Make sure the purpose and state of a button are clear to the user.

  • 有多个按钮用于相同决策时(例如,在确认对话框中),请按以下顺序显示提交按钮,其中,[执行]和[不执行]是对主要说明的具体响应:When there are multiple buttons for the same decision (such as in a confirmation dialog), present the commit buttons in this order, where [Do it] and [Don't do it] are specific responses to the main instruction:

    • 确定/[执行]/是OK/[Do it]/Yes
      • [不执行]/否[Don't do it]/No
      • CancelCancel
  • 一次仅向用户显示一两个按钮,例如,“接受” 和“取消” 。Expose only one or two buttons to the user at a time, for example, Accept and Cancel. 如果你需要为用户显示更多操作,请考虑使用用户可从中选择操作的复选框单选按钮,并通过一个命令按钮来触发这些操作。If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.

  • 对于需要在应用的多个页面上提供的操作,请考虑使用底部应用栏,而不要在多个页面上重复设置按钮。For an action that needs to be available across multiple pages within your app, instead of duplicating a button on multiple pages, consider using a bottom app bar.

如果布局只需一个按钮,则它应基于其容器上下文进行左对齐或右对齐。If your layout requires only one button, it should be either left- or right-aligned based on its container context.

  • 只有一个按钮的对话框应使按钮右对齐Dialogs with only one button should right-align the button. 如果对话框只包含一个按钮,请确保该按钮执行安全、无破坏性的操作。If your dialog contains only one button, ensure that the button performs the safe, nondestructive action. 如果使用 ContentDialog 并指定单个按钮,则它会自动右对齐。If you use ContentDialog and specify a single button, it will be automatically right-aligned.

    对话框中的按钮

  • 如果按钮出现在容器 UI 中(例如,在 toast 通知、浮出控件或列表视图项目中),则应在容器中使按钮右对齐If your button appears within a container UI (for example, within a toast notification, a flyout, or a list view item), you should right-align the button within the container.

    容器中的按钮

  • 在包含单个按钮的页面中(例如,处于设置页面底部的“应用” 按钮),应使按钮左对齐In pages that contain a single button (for example, an Apply button at the bottom of a settings page), you should left-align the button. 这会确保按钮与页面内容的其余部分对齐。This ensures that the button aligns with the rest of the page content.

    页面上的按钮

后退按钮Back buttons

后退按钮是一种系统提供的 UI 元素,可支持在后退堆栈或用户导航历史记录中向后导航。The back button is a system-provided UI element that enables backward navigation through either the back stack or navigation history of the user. 你无需创建自己的后退按钮,但可能必须进行一些工作才能支持良好的后退导航体验。You don't have to create your own back button, but you might have to do some work to enable a good backwards navigation experience. 有关详细信息,请参阅 UWP 应用的导航历史记录和向后导航For more info, see Navigation history and backwards navigation for UWP apps.

获取示例代码Get the sample code