Inicio rápido: agregar controles y controlar eventos
Idioma: HTML | XAML

Inicio rápido: agregar controles y administrar eventos (XAML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Creas la interfaz de usuario de tu aplicación con controles, como botones, cuadros de texto y cuadros combinados. Aquí te mostramos cómo agregar controles a tu aplicación. Normalmente usas este modelo cuando trabajas con controles:

  • Agregas un control a la interfaz de usuario de tu aplicación.
  • Estableces propiedades para el control, como el ancho, el alto o el color de primer plano.
  • Enlazas algo de código al control para que realice una acción.

Guía básica: Relación de este tema con los demás. Consulta:

Requisitos previos

Damos por hecho que sabes crear una aplicación básica con Microsoft Visual Basic, C# o C++ y lenguaje de marcado de aplicaciones extensible (XAML). Para obtener instrucciones sobre cómo crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con C# o Visual Basic o Crear la primera aplicación de la Tienda Windows con C++.

Agregar un control

Puedes agregar un control a una aplicación de varias formas:

  • Usa una herramienta de diseño, como Blend para Visual Studio o el diseñador XAML de Microsoft Visual Studio.
  • Agrega el control al marcado XAML en el editor XAML de Visual Studio.
  • Agrega el control en el código. 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.

La documentación de cada control incluye un tema de procedimientos que describe cómo agregar el control en XAML, en código o mediante una herramienta de diseño. Por ejemplo, para agregar un control Button, consulta el tema sobre cómo agregar un botón.

Aquí usamos Visual Studio como herramienta de diseño, pero puedes llevar a cabo las mismas tareas, e incluso más, en Blend. Para obtener más información, consulta Crear una interfaz de usuario con el diseñador XAML.

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.

El Cuadro de herramientas de Visual Studio muestra muchos de los controles que puedes usar en tu aplicación. Para agregar un control a tu aplicación, haz doble clic en él en el Cuadro de herramientas. Por ejemplo, cuando haces doble clic en el control TextBox, se agrega este XAML a la vista XAML.


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

También puedes arrastrar el control desde el Cuadro de herramientas hasta el diseñador XAML.

Establecer el nombre de un 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. Puedes definir el nombre en la ventana Propiedades de Visual Studio o en XAML. Esta es la forma de cambiar el nombre del control seleccionado actualmente usando el cuadro de texto Nombre de la parte superior de la ventana Propiedades.

Hh465336.wedge(es-es,WIN.10).gifPara definir el nombre de un control

  1. Selecciona el elemento que quieras denominar.
  2. En el panel Propiedades, escribe un nombre en el cuadro de texto Nombre.
  3. Presiona Entrar para confirmar el nombre.
Establecer el nombre en el diseñador

Esta es la forma de cambiar el nombre de un control en el editor XAML cambiando el atributo x:Name.


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

Establecer las propiedades el control

Usas las propiedades para especificar la apariencia, el contenido y otros atributos de los controles. 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. Puedes cambiar algunas propiedades, como Width, Height o Margin, si seleccionas y manipulas el control en la ventana Diseño. Esta ilustración muestra algunas de las herramientas de cambio de tamaño disponibles en la vista Diseño.

TextBox en el diseñador

Te resultará conveniente permitir que el tamaño y la posición del control se establezcan de manera automática. En este caso, puedes restablecer las propiedades de tamaño y posición que Visual Studio estableció automáticamente.

Hh465336.wedge(es-es,WIN.10).gifPara restablecer una propiedad

  1. En el panel Propiedades, haz clic en el marcador de propiedades junto al valor de propiedad. Se abre el menú de propiedad.
  2. En el menú de propiedad, haz clic en Restablecer.

    Menú de propiedad

Puedes establecer las propiedades del control en la ventana Propiedades, en XAML o en el código. Por ejemplo, para cambiar el color de primer plano para un Button, estableces la propiedad Foreground del control. Esta ilustración muestra cómo establecer la propiedad Foreground mediante el Selector de colores en la ventana Propiedades.

Establecer el primer plano en el diseñador

Así se establece la propiedad Foreground en el editor XAML. Observa la ventana IntelliSense de Visual Studio que se abre para ayudarte con la sintaxis.

Establecer el primer plano en XAML

Establecer el primer plano en XAML

Este es el XAML resultante después de establecer la propiedad Foreground.


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

Así se establece la propiedad Foreground en el código.


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

Crear un controlador de eventos

Cada control tiene eventos que te permiten responder a acciones del usuario u otros cambios en la aplicación. Por ejemplo, un control Button contiene un evento Click que se genera cuando un usuario hace clic en el Button. Creas un método, llamado controlador de eventos, para controlar el evento. 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. Para más información acerca de los eventos, consulta el tema de introducción a los eventos y eventos enrutados.

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. En la ventana Propiedades, aparecen todos los eventos disponibles para ese control. Estos son algunos de los eventos para un Button.

Eventos TextBox

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. Para crear un controlador de eventos con un nombre personalizado, escribe el nombre que prefieras en el cuadro de texto y presiona Entrar. Se crea el controlador de eventos y se abre el archivo de código subyacente en el editor de código. El método del controlador de eventos tiene dos parámetros. El primero es sender, que es una referencia al objeto donde se adjunta el controlador. El parámetro sender es un tipo Object. Por lo general, conviertes sender en un tipo más preciso si esperas comprobar o cambiar el estado en el propio objeto sender. En función del diseño de tu aplicación, esperas que el tipo al que se convierte sender sea seguro, según la ubicación donde se adjuntó el controlador. El segundo valor son los datos del evento, que generalmente aparecen en las firmas como el parámetro e.

Este es el código que controla el evento Click de un Button llamado Button1. Al hacer clic en el botón, la propiedad Foreground del Button en el que hiciste clic se establece en blue.


private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

También puedes asociar un controlador de eventos en XAML. En el editor XAML, escribe el nombre del evento que quieras controlar. Visual Studio muestra una ventana IntelliSense cuando empiezas a escribir. Después de especificar el evento, puedes hacer doble clic en <Nuevo controlador de eventos> 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. Esta es la ventana IntelliSense que aparece para ayudarte a crear un nuevo controlador de eventos.

Crear el controlador de eventos TextChanged

Este ejemplo muestra cómo asociar un evento Click con un controlador de eventos llamado Button_Click en 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. Así es cómo se asocia un controlador de eventos en el código.


Button1.Click += new RoutedEventHandler(Button_Click);

Nuevos controles

Si usas otras plataformas de XAML, te podrían interesar estos controles nuevos de Windows 8.

Puedes obtener más información sobre estos controles y otros en la Lista de controles.

A continuación

Ya conoces los aspectos básicos de agregar un control a tu aplicación, establecer las propiedades del control y crear controladores de eventos. A continuación, aprenderás más sobre qué controles hay disponibles: Lista de controles o Controles según su función. También puedes ver muchos de los controles de interfaz de usuario de Windows si descargas la Muestra de controles básicos.

Temas relacionados

Introducción a eventos y eventos enrutados
Lista de controles
Crear una interfaz de usuario con el diseñador XAML
Guía básica para crear aplicaciones con C#, C++ o VB

 

 

Mostrar:
© 2017 Microsoft