Cómo: Enlazar datos en el diseñador de XAML

En el diseñador XAML, puedes establecer las propiedades de enlace de datos con la mesa de trabajo y la ventana Propiedades. El ejemplo de este tema muestra cómo enlazar datos a un control. Específicamente, el procedimiento muestra cómo crear una clase simple del carro de la compra que tenga una DependencyProperty denominada ItemCount y, después, enlazar la propiedad ItemCount a la propiedad Text de un control TextBlock.

Para crear una clase con el fin de usarla como origen de datos

1. Crea un proyecto de C# o Visual Basic en la plantilla Aplicación vacía.

2. Abre MainPage.xaml.cs (or MainPage.xaml.vb) y agrega el código siguiente. En C#, agrega el código en el espacio de nombres projectName (antes del paréntesis de cierre final del archivo). En Visual Basic, simplemente agrega la nueva clase.

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
           "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

   Este código establece un valor de 0 como el número de elementos predeterminado que se obtiene al usar el objeto PropertyMetadata.

   Sugerencia

   En Visual Studio, puedes agregar código auxiliar para una propiedad de dependencia; para ello, hay que escribir propdp dentro de la clase ShoppingCart y presionar la tecla TAB.

3. Haz clic en Compilar > Compilar solución.

Para enlazar la propiedad ItemCount a un control TextBlock

1. Haz clic con el botón secundario en MainPage.xaml y, a continuación, en Diseñador de vistas.

2. En la ventana Esquema del documento, selecciona el panel de cuadrícula de la raíz, que aparece como [Cuadrícula] en la ventana.

3. Con Grid seleccionada, haz clic en el botón Nuevo junto a la propiedad DataContext en la ventana Propiedades.

4. En el cuadro de diálogo Seleccionar objeto, asegúrate de que Mostrar todos los ensamblados está desactivada y, a continuación, selecciona ShoppingCart en el espacio de nombres projectName y haz clic en Aceptar.

   La ilustración siguiente muestra el cuadro de diálogo Seleccionar objeto con ShoppingCart seleccionado.

   

5. En el Cuadro de herramientas, haz doble clic en el control TextBlock para agregarlo a la mesa de trabajo.

6. Con el control TextBlock seleccionado, haz clic en el marcador de propiedad a la derecha de la propiedad Text en Propiedades comunes de la ventana Propiedades. (El marcador de propiedad tiene el aspecto de un cuadro pequeño).

7. Haz clic en Crear enlace de datos en el menú resultante.

8. Con un tipo de enlace de Contexto de datos, que es el valor predeterminado en la lista Tipo de enlace, selecciona la propiedad ItemCount en el cuadro Ruta de acceso y haz clic en Aceptar.

   La siguiente ilustración muestra el cuadro de diálogo Crear enlace de datos con la propiedad ItemCount seleccionada.

   

9. Presiona F5 para iniciar la aplicación.

   El control TextBlock debe mostrar el valor predeterminado de 0 como texto.

Vea también

Referencia

Agregar convertidor de valores (Cuadro de diálogo)

Conceptos

Tutorial: Crear una UI usando el Diseñador XAML