Passo a passo: Criando uma associação de dados usando o WPF Designer

Artigo
08/01/2011

Esta explicação passo a passo mostra como usar o WPF Designer for Visual Studio para criar ligações de dados que os dados conectar a um controle.

In this walkthrough, you perform the following tasks:

Create the project.
Criar um Student classe e um StudentList coleção.
Criar um ListBox controle que exibe o StudentListacoleção por meio de uma vinculação de dados.
Criar uma personalizada DataTemplate que usa um IValueConverter para personalizar a aparência de umapropriedadede booliano.

Quando tiver terminado, você terá uma caixa de listagem que é limite a uma lista dos alunos. Para cada caixa de listagem item, é exibido um quadrado colorido que indica se o aluno está atualmente inscrito.

Observação
Vincular aos dados a partir de uma conexão de dados, use a janelade fontes de dados. For more information, see Controles do WPF de ligação a dados em Visual Studio.

Observação
Caixas de diálogo e comandos de menu que você vê podem diferir das descritas na Help dependendo das suas configurações ativas ou edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. For more information, see Trabalhando com configurações.

Pré-requisitos

You need the following components to complete this walkthrough:

Visual Studio 2010.

Creating the Project

A primeira etapa é criar o projeto do aplicativo WPF e adicionar a fonte de dados. A fonte de dados é um ObservableCollection<T> que contém as instâncias de um simples Studentclasse. O projeto também tem um IValueConverter e um personalizado DataTemplate ao estilo de ListBox de controle.

To create the project

Criar um aplicativo WPF novo projeto no Visual Basic ou no Visual C# chamado DataBindingDemo. For more information, see Como: Criar um novo projeto de aplicativo WPF.

MainWindow. XAML é aberto no WPF Designer.
Adicionar uma nova classe chamada Student para o projeto. For more information, see Como: Adicionar novos itens de projeto.

Replace the automatically generated code with the following code.

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

' Student is a simple class that stores a name and an 
' IsEnrolled value. 
Public Class Student

    ' The default constructor is required for creation from XAML. 
    Public Sub New()
    End Sub

    ' The StudentName property is a string that holds the first and last name. 
    Public Property StudentName As String

    ' The IsEnrolled property gets or sets a value indicating whether 
    ' the student is currently enrolled. 
    Public Property IsEnrolled As Boolean

End Class

' The StudentList collection is declared for convenience, 
' because declaring generic types in XAML is inconvenient. 
Public Class StudentList
    Inherits ObservableCollection(Of Student)
End Class

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataBindingDemo
{
    // Student is a simple class that stores a name and an
    // IsEnrolled value.
    public class Student 
    {   
        // The default constructor is required for creation from XAML.
        public Student()
        {
        }

        // The StudentName property is a string that holds the first and last name.
        public string StudentName { get; set; }

        // The IsEnrolled property gets or sets a value indicating whether
        // the student is currently enrolled.
        public bool IsEnrolled { get; set; }
    }

    // The StudentList collection is declared for convenience,
    // because declaring generic types in XAML is inconvenient.
    public class StudentList : ObservableCollection<Student>
    {

    }
}

Adicionar uma nova classe chamada BoolToBrushConverter para o projeto.

Replace the automatically generated code with the following code.

Imports System
Imports System.Globalization
Imports System.Windows.Data
Imports System.Windows.Media

' The BoolToBrushConverter class is a value converter 
' that helps to bind a bool value to a brush property. 
<ValueConversion(GetType(Boolean), GetType(Brush))> _
Public Class BoolToBrushConverter
    Implements IValueConverter

    Public Function Convert( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert

        Dim b As Brush = Nothing

        ' Only apply the conversion if value is assigned and 
        ' is of type bool. 
        If value IsNot Nothing AndAlso value.[GetType]() Is GetType(Boolean) Then
            ' true is painted with a green brush, 
            ' false with a red brush. 
            b = If(CBool(value), Brushes.Green, Brushes.Red)
        End If

        Return b
    End Function

    ' Not used. 
    Public Function ConvertBack( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
        Return Nothing
    End Function

End Class

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;

namespace DataBindingDemo
{
    // The BoolToBrushConverter class is a value converter
    // that helps to bind a bool value to a brush property.
    [ValueConversion(typeof(bool), typeof(Brush))]
    public class BoolToBrushConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            Brush b = null;

            // Only apply the conversion if value is assigned and
            // is of type bool.
            if (value != null &&
                value.GetType() == typeof(bool))
            {
                // true is painted with a green brush, 
                // false with a red brush.
                b = (bool)value ? Brushes.Green : Brushes.Red;
            }

            return b;
        }

        // Not used.
        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            return null;
        }
    }
}

Build the project.
Abrir MainWindow. XAML na WPF Designer.

Replace the automatically generated XAML with the following XAML.

    <Window x:Class="DataBindingDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingDemo"
        Title="Databinding Demo" Height="300" Width="300">
    <Window.Resources>

        <local:StudentList x:Key="studentCollection" >
            <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
            <local:Student StudentName="Lori Kane" IsEnrolled="true" />
            <local:Student StudentName="Steve Masters" IsEnrolled="false" />
            <local:Student StudentName="Tai Yee" IsEnrolled="true" />
            <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        </local:StudentList>

        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />

        <DataTemplate x:Key="listBoxTemplate">
            <StackPanel Orientation="Horizontal" >
                <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                           Height="10" 
                           Width="10" 
                           Margin="0,0,5,0" />
                <TextBlock Text="{Binding Path=StudentName}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid></Grid>

</Window>

Atribuindo uma vinculação de dados

Você pode usar um Binding para exibir o studentCollection no ListBox de controle. O WPF Designer permite a vinculação de dados sem escrever qualquer código ou XAML.

Para ligar o ListBox a fonte de dados

From the Toolbox, drag a ListBox control onto the Window.
No janela Propriedades, role até o ItemsSource propriedade.
Na borda da coluna esquerda, clique na o marcador depropriedade ().

Aparecerá um menu .

Dica

Você também pode direita-clique na linha para exibir o menu.
Clique em Aplicar a vinculação de dados.

O construtor de vinculação de dados aparece.
Sobre o fonte painel, no painel esquerdo, clique em StaticResource.
No painel central, clique em Recursos.
No painel direito, clique em studentCollection.

O ListBox controle é preenchido com itens.
No janela Propriedades, role até o DisplayMemberPath propriedade e defina seu valor como StudentName.

O ListBox controle exibe o StudentNamedepropriedade para cada Student instância em studentCollection.

A criação de uma ligação de dados com um conversor de Valor

criar um DataTemplate para formatar os dados na ListBox de controle. Neste projeto, o DataTemplate usa um valor conversor para exibir umapropriedade boolianocomo um quadrado colorido.

Para criar uma vinculação de dados com um valor de conversor

No janela Propriedades, limpar o DisplayMemberPath propriedade.
Rolar para a ItemTemplatedepropriedade.
Clique o o marcador depropriedade ().
Clique em Aplicar o recurso.

O selecionador de recurso é exibida.
No Local seção, clique em listBoxTemplate.

O ListBox controle exibe um quadrado vermelho ou verde, próximo ao nome de cada aluno que indica se o aluno está inscrito.

Próximas etapas

Você pode definir propriedades nas ligações de dados, usando o construtor de vinculação de dados . For more information, see Como: Definir as propriedades de associação de dados usando o WPF Designer.

Consulte também

Compartilhar via