Пуговицы

Кнопка предоставляет пользователю возможность вызвать немедленное действие. Некоторые кнопки предназначены специально для конкретных задач, таких как навигация, повторяющиеся действия или отображение меню.

Платформа языка разметки приложений (XAML) предоставляет стандартный элемент управления кнопкой, а также несколько специализированных элементов управления кнопками.

Является ли это правильным элементом управления?

Используйте элемент управления Button , чтобы позволить пользователю инициировать немедленное действие, например отправку формы.

Не используйте элемент управления "Кнопка ", когда действие будет переходить на другую страницу; вместо этого используйте элемент управления ГиперссылкаButton . Дополнительные сведения о гиперссылках см. в разделе "Гиперссылки".

Используйте элемент управления RepeatButton , когда пользователь может несколько раз активировать действие. Например, используйте элемент управления RepeatButton для увеличения или уменьшения значения в счетчике.

Используйте элемент управления DropDownButton , если кнопка содержит всплывающий элемент, содержащий дополнительные параметры. Значок шеврона по умолчанию является визуальным индикатором наличия у кнопки всплывающего меню.

Используйте элемент управления SplitButton , если вы хотите, чтобы пользователь мог инициировать немедленное действие или выбрать дополнительные параметры независимо.

Используйте элемент управления ToggleButton , если вы хотите, чтобы пользователь мог немедленно переключаться между двумя взаимоисключающими состояниями, и кнопка лучше подходит для ваших потребностей пользовательского интерфейса. Если пользовательский интерфейс не использует кнопку, лучше использовать AppBarToggleButton, CheckBox, RadioButton или ToggleSwitch.

Рекомендации

• Сделайте так, чтобы назначение и состояние кнопки было понятно пользователю.

• Если для одного решения предусмотрено несколько кнопок (например, в диалоговом окне подтверждения), расположите эти кнопки в таком порядке, где [Выполнить] и [Не выполнять] будут конкретными вариантами ответа на основную команду:

  • ОК/[Сделать это]/Да
    • [Не делай этого]/Нет
    • Отменить

• Предоставление пользователю только одной или двух кнопок за раз, например "Принять " и "Отмена". Если вам нужно предоставить пользователю дополнительные действия, рекомендуется использовать флажки или переключатели , из которых пользователь может выбрать действия, с одной кнопкой команды, чтобы активировать эти действия.

• Чтобы действие было доступно на нескольких страницах вашего приложения, вместо дублирования кнопки на каждой странице, рассмотрите возможность использования нижней панели приложения.

Текст кнопки

Содержимое кнопки обычно представляет собой текст. При создании этого текста следуйте таким рекомендациям:

• Используйте краткий, конкретный, не требующий разъяснений текст, который четко описывает действие, выполняемое кнопкой. Обычно текст надписи на кнопке состоит из одного слова, как правило, глагола.

• Используйте шрифт, заданный по умолчанию, если не требуется использовать другой.

• При размещении короткого текста избегайте использования узких кнопок. Минимальная ширина кнопки должна составлять 120 пикселей.

• При размещении длинного текста избегайте использования широких кнопок. Длина текста должна составлять не более 26 символов.

• Если текстовое содержимое кнопки является динамическим (то есть локализовано), рассмотрите способ изменения размера кнопки и то, что произойдет с элементами управления вокруг него.

Необходимо исправить следующее: Кнопки с переполняющим текстом.
Вариант 1. Увеличьте ширину кнопки, разместите кнопки друг под другом и перенесите текст, если его длина превышает 26 символов.
Вариант 2. Увеличьте высоту кнопки и перенесите текст.

Рекомендуемый макет с одной кнопкой

Если в макете требуется только одна кнопка, она должна быть выровнена по левому или правому краю в соответствии с контекстом контейнера.

• Диалоги с одной кнопкой должны выровнять по правому краю кнопку. Если диалоговое окно содержит только одну кнопку, убедитесь, что она выполняет безопасное, обратимое действие. Если вы используете ContentDialog и указали одну кнопку, она автоматически будет выровнена по правому краю.

  

• Если ваша кнопка отображается в контейнере пользовательского интерфейса (например, в уведомлении, выпадающем меню или элементе списка), вы должны выровнять по правому краю кнопку в контейнере.

  

• На страницах, содержащих одну кнопку (например, кнопку "Применить " в нижней части страницы параметров), следует выровнять ее по левому краю . Это обеспечит соответствие кнопки остальной части содержимого страницы.

  

Кнопки "Назад"

Кнопка "Назад" — это элемент пользовательского интерфейса, предоставленный системой, который позволяет осуществлять обратную навигацию либо через обратный стек, либо через журнал навигации пользователя. Вы не обязаны создавать собственную кнопку "Назад", но вы можете выполнить определенные действия, чтобы реализовать хорошие возможности обратной навигации. Для получения дополнительной информации см. историю навигации и обратное перемещение для приложений Windows.

Примеры

В этом примере используются три кнопки, "Сохранить", "Не сохранять" и "Отмена", в диалоговом окне с запросом пользователей, если они хотят сохранить свою работу.

Создание кнопки

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

В этом примере рассматривается кнопка, которая реагирует на щелчок.

Создайте кнопку в XAML.

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

Либо создайте кнопку в коде.

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.

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();
}

Взаимодействие с кнопкой

При нажатии на Кнопку пальцем или стилусом, либо при нажатии левой кнопки мыши, когда указатель находится над кнопкой, вызывается событие Click. Если кнопка имеет фокус клавиатуры, нажатие клавиши ВВОД или пробел также вызывает событие Click .

Как правило, вы не можете обрабатывать события pointerPressed низкого уровня в объекте Button , так как он имеет поведение click . Дополнительные сведения см. в разделе "События" и обзор перенаправленных событий.

Вы можете изменить, как кнопка вызывает событие Click , изменив свойство ClickMode . Значение по умолчанию clickMode — Release, но можно также задать для кнопки значение ClickMode на Hover или Нажмите. Если ClickMode установлен в Наведение, событие Click не может быть инициировано с помощью клавиатуры или сенсорного ввода.

Содержимое кнопки

Кнопка — это элемент управления содержимым класса ContentControl . Его свойство содержимого XAML — Content, которое включает синтаксис, подобный этому для XAML: <Button>A button's content</Button> В качестве содержимого кнопки можно задать любой объект. Если содержимое является объектом UIElement , оно отображается в кнопке. Если содержимым является другой тип объекта, в кнопке отображается его строковое представление.

Содержимое кнопки обычно представляет собой текст. При проектировании этого текста следуйте ранее перечисленным рекомендациям по тексту кнопки.

Можно также настроить визуальные элементы, составляющие внешний вид кнопки. Например, можно заменить текст значком или использовать значок вместе с текстом.

Здесь stackPanel , содержащий изображение и текст, задается как содержимое кнопки.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

Кнопка выглядит следующим образом.

Создание кнопки повтора

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Элемент управления RepeatButton — это кнопка, которая неоднократно вызывает события Click с момента её нажатия, пока она не будет освобождена. Задайте свойство Delay , чтобы указать время ожидания элемента управления RepeatButton после нажатия, прежде чем он начнет повторять действие щелчка. Задайте свойство Interval , чтобы указать время между повторами действия щелчка. Время для обоих свойств указывается в миллисекундах.

В следующем примере показаны два элемента управления RepeatButton , соответствующие события click используются для увеличения и уменьшения значения, показанного в текстовом блоке.

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

Создайте раскрывающуюся кнопку

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

DropDownButton — это кнопка, показывающая шеврон как визуальный индикатор того, что к ней прикреплено выпадающее меню с дополнительными параметрами. Он имеет то же поведение, что и стандартный элемент управления Button со всплывающим элементом; только внешний вид отличается.

Кнопка раскрывающегося списка наследует событие Click , но обычно не используете его. Вместо этого вы используете свойство Flyout для присоединения всплывающего элемента и вызова действий с помощью параметров меню во всплывающем элементе. Всплывающее меню открывается автоматически при нажатии кнопки. Обязательно укажите свойство размещения всплывающего элемента, чтобы обеспечить желаемое расположение относительно кнопки. Алгоритм размещения по умолчанию может не обеспечить предполагаемое размещение во всех ситуациях. Дополнительные сведения о всплывающих меню см. в Всплывающие окна и Всплывающее меню и строка меню.

Пример - Раскрывающаяся кнопка

В этом примере показано, как создать кнопку раскрывающегося списка со всплывающим элементом, содержащим команды выравнивания абзацев в элементе управления RichEditBox. (Дополнительные сведения и код см. в поле редактирования с расширенными возможностями).

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

Создайте разделяющуюся кнопку

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Элемент управления SplitButton состоит из двух частей, которые можно вызывать отдельно. Одна часть представляет собой стандартную кнопку, которая вызывает немедленное действие. Другая часть позволяет вызывать всплывающий элемент с дополнительными параметрами, которые пользователь может выбрать.

Стандартное поведение разделенной кнопки:

• Когда пользователь нажимает кнопку, обработайте событие Click, чтобы вызвать выбранный параметр в раскрывающемся списке.

• При открытии раскрывающегося списка необходимо обработать вызов элементов, чтобы изменить выбранный вариант и затем выполнить его. Важно вызвать всплывающий элемент, так как событие нажатия кнопки не происходит при использовании сенсорного ввода.

Пример - Кнопка с разделением

В этом примере показано, как создать кнопку разделения, которая используется для изменения цвета переднего плана выделенного текста в элементе управления RichEditBox . (Дополнительные сведения и код см. в поле редактирования с расширенными возможностями). Всплывающее меню кнопки Split использует BottomEdgeAlignedLeft в качестве значения по умолчанию для его свойства Placement . Вы не можете переопределить это значение.

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

Создайте раздельную кнопку с переключателем

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Элемент управления ToggleSplitButton состоит из двух частей, которые можно вызвать отдельно. Одна часть ведет себя как переключатель, который может быть включен или выключен. Другая часть позволяет вызывать всплывающий элемент с дополнительными параметрами, которые пользователь может выбрать.

Разворачивающаяся кнопка с переключателем обычно используется для активации или деактивации компонента, если компонент содержит множество возможностей, из которых пользователь может выбирать. Например, в редакторе документов она может использоваться для включения или выключения списков, а раскрывающийся список — для выбора стиля списка.

Отличия от тоггл-кнопки

В отличие от ToggleButton, ToggleSplitButton не имеет неопределенного состояния. По этой причине вы должны учитывать следующие различия:

• ToggleSplitButton не имеет свойства IsThreeState или события Indeterminate.
• Свойство ToggleSplitButton.IsChecked представляет собой просто логическое значение, а не Nullable.
• ToggleSplitButton имеет только событие IsCheckedChanged, в нем нет отдельных событий Checked и Unchecked.

Пример — кнопка-разделитель с переключателем

В следующем примере показано, как можно использовать переключатель для включения или отключения форматирования списка и изменения стиля списка в элементе управления RichEditBox . (Дополнительные сведения и код см. в поле редактирования с расширенными возможностями). Всплывающее окно переключаемой кнопки-разделителя использует BottomEdgeAlignedLeft в качестве значения по умолчанию для своего свойства Размещения. Вы не можете переопределить это значение.

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

UWP и WinUI 2

Элементы управления DropDownButton, SplitButton и ToggleSplitButton для приложений UWP включены в состав WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этих элементов управления существуют как в пространствах имен Windows.UI.Xaml.Controls , так и в пространствах имен Microsoft.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этих элементов управления, использующих округленные угла. Дополнительные сведения см. в разделе "Радиус угла".

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Связанные статьи

• Button класс
• Радиокнопки
• флажки
• Переключатели