BotonesButtons

Un botón ofrece al usuario una forma de desencadenar una acción inmediata.A button gives the user a way to trigger an immediate action. Algunos de los botones están especializados en determinadas tareas, como navegación, acciones repetidas o presentar los menús.Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

Ejemplo de botones

El marco XAML proporciona un control de botón estándar, así como varios controles de botón especializados.The Extensible Application Markup Language (XAML) framework provides a standard button control as well as several specialized button controls.

ControlControl DescripciónDescription
BotónButton Un botón que inicia una acción inmediata.A button that initiates an immediate action. Puede usarse con un evento Click o un enlace Command.Can be used with a Click event or Command binding.
RepeatButtonRepeatButton Un botón que genera un evento Click continuamente mientras se presiona.A button that raises a Click event continuously while pressed.
HyperlinkButtonHyperlinkButton Un botón al que se le aplica el estilo de un hipervínculo y se usa para navegación.A button that's styled like a hyperlink and used for navigation. Para obtener más información sobre los hipervínculos, consulta Hipervínculos.For more info about hyperlinks, see Hyperlinks.
DropDownButtonDropDownButton Logotipo de WinUI Un botón con un botón de contenido adicional para abrir un control flotante adjunto.A button with a chevron to open an attached flyout.
SplitButtonSplitButton Logotipo de WinUI Un botón con dos lados.A button with two sides. Uno de los lados inicia una acción y el otro abre un menú.One side initiates an action, and the other side opens a menu.
ToggleSplitButtonToggleSplitButton Logotipo de WinUI Un botón de alternancia con dos lados.A toggle button with two sides. Un lado alterna entre activado/desactivado y el otro abre un menú.One side toggles on/off, and the other side opens a menu.
ToggleButtonToggleButton Un botón que puede estar activado o desactivado.A button that can be on or off.

Obtención de la biblioteca de la interfaz de usuario de WindowsGet the Windows UI Library

Logotipo de WinUI Los controles DropDownButton, SplitButton y ToggleSplitButton se incluyen como parte de la biblioteca de interfaz de usuario de Windows, un paquete NuGet que contiene nuevos controles y características de interfaz de usuario destinados a aplicaciones de Windows.DropDownButton, SplitButton, and ToggleSplitButton are included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows).For more info, including installation instructions, see Windows UI Library.

API de la biblioteca de interfaz de usuario de Windows: Clase DropDownButton, clase SplitButton, clase ToggleSplitButtonWindows UI Library APIs: DropDownButton class, SplitButton class, ToggleSplitButton class

API de plataforma: Evento de clic, propiedad de comandoPlatform APIs: Click event, Command property

¿Es este el control adecuado?Is this the right control?

Usa un control Button para permitir al usuario iniciar una acción inmediata, como enviar un formulario.Use a Button control to let the user initiate an immediate action, such as submitting a form.

No uses un control Button cuando la acción sea navegar a otra página. En su lugar, usa un control HyperlinkButton.Don't use a Button control when the action is to navigate to another page; instead, use a HyperlinkButton control. Para obtener más información sobre los hipervínculos, consulta Hipervínculos.For more info about hyperlinks, see Hyperlinks.

Importante

Para la navegación por asistentes, usa los botones etiquetados Atrás y Siguiente.For wizard navigation, use buttons labeled Back and Next. Para otros tipos de navegación hacia atrás o a un nivel superior, usa un botón Atrás.For other types of backwards navigation or navigation to an upper level, use a back button.

Usa un control RepeatButton cuando el usuario pueda querer desencadenar una acción varias veces.Use a RepeatButton control when the user might want to trigger an action repeatedly. Por ejemplo, usa un control RepeatButton para aumentar o disminuir un valor en un contador.For example, use a RepeatButton control to increment or decrement a value in a counter.

Usa un control DropDownButton cuando el botón tenga un control flotante que con más opciones.Use a DropDownButton control when the button has a flyout that contains more options. El botón de contenido adicional predeterminado proporciona una indicación visual de que el botón incluye un control flotante.The default chevron provides a visual indication that the button includes a flyout.

Usa un control SplitButton cuando quieras que el usuario pueda iniciar una acción inmediata o elegir opciones adicionales por separado.Use a SplitButton control when you want the user to be able to initiate an immediate action or choose from additional options independently.

Usa un control ToggleButton si quieres que el usuario pueda cambiar inmediatamente entre dos estados mutuamente excluyentes y un botón es lo mejor para las necesidades de tu interfaz de usuario.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. A menos que la interfaz de usuario se beneficie de un botón, quizás sea una mejor opción usar AppBarToggleButton, CheckBox, RadioButton o ToggleSwitch.Unless your UI benefits from a button, it might be a better choice to use an AppBarToggleButton, CheckBox, RadioButton, or ToggleSwitch.

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación XAML Controls Gallery, haz clic aquí para abrir la aplicación y ver el botón en acción.If you have XAML Controls Gallery installed, click here to open the app and see the Button in action.

En este ejemplo se usan dos botones, Permitir y Bloquear, en un cuadro de diálogo en el que se solicita acceso a la ubicación.This example uses two buttons, Allow and Block, in a dialog that requests location access.

Ejemplo de botones que se usan en un cuadro de diálogo

Crear un botónCreate a button

Este ejemplo muestra un botón que responde a un clic.This example shows a button that responds to a click.

Crear el botón en XAML.Create the button in XAML.

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

O crear el botón en el código.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);

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

Interacción del botónButton interaction

Cuando se pulsa un control Button con un dedo o un lápiz, o se presiona el botón primario del mouse mientras el puntero está sobre él, el botón genera el evento 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. Si un botón tiene el foco del teclado, al presionar la tecla ENTRAR o la barra espaciadora, también se genera el evento Click.If a button has keyboard focus, pressing the Enter key or the Spacebar also raises the Click event.

Por lo general, no se pueden manipular los eventos PointerPressed de nivel bajo en un objeto Button porque tiene el comportamiento Click en su lugar.You generally can't handle low-level PointerPressed events on a Button object because it has the Click behavior instead. Para obtener más información, consulta Introducción a eventos y eventos enrutados.For more info, see Events and routed events overview.

Se puede cambiar la forma en que un botón genera el evento Click cambiando la propiedad ClickMode.You can change how a button raises the Click event by changing the ClickMode property. El valor predeterminado de ClickMode es Release, pero también se puede establecer el valor ClickMode de un botón en Hover o Press.The default value of ClickMode is Release, but you also can set a button's ClickMode value to Hover or Press. Si el valor de ClickMode es Hover, el evento Click no puede generarse mediante el teclado o la función táctil.If ClickMode is Hover, the Click event can't be raised by using the keyboard or touch.

Contenido de ButtonButton content

Button es un control de contenido de la clase ContentControl.Button is a content control of the ContentControl class. Su propiedad de contenido XAML es Content, que habilita una sintaxis como esta para 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>. Puedes establecer cualquier objeto como contenido del botón.You can set any object as the button's content. Si el contenido es un objeto UIElement, se representa en el botón.If the content is a UIElement object, it is rendered in the button. Si el contenido es otro tipo de objeto, su representación de cadena se muestra en el botón.If the content is another type of object, its string representation is shown in the button.

El contenido de un botón suele ser texto.A button's content is usually text. Al diseñar dicho texto, ten en cuenta las siguientes recomendaciones:When you design that text, use the following recommendations:

  • Usa un texto conciso, específico y descriptivo que explique claramente la acción que realiza el botón.Use a concise, specific, self-explanatory text that clearly describes the action that the button performs. Por lo general, el texto del botón es una única palabra, un verbo.Usually button text is a single word that is a verb.

  • Usa la fuente predeterminada, a menos que las directrices de marca indiquen lo contrario.Use the default font, unless your brand guidelines tell you to use something different.

  • Para un texto más corto, evita los botones de comando estrechos usando un ancho de botón mínimo de 120 píxeles.For shorter text, avoid narrow command buttons by using a minimum button width of 120px.

  • Para un texto más largo, evita los botones de comando anchos limitando el texto a una longitud máxima de 26 caracteres.For longer text, avoid wide command buttons by limiting text to a maximum length of 26 characters.

  • Si el texto del botón es dinámico, (es decir, localizado), ten en cuenta cómo cambiará el tamaño del botón y qué ocurrirá con los controles cercanos.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.

Tienes que arreglar:Need to fix:
Botones con texto que se desborda.Buttons with overflowing text.
Opción 1:Option 1:
Aumenta el ancho de botón, los botones de la pila y el ajuste si la longitud del texto es mayor de 26 caracteres.Increase button width, stack buttons, and wrap if text length is greater than 26 characters.
Opción 2:Option 2:
Aumenta el alto del botón y ajusta el texto.Increase button height, and wrap text.

También puedes personalizar los elementos visuales que conforman la apariencia del botón.You can also customize visuals that make up the button's appearance. Por ejemplo, podrías reemplazar el texto con un icono o usar un icono con texto.For example, you could replace the text with an icon, or use an icon in addition to text.

Aquí se ha establecido como contenido de un botón un elemento StackPanel que contiene una imagen y texto.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>

El botón tiene el siguiente aspecto:The button looks like this.

Botón con contenido de texto e imagen

Crear un botón RepetirCreate a repeat button

Un control RepeatButton es un botón que genera eventos Click repetidamente desde que se presiona hasta que se suelta.A RepeatButton control is a button that raises Click events repeatedly from the time it's pressed until it's released. Establece la propiedad Delay para especificar el tiempo que el control RepeatButton espera tras presionarlo, antes de que empiece a repetir la acción de clic.Set the Delay property to specify the time that the RepeatButton control waits after it is pressed before it starts repeating the click action. Establece la propiedad Interval para especificar el tiempo entre las repeticiones de la acción de clic.Set the Interval property to specify the time between repetitions of the click action. Los tiempos de ambas propiedades se especifican en milisegundos.Times for both properties are specified in milliseconds.

En el siguiente ejemplo se muestran dos controles RepeatButton ,cuyos respectivos eventos Click se usan para aumentar o disminuir el valor mostrado en un bloque de texto.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;
    }
}

Creación de un botón desplegableCreate a drop down button

El control DropDownButton requiere la Biblioteca de interfaz de usuario de Windows o Windows 10, versión 1809 (SDK 17763) o posterior.DropDownButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Para descargar el SDK más reciente, consulta SDK de Windows 10. Para descargar un SDK anterior, consulta Windows SDK y el archivo del emulador.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Un elemento DropDownButton es un botón que muestra un botón de contenido adicional como un indicador visual de que tiene un control flotante asociado con más opciones.A DropDownButton is a button that shows a chevron as a visual indicator that it has an attached flyout that contains more options. Tiene el mismo comportamiento que un control Button estándar con un control flotante; solo la apariencia es distinta.It has the same behavior as a standard Button control with a flyout; only the appearance is different.

El botón desplegable hereda el evento Click, pero normalmente no se usa.The drop down button inherits the Click event, but you typically don't use it. En su lugar, se usa la propiedad Flyout para adjuntar un control flotante e invocar acciones mediante las opciones de menú del control flotante.Instead, you use the Flyout property to attach a flyout and invoke actions by using menu options in the flyout. El control flotante se abre automáticamente cuando se hace clic en el botón.The flyout opens automatically when the button is clicked. No olvides especificar la propiedad Placement del control flotante para garantizar la ubicación elegida en relación con el botón.Be sure to specify the Placement property of your flyout to ensure the desired placement in relation to the button. Es posible que el algoritmo de selección de ubicación predeterminado no produzca la ubicación elegida en todas las situaciones.The default placement algorithm might not produce the intended placement in all situations.

Sugerencia

Para obtener más información sobre los controles flotantes, consulta Menús y menús contextuales.For more info about flyouts, see Menus and context menus.

Ejemplo: botón desplegableExample - Drop down button

En este ejemplo se muestra cómo crear un botón desplegable con un control flotante que tiene comandos para la alineación de párrafos en un control RichEditBox.This example shows how to create a drop down button with a flyout that contains commands for paragraph alignment in a RichEditBox control. (Para obtener más información y código, consulta Cuadro de edición enriquecido).(For more info and code, see Rich edit box).

Un botón desplegable con comandos de alineación

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

Creación de un botón de expansiónCreate a split button

Importante

El control SplitButton requiere la Biblioteca de interfaz de usuario de Windows o Windows 10, versión 1809 (SDK 17763) o posterior.SplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Para descargar el SDK más reciente, consulta SDK de Windows 10. Para descargar un SDK anterior, consulta Windows SDK y el archivo del emulador.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Un control SplitButton tiene dos partes que se pueden invocar por separado.A SplitButton control has two parts that can be invoked separately. Una parte se comporta como un botón estándar e invoca una acción inmediata.One part behaves like a standard button and invokes an immediate action. La otra parte invoca un control flotante que contiene opciones adicionales entre las que puede elegir el usuario.The other part invokes a flyout that contains additional options that the user can choose from.

Nota

Cuando se invoca con función táctil, el botón de expansión se comporta como un botón desplegable; las dos mitades del botón invocan el control flotante.When invoked with touch, the split button behaves as a drop down button; both halves of the button invoke the flyout. Con otros métodos de entrada, un usuario puede invocar cualquier mitad del botón por separado.With other methods of input, a user can invoke either half of the button separately.

El comportamiento habitual de un botón de expansión es el siguiente:The typical behavior for a split button is:

  • Cuando el usuario hace clic en la parte de botón, controla el evento Click para invocar la opción que está actualmente seleccionada en el menú desplegable.When the user clicks the button part, handle the Click event to invoke the option that's currently selected in the drop down.

  • Cuando se abra el menú desplegable, controla la invocación de los elementos del menú para cambiar la opción que está seleccionada y luego invócala.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. Es importante invocar el elemento del control flotante, ya que el evento Click de botón no se produce cuando se usa la función táctil.It's important to invoke the flyout item because the button Click event doesn't occur when using touch.

Sugerencia

Hay muchas maneras de colocar los elementos en el menú desplegable y controlar su invocación.There are many ways to put items in the drop down and handle their invocation. Si usas un control ListView o GridView, una manera es controlar el evento SelectionChanged.If you use a ListView or GridView, one way is to handle the SelectionChanged event. Si haces esto, establece SingleSelectionFollowsFocus en false.If you do this, set SingleSelectionFollowsFocus to false. Esto permite a los usuarios navegar por las opciones mediante un teclado sin invocar el elemento en cada cambio.This lets users navigate the options using a keyboard without invoking the item on each change.

Ejemplo: botón de expansiónExample - Split button

En este ejemplo se muestra cómo crear un botón de expansión que se usa para cambiar el color de primer plano del texto seleccionado en un control 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. (Para obtener más información y código, consulta Cuadro de edición enriquecido).(For more info and code, see Rich edit box). El control flotante de los botones de expansión usa BottomEdgeAlignedLeft como valor predeterminado para su propiedad Placement.Split button's flyout uses BottomEdgeAlignedLeft as the default value for its Placement property. No se puede invalidar este valor.You can't override this value.

Botón de expansión para seleccionar el color de primer plano

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

Creación de un botón de expansión de alternanciaCreate a toggle split button

Nota

El control ToggleSplitButton requiere la Biblioteca de interfaz de usuario de Windows o Windows 10, versión 1809 (SDK 17763) o posterior.ToggleSplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Para descargar el SDK más reciente, consulta SDK de Windows 10. Para descargar un SDK anterior, consulta Windows SDK y el archivo del emulador.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Un control ToggleSplitButton tiene dos partes que se pueden invocar por separado.A ToggleSplitButton control has two parts that can be invoked separately. Una parte se comporta como un botón de alternancia que se puede activar o desactivar.One part behaves like a toggle button that can be on or off. La otra parte invoca un control flotante que contiene opciones adicionales entre las que puede elegir el usuario.The other part invokes a flyout that contains additional options that the user can choose from.

Normalmente, un botón de expansión de alternancia se usa para habilitar o deshabilitar una característica cuando esta tiene varias opciones entre las que puede elegir el usuario.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. Por ejemplo, en un editor de documentos, se podría usar para activar o desactivar listas, mientras que el menú desplegable se usa para elegir el estilo de la lista.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.

Nota

Cuando se invoca con función táctil, el botón de expansión de alternancia se comporta como un botón desplegable.When invoked with touch, the toggle split button behaves as a drop down button. Con otros métodos de entrada, un usuario puede alternar e invocar las dos mitades del botón por separado.With other methods of input, a user can toggle and invoke the two halves of the button separately. Con función táctil, ambas mitades del botón invocan el control flotante.With touch, both halves of the button invoke the flyout. Por lo tanto, debes incluir una opción en el contenido del control flotante para activar o desactivar el botón.Therefore, you must include an option in your flyout content to toggle the button on or off.

Diferencias con ToggleButtonDifferences with ToggleButton

A diferencia de ToggleButton, ToggleSplitButton no tiene un estado indeterminado.Unlike ToggleButton, ToggleSplitButton does not have an indeterminate state. Como resultado, debes tener en cuenta estas diferencias:As a result, you should keep in mind these differences:

  • El control ToggleSplitButton no tiene una propiedad IsThreeState ni un evento Indeterminate.ToggleSplitButton does not have an IsThreeState property or Indeterminate event.
  • La propiedad ToggleSplitButton.IsChecked es simplemente un valor booleano, no un valor Nullable .The ToggleSplitButton.IsChecked property is just a Boolean, not a Nullable.
  • ToggleSplitButton solo tiene el evento IsCheckedChanged; no tiene eventos Checked y Unchecked independientes.ToggleSplitButton has only the IsCheckedChanged event; it does not have separate Checked and Unchecked events.

Ejemplo: botón de expansión de alternanciaExample - Toggle split button

En el ejemplo siguiente se muestra cómo un botón de expansión de alternancia se podría usar para activar o desactivar el formato de lista y cambiar el estilo de la lista, en un control 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. (Para obtener más información y código, consulta Cuadro de edición enriquecido).(For more info and code, see Rich edit box). El control flotante del botón de expansión de alternancia usa BottomEdgeAlignedLeft como valor predeterminado para su propiedad Placement.The flyout of the toggle split button uses BottomEdgeAlignedLeft as the default value for its Placement property. No se puede invalidar este valor.You can't override this value.

Un botón de expansión de alternancia para seleccionar los estilos de lista

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

RecomendacionesRecommendations

  • Asegúrate de que el objetivo y el estado del botón sean claros para el usuario.Make sure the purpose and state of a button are clear to the user.

  • Cuando hay varios botones para la misma decisión (como en un cuadro de diálogo de confirmación), presenta los botones de confirmación en este orden, donde [Hacerlo] y [No hacerlo] son respuestas específicas a la instrucción principal: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:

    • Aceptar/[Hacerlo]/SíOK/[Do it]/Yes
      • [No hacerlo]/No[Don't do it]/No
      • CancelarCancel
  • Expón solo uno o dos botones al usuario a la vez. Por ejemplo, Aceptar y Cancelar.Expose only one or two buttons to the user at a time, for example, Accept and Cancel. Si necesitas exponer más acciones al usuario, considera la posibilidad de usar casillas o botones de radio con los que el usuario pueda seleccionar acciones, con un único botón de comando para desencadenar estas acciones.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.

  • En el caso de las acciones que deban estar disponibles en varias páginas de la aplicación, en vez de duplicar el mismo botón en varias páginas, piensa en utilizar una barra de la aplicación inferior.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.

Si el diseño requiere un único botón, debe estar alineado a la izquierda o a la derecha en función de su contexto de contenedor.If your layout requires only one button, it should be either left- or right-aligned based on its container context.

  • Los cuadros de diálogo con un único botón deben alinear a la derecha el botón.Dialogs with only one button should right-align the button. Si el cuadro de diálogo contiene solo un botón, asegúrate de que el botón realiza la acción segura y no destructiva.If your dialog contains only one button, ensure that the button performs the safe, nondestructive action. Si usas la clase ContentDialog y especificas un único botón, se alineará automáticamente a la derecha.If you use ContentDialog and specify a single button, it will be automatically right-aligned.

    Un botón dentro de un cuadro de diálogo

  • Si el botón aparece dentro de una interfaz de usuario de contenedor (por ejemplo, dentro de una notificación del sistema, un control flotante o un elemento de vista de lista), debes alinear a la derecha el botón dentro del contenedor.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.

    Un botón dentro de un contenedor

  • En las páginas que contengan un solo botón (por ejemplo, un botón Aplicar en la parte inferior de una página de configuración), debes alinear a la izquierda el botón.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. Así se garantiza que el botón se alinea con el resto del contenido de la página.This ensures that the button aligns with the rest of the page content.

    Un botón de una página

Botones AtrásBack buttons

El botón Atrás es un elemento de la interfaz de usuario proporcionado por el sistema que permite la navegación hacia atrás a través de la pila de retroceso o el historial de navegación del usuario.The back button is a system-provided UI element that enables backward navigation through either the back stack or navigation history of the user. No es necesario que crees tu propio botón Atrás, pero es posible que debas realizar algunas acciones para que la experiencia de navegación hacia atrás resulte adecuada.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. Para obtener más información, consulta Historial de navegación y navegación hacia atrás para las aplicaciones de Windows.For more info, see Navigation history and backwards navigation for Windows apps.

Obtención del código de ejemploGet the sample code