Passo a passo: Usando dados de exemplo no WPF Designer

  • Artigo

Esta explicação passo a passo mostra como usar os dados de exemplo de WPF Designer for Visual Studio para criar ligações de dados em tempo de design. Com os dados de exemplo exibidos em tempo de design-, você pode garantir que o layout se comportará corretamente em tempo de execução. Para disponibilizar os dados de exemplo para controles no designer, você aplicar o DesignData criar a ação para o arquivo de dados de exemplo e fazer referência ao arquivo na DesignData de tempo de- atributode design.

In this walkthrough, you perform the following tasks:

  • Create the project.

  • Criar um Customerde negócios daclasse objeto.

  • Crie arquivos XAML que mantêm os dados de exemplo.

  • Vincular TextBox e DataGrid e controles para os dados de exemplo.

Quando tiver terminado, você terá que TextBox e DataGrid controles que são limite em tempo de design-para dados de exemplo. A vinculação de dados é definido na WPF Designer.

ObservaçãoObservaçã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 um aplicativo do WPF projeto e habilitar as propriedades de tempo de design-.

To create the project

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

    MainWindow. XAML é aberto no WPF Designer.

  2. No modo de exibição de Design, clique na marca de tamanho de raiz (marca de tamanho de raiz) no canto inferior-à direita do MainWindow para definir o tamanho de raiz automaticamente o tamanho.

    No modo de exibição XAML , o designer adiciona o ddenamespacemapeamento, que permite que o tempo de design-acessar propriedades como DesignInstance e DataContext.

Criando o objeto de negócios

Em seguida, criar o objetode negócios. O objeto de negócios é uma simples Customeraclasse que tem FirstName, LastName, e CustomerID e propriedades.

Para criar o objetode negócios

  1. Adicionar uma nova classe chamada Customer para o projeto.

  2. Replace the automatically generated code with the following code.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

Criando os arquivos de dados de tempo de Design-

Defina dados de tempo de design-exemplo, criando instâncias de seus objetos comerciais em um arquivo XAML . Você especificar que o arquivo XAML tem dados de exemplo configuração a Build Action para DesignData.

O designer substitui as instâncias que você declara no arquivo XAML com tipos de tempo de design gerado automaticamente-que têm as mesmas propriedades de seus tipos de amostra. Isso elimina a execução de-tempo comportamentos, como consultas de banco de dados , que podem interferir com o designer. Essas propriedades são somente leiturae defini-las no arquivo de dadosde amostra.

Use o DesignDataWithDesignTimeCreatableTypes criar ação para substituir esse comportamento e indicar que o designer irá criar instâncias de tipos de dados de amostra.

Para criar o design de-os arquivos de dados de tempo

  1. No Solution Explorer, adicione uma nova pasta chamada DesignData para o projeto.

  2. Na pasta DesignData, adicione um novo arquivo de texto chamado SampleCustomer.xaml.

    SampleCustomer.xaml é aberto no modo de exibição XAML .

    ObservaçãoObservação

    Você também pode usar um dicionário de recurso .

  3. Adicionar o seguinte XAML.

    <local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

  4. Na pasta DesignData, adicione um novo arquivo de texto chamado SampleCustomers.xaml.

    SampleCustomers.xaml é aberto no modo de exibição XAML .

  5. Adicionar o seguinte XAML.

        <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

  6. No Solution Explorer, selecione ambos os arquivos de dados de exemplo.

  7. No janela Propriedades, defina a Build Action para DesignData, certifique-se de que Copiar to Output Directory é definida como não copiee desmarque o ferramentaPersonalizarcampo.

    ObservaçãoObservação

    Para a ação de compilação, você também pode selecionar DesignDataWithDesignTimeCreatableTypes.

Definindo o contexto de dados de tempo de Design-

Para criar um design-tempo dados contexto que fornece dados de amostra, use o d:DataContext design-tempo atributo com o d:DesignDataaextensãodemarcação.

Para definir o de dados de tempo de design- contexto

  1. Abrir MainWindow. XAML na WPF Designer.

  2. No modo XAML , adicione o namespaceseguintemapeamento para o Window Iniciar marca. For more information, see Como: Importar um namespace em XAML.

    xmlns:local="clr-namespace:DesignDataDemo"

  3. Build the solution.

  4. No modo de exibição de Design, adicione uma linha de grade horizontal perto do centro do Grid o controle para definir duas linhas. For more information, see Como: adicionar linhas e colunas para uma grade.

  5. No Toolbox, arraste um StackPanel o controle na linha superior.

  6. No modo de exibição XAML , substituir o StackPanel elemento com o seguinte XAML.

    <StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>

    Esse XAML estabelece um design-dados em tempo de contexto para o StackPanel e seus controles filho . Além disso, ele disponibiliza os dados de exemplo para vinculação de dados.

Ligação a uma única instância de dados de Exemplo

Você pode vincular qualquer propriedade da Customer instância no arquivo SampleCustomer.xaml. O procedimento a seguir mostra como ligar o FirstNameapropriedade para um TextBox controle usando o construtor de vinculação de dados . For more information, see Passo a passo: Criando uma associação de dados usando o WPF Designer.

Para vincular um TextBox para dados de exemplo

  1. No Toolbox, arraste um TextBox controle para o StackPanel de controle.

  2. No janela Propriedades, role até o Text propriedade.

  3. Na borda da coluna esquerda, clique na o marcador depropriedade (marcador de propriedade).

    Aparecerá um menu .

    Dica

    Você também pode direita-clique na linha para exibir o menu.

  4. Clique em Aplicar a vinculação de dados.

    O construtor de vinculação de dados aparece, com o Caminhoem abertoopainel.

  5. Clique o FirstName propriedade.

    Construtor de associação para uma única instância

  6. No modo de exibição de Design, observe que o TextBox de controle exibe o FirstName valor especificado no arquivo SampleCustomer.xaml.

    Associando um TextBox a dados de exemplo

Ligação a uma coleção de dados de Exemplo

O procedimento a seguir mostra como ligar um DataGrid o controle a uma coleção de Customer objetos no arquivo SampleCustomers.xaml.

Para vincular um controle DataGrid para uma coleção de dados de exemplo

  1. No Toolbox, arraste um DataGrid controlar a segunda linha da grade e dimensioná-lo para preencher a linha.

  2. No modo de exibição XAML , substituir o DataGrid elemento com o seguinte XAML.

    <DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />

    Esse XAML estabelece um design-dados em tempo de contexto para o DataGrid e disponibiliza os dados de exemplo para vinculação de dados.

  3. Selecione o DataGrid.

  4. No janela Propriedades, role até o ItemsSource propriedade.

  5. Na borda da coluna esquerda, clique na o marcador depropriedade (marcador de propriedade).

  6. Clique em Aplicar a vinculação de dados.

    O construtor de vinculação de dados aparece, com o Caminhoem abertoopainel.

    Construtor de associação de dados para uma coleção

  7. No modo de exibição de Design, observe que o DataGrid controle é preenchido com o Customer instâncias do arquivo SampleCustomers.xaml.

    Associando um DataGrid a uma coleção de dados de exemplo

Consulte também

Tarefas

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

Passo a passo: Usando um DesignInstance para associar dados no Designer

Referência

DataGrid

TextBox