Introducción a los controles y patronesIntro to controls and patterns

En el desarrollo de aplicaciones de Windows, un control es un elemento de la interfaz de usuario que muestra contenido o permite la interacción.In Windows app development, a control is a UI element that displays content or enables interaction. Crea la interfaz de usuario de la aplicación con controles, como botones, cuadros de texto y cuadros combinados para mostrar los datos y las entradas de texto del usuario.You create the UI for your app by using controls such as buttons, text boxes, and combo boxes to display data and get user input.

API importantes: espacio de nombres Windows.UI.Xaml.ControlsImportant APIs: Windows.UI.Xaml.Controls namespace

Un patrón es una receta para modificar un control o combinar varios controles con el fin de hacer algo nuevo.A pattern is a recipe for modifying a control or combining several controls to make something new. Por ejemplo, el patrón de maestro y detalles es una manera de usar un control SplitView para la navegación de la aplicación.For example, the master/details pattern is a way that you can use a SplitView control for app navigation. Del mismo modo, puedes personalizar la plantilla de un control de NavigationView para implementar el patrón de la pestaña.Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

En muchos casos, puedes usar el control tal cual.In many cases, you can use a control as-is. Sin embargo, los controles de XAML separan la función de la estructura y la apariencia, por lo que puedes realizar varios niveles de modificaciones que se adapten a tus necesidades.But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. En la sección Estilo, aprenderás cómo usar Estilos XAML y plantillas de control para modificar un control.In the Style section, you can learn how to use XAML styles and control templates to modify a control.

En esta sección, se proporcionan instrucciones para cada uno de los controles XAML que puedes usar para crear la interfaz de usuario de la aplicación.In this section, we provide guidance for each of the XAML controls you can use to build your app UI. Para empezar, en este artículo se muestra cómo agregar controles a tu aplicación.To start, this article shows you how to add controls to your app. Hay 3 pasos clave para usar controles en la aplicación:There are 3 key steps to using controls to your app:

  • Agrega un control a la interfaz de usuario de la aplicación.Add a control to your app UI.
  • Establece las propiedades para el control, como el ancho, el alto o el color de primer plano.Set properties on the control, such as width, height, or foreground color.
  • Agrega código a los controladores de eventos del control para que realice una acción.Add code to the control's event handlers so that it does something.

Agregar controlesAdd a control

Puedes agregar un control a una aplicación de varias formas:You can add a control to an app in several ways:

  • Usa una herramienta de diseño como Blend para Visual Studio o el diseñador de lenguaje XAML de Microsoft Visual Studio.Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • Agrega el control al marcado XAML en el editor XAML de Visual Studio.Add the control to the XAML markup in the Visual Studio XAML editor.
  • Agrega el control en el código.Add the control in code. Los controles que agregas en el código aparecen visibles cuando se ejecuta la aplicación, pero no lo están en el diseñador XAML de Visual Studio.Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

En Visual Studio, cuando agregas y manipulas controles en tu aplicación, puedes usar muchas de las características del programa, como el cuadro de herramientas, el diseñador XAML, el editor XAML y la ventana Propiedades.In Visual Studio, when you add and manipulate controls in your app, you can use many of the program's features, including the Toolbox, XAML designer, XAML editor, and the Properties window.

El Cuadro de herramientas de Visual Studio muestra muchos de los controles que puedes usar en tu aplicación.The Visual Studio Toolbox displays many of the controls that you can use in your app. Para agregar un control a tu aplicación, haz doble clic en él en el Cuadro de herramientas.To add a control to your app, double-click it in the Toolbox. Por ejemplo, cuando haces doble clic en el control TextBox, se agrega este XAML a la vista XAML.For example, when you double-click the TextBox control, this XAML is added to the XAML view.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

También puedes arrastrar el control desde el Cuadro de herramientas hasta el diseñador XAML.You can also drag the control from the Toolbox to the XAML designer.

Establecer el nombre de un controlSet the name of a control

Para trabajar con un control en el código, hay que establecer su atributo x:Name y hacer referencia a este por su nombre en el código.To work with a control in code, you set its x:Name attribute and reference it by name in your code. Puedes definir el nombre en la ventana Propiedades de Visual Studio o en XAML.You can set the name in the Visual Studio Properties window or in XAML. Esta es la forma de establecer el nombre del control seleccionado actualmente usando el cuadro de texto Nombre de la parte superior de la ventana Propiedades.Here's how to set the name of the currently selected control by using the Name text box at the top of the Properties window.

Para definir el nombre de un controlTo name a control

  1. Selecciona el elemento que quieras denominar.Select the element to name.
  2. En el panel Propiedades, escribe un nombre en el cuadro de texto Nombre.In the Properties panel, type a name into the Name text box.
  3. Presiona Entrar para confirmar el nombre.Press Enter to commit the name.

Propiedad Name en el diseñador de Visual Studio

Esta es la forma de establecer el nombre de un control en el editor XAML agregando el atributo x:Name.Here's how to set the name of a control in the XAML editor by adding the x:Name attribute.

<Button x:Name="Button1" Content="Button"/>

Establecer las propiedades el controlSet the control properties

Usas las propiedades para especificar la apariencia, el contenido y otros atributos de los controles.You use properties to specify the appearance, content, and other attributes of controls. Cuando agregas un control con una herramienta de diseño, es posible que Visual Studio establezca automáticamente algunas propiedades que controlan el tamaño, la posición y el contenido.When you add a control using a design tool, some properties that control size, position, and content might be set for you by Visual Studio. Puedes cambiar algunas propiedades, como Width, Height o Margin, si seleccionas y manipulas el control en la ventana Diseño.You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. Esta ilustración muestra algunas de las herramientas de cambio de tamaño disponibles en la vista Diseño.This illustration shows some of the resizing tools available in Design view.

Herramientas de cambio de tamaño en el diseñador de Visual Studio

Te resultará conveniente permitir que el tamaño y la posición del control se establezcan de manera automática.You might want to let the control be sized and positioned automatically. En este caso, puedes restablecer las propiedades de tamaño y posición que Visual Studio estableció automáticamente.In this case, you can reset the size and position properties that Visual Studio set for you.

Para restablecer una propiedadTo reset a property

  1. En el panel Propiedades, haz clic en el marcador de propiedades junto al valor de propiedad.In the Properties panel, click the property marker next to the property value. Se abre el menú de propiedades.The property menu opens.
  2. En el menú de propiedad, haz clic en Restablecer.In the property menu, click Reset.

La propiedad Visual Studio restablece la opción de menú

Puedes establecer las propiedades del control en la ventana Propiedades, en XAML o en el código.You can set control properties in the Properties window, in XAML, or in code. Por ejemplo, para cambiar el color de primer plano para un Button, estableces la propiedad Foreground del control.For example, to change the foreground color for a Button, you set the control's Foreground property. Esta ilustración muestra cómo establecer la propiedad Foreground mediante el Selector de colores en la ventana Propiedades.This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Selector de colores en el diseñador de Visual Studio

Así se establece la propiedad Foreground en el editor XAML.Here's how to set the Foreground property in the XAML editor. Observa la ventana IntelliSense de Visual Studio que se abre para ayudarte con la sintaxis.Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

IntelliSense en la parte 1 de XAML

IntelliSense en la parte 2 de XAML

Este es el código XAML resultante después de establecer la propiedad Foreground.Here's the resulting XAML after you set the Foreground property.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Así se establece la propiedad Foreground en el código.Here's how to set the Foreground property in code.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);
Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Crear un controlador de eventosCreate an event handler

Cada control tiene eventos que te permiten responder a acciones del usuario u otros cambios en la aplicación.Each control has events that enable you to respond to actions from your user or other changes in your app. Por ejemplo, un control Button contiene un evento Click que se genera cuando un usuario hace clic en Button.For example, a Button control has a Click event that is raised when a user clicks the Button. Creas un método, llamado controlador de eventos, para controlar el evento.You create a method, called an event handler, to handle the event. Puedes asociar el evento de un control con un método del controlador de eventos en la ventana Propiedades, en XAML o en el código.You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. Para más información acerca de los eventos, consulta el tema de Introducción a los eventos y eventos enrutados.For more info about events, see Events and routed events overview.

Para crear un controlador de eventos, selecciona el control y después haz clic en la pestaña Eventos en la parte superior de la ventana Propiedades.To create an event handler, select the control and then click the Events tab at the top of the Properties window. En la ventana Propiedades, aparecen todos los eventos disponibles para ese control.The Properties window lists all of the events available for that control. Estos son algunos de los eventos para un Button.Here are some of the events for a Button.

Lista de eventos de Visual Studio

Para crear un controlador de eventos con el nombre predeterminado, haz doble clic en el cuadro de texto junto al nombre del evento en la ventana Propiedades.To create an event handler with the default name, double-click the text box next to the event name in the Properties window. Para crear un controlador de eventos con un nombre personalizado, escribe el nombre que prefieras en el cuadro de texto y presiona Entrar.To create an event handler with a custom name, type the name of your choice into the text box and press enter. Se crea el controlador de eventos y se abre el archivo de código subyacente en el editor de código.The event handler is created and the code-behind file is opened in the code editor. El método del controlador de eventos tiene dos parámetros.The event handler method has 2 parameters. El primero es sender, que es una referencia al objeto donde se adjunta el controlador.The first is sender, which is a reference to the object where the handler is attached. El parámetro sender es un tipo Object.The sender parameter is an Object type. Por lo general, transmites el objeto sender a un tipo más preciso si esperas comprobar o cambiar el estado en el propio objeto sender.You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. En función del diseño de tu aplicación, esperas que el tipo al que se transmita el contenido sender sea seguro, según la ubicación en la que se adjuntó el controlador.Based on your own app design, you expect a type that is safe to cast the sender to, based on where the handler is attached. El segundo valor son los datos del evento, que generalmente aparecen en las firmas como el parámetro e o args.The second value is event data, which generally appears in signatures as the e or args parameter.

Este es el código que controla el evento Click de un Button llamado Button1.Here's code that handles the Click event of a Button named Button1. Al hacer clic en el botón, la propiedad Foreground del Button en el que hiciste clic se establece en blue.When you click the button, the Foreground property of the Button you clicked is set to blue.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}
#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

También puedes asociar un controlador de eventos en XAML.You can also associate an event handler in XAML. En el editor XAML, escribe el nombre del evento que quieras controlar.In the XAML editor, type in the event name that you want to handle. Visual Studio muestra una ventana IntelliSense cuando empiezas a escribir.Visual Studio shows an IntelliSense window when you begin typing. Después de especificar el evento, puedes hacer doble clic en <New Event Handler> en la ventana IntelliSense para crear un nuevo controlador de eventos con el nombre predeterminado, o bien puedes seleccionar un controlador de eventos existente de la lista.After you specify the event, you can double-click <New Event Handler> in the IntelliSense window to create a new event handler with the default name, or select an existing event handler from the list.

Esta es la ventana IntelliSense que aparece.Here's the IntelliSense window that appears. Ayuda a crear un nuevo controlador de eventos o a seleccionar un controlador de eventos existente.It helps you create a new event handler or select an existing event handler.

IntelliSense para el evento Click

Este ejemplo muestra cómo asociar un evento Click con un controlador de eventos llamado Button_Click en XAML.This example shows how to associate a Click event with an event handler named Button_Click in XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

También puedes asociar un evento con su controlador de eventos en el código subyacente.You can also associate an event with its event handler in the code-behind. Así es como se asocia un controlador de eventos en el código.Here's how to associate an event handler in code.

Button1.Click += new RoutedEventHandler(Button_Click);
Button1().Click({ this, &MainPage::Button1_Click });