Tutorial: Enlace a datos en el Diseñador XAMLWalkthrough: Bind to data in XAML Designer

En el Diseñador de XAML, puede establecer las propiedades de enlace de datos mediante el uso de la mesa de trabajo y la ventana Propiedades.In XAML Designer, you can set data binding properties by using the artboard and the Properties window. En el ejemplo de este tutorial se muestra cómo enlazar datos a un control.The example in this walkthrough shows how to bind data to a control. En concreto, el tutorial muestra cómo crear una clase simple de carro de la compra que tenga una propiedad DependencyProperty denominada ItemCount y luego enlazar la propiedad ItemCount a la propiedad Text de un control TextBlock.Specifically, the walkthrough shows how to create a simple shopping cart class that has a DependencyProperty named ItemCount, and then bind the ItemCount property to the Text property of a TextBlock control.

Crear una clase que se va a usar como origen de datosTo create a class to use as a data source

  1. En el menú Archivo, seleccione Nuevo > Proyecto.On the File menu, choose New > Project.

  2. En el cuadro de diálogo Nuevo proyecto, elija el nodo de Visual C# o Visual Basic, expanda el nodo Escritorio de Windows y después elija la plantilla Aplicación WPF.In the New Project dialog box, choose either the Visual C# or Visual Basic node, expand the Windows Desktop node, and then choose the WPF Application template.

  3. Asigne un nombre al proyecto BindingTest y después elija el botón Aceptar.Name the project BindingTest, and then choose the OK button.

  4. Abra el archivo MainWindow.xaml.cs (o MainWindow.xaml.vb) y agregue el código siguiente.Open the MainWindow.xaml.cs (or MainWindow.xaml.vb) file and add the following code. En C#, agregue el código en el espacio de nombres BindingTest (antes del paréntesis de cierre final del archivo).In C#, add the code in the BindingTest namespace (before the final closing parenthesis in the file). En Visual Basic, agregue simplemente la nueva clase.In Visual Basic, just add the new class.

    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 predeterminado de elementos mediante el objeto PropertyMetadata.This code sets a value of 0 as the default item count by using the PropertyMetadata object.

  5. En el menú Archivo, elija Compilar > Compilar solución.On the File menu, choose Build > Build Solution.

Enlazar la propiedad ItemCount a un control TextBlockTo bind the ItemCount property to a TextBlock control

  1. En el Explorador de soluciones, abra el menú contextual de MainWindow.xaml y elija Diseñador de vistas.In Solution Explorer, open the shortcut menu for MainWindow.xaml and choose View Designer.

  2. En el cuadro de herramientas, elija un control Grid y agréguelo al formulario.In the Toolbox, choose a Grid control and add it to the form.

  3. Con el control Grid seleccionado, en la ventana Propiedades, elija el botón Nuevo situado junto a la propiedad DataContext.With the Grid selected, in the Properties window, choose the New button next to the DataContext property.

  4. En el cuadro de diálogo Seleccionar objeto, asegúrese de que la casilla Mostrar todos los ensamblados está desactivada, elija ShoppingCart en el espacio de nombres BindingTest y después elija el botón Aceptar.In the Select Object dialog box, make sure that Show all assemblies checkbox is cleared, choose ShoppingCart under the BindingTest namespace, and then choose the OK button.

    En la siguiente ilustración, se muestra el cuadro de diálogo Seleccionar objeto con ShoppingCart seleccionado.The following illustration shows the Select Object dialog box with ShoppingCart selected.

    Cuadro de diálogo Seleccionar objeto

  5. En el cuadro de herramientas, elija un control TextBlock para agregar al formulario.In the Toolbox, choose a TextBlock control to add it to the form.

  6. Con el control TextBlock seleccionado, en la ventana Propiedades, elija el marcador de propiedad situado a la derecha de la propiedad Text y después elija Crear enlace de datos.With the TextBlock control selected, in the Properties window, choose the property marker to the right of the Text property, and then choose Create Data Binding. (el marcador de propiedad parece un pequeño cuadro).(The property marker looks like a small box.)

  7. En el cuadro de diálogo Crear enlace de datos, en el cuadro Ruta de acceso, seleccione la propiedad ItemCount: (int32) y después elija el botón Aceptar.In the Create Data Binding dialog box, in the Path box, choose the ItemCount : (int32) property and then choose the OK button.

    En la siguiente ilustración, se muestra el cuadro de diálogo Crear enlace de datos con la propiedad ItemCount seleccionada.The following illustration shows the Create Data Binding dialog box with the ItemCount property selected.

    Cuadro de diálogo Crear enlace de datos

  8. Presione F5 para ejecutar la aplicación.Press F5 to run the app.

    El control TextBlock debe mostrar el valor predeterminado 0 como texto.The TextBlock control should show the default value of 0 as text.

Vea tambiénSee also