Demonstra Passo a passo: Exibindo dados relacionados em um aplicativo WPF

  • Artigo

Esta explicação passo a passo, você criará um aplicativo do WPF que exibe dados de tabelas de banco de dados que tenham uma relação pai/filho. Os dados são encapsulados em entidades em um modelo de dados de entidade. A entidade pai contém informações gerais de um conjunto de pedidos. Cada propriedade desta entidade é acoplada a um controle diferente no aplicativo. A entidade filho contém detalhes para cada pedido. Este conjunto de dados é vinculado a um DataGrid de controle.

Essa explicação passo a passo ilustra as seguintes tarefas:

  • Criando um aplicativo WPF e um modelo de dados de entidade é gerada a partir de dados no banco de dados de exemplo AdventureWorksLT.

  • Criando um conjunto de controles ligados a dados que exibem informações de visão geral de um conjunto de pedidos. Você criar controles arrastando uma entidade pai a partir de Fontes de dados janela para O WPF Designer.

  • Criando um DataGrid controle que exibe os detalhes relacionados para cada ordem selecionada. Você criar controles arrastando-se uma entidade filho a partir de Fontes de dados janela para uma janela em o WPF designer.

    ObservaçãoObservação

    Seu computador pode mostrar diferentes nomes ou localizações para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2010.

  • Acesso a uma instância em execução de SQL Server ou SQL Server Express tem o banco de dados de exemplo AdventureWorksLT anexado a ele. Você pode baixar o banco de dados de AdventureWorksLT a site CodePlex da.

Conhecimento prévio dos seguintes conceitos também é útil, mas não é necessária para concluir o passo a passo:

Criando o projeto

Crie um novo projeto do WPF para exibir os registros do pedido.

Para criar um novo projeto do WPF

  1. Inicie o Visual Studio.

  2. No menu File, aponte para New, e em seguida, clique em Project.

  3. Expanda Visual C# ou Visual Basice selecione Windows.

  4. Certifique-se de que .NET Framework 4 está selecionada na caixa de combinação na parte superior da caixa de diálogo. O controle deDataGrid que podem ser usados nesta explicação só está disponível na.NET Framework 4.

  5. Selecione o Aplicativo WPF o modelo de projeto.

  6. No nome , digite AdventureWorksOrdersViewer.

  7. Clique em OK.

    Visual Studio cria o AdventureWorksOrdersViewer project.

Criando um modelo de dados de entidade para o aplicativo.

Antes de criar controles ligados a dados, você deve definir um modelo de dados para seu aplicativo e adicioná-lo para o Fontes de dados janela. Esta explicação passo a passo, o modelo de dados é um modelo de dados de entidade.

Para criar um modelo de dados de entidade

  1. Sobre o dados menu, clique em Add New Data Source para abrir o Data Source Configuration Wizard.

  2. Sobre o Escolher um tipo de fonte de dados página, clique em banco de dadose, em seguida, clique em próximo.

  3. Sobre o Escolher um modelo de banco de dados página, clique em Modelo de dados de entidadee, em seguida, clique em próximo.

  4. Sobre o Escolher o modelo de conteúdo página, clique em gerar do banco de dadose, em seguida, clique em próxima.

  5. Sobre o Choose Your Data Connection de página, faça o seguinte:

    • Se uma conexão de dados no banco de dados de amostra de AdventureWorksLT estiver disponível na lista suspensa, selecione-o.

      - ou -

    • Clique em Nova conexão e crie uma conexão ao banco de dados AdventureWorksLT.

    Certifique-se de que o Salvar configurações de conexão de entidade em app. config, como opção é selecionada e clique em próximo.

  6. Sobre o Escolha seus objetos de banco de dados de página, expanda tabelase selecione as tabelas a seguir:

    • SalesOrderDetail

    • SalesOrderHeader

  7. Clique em Finish.

  8. Crie o projeto.

Criar Data-Bound controles que exibem as ordens

Criar controles que exibem os registros de pedidos, arrastando o SalesOrderHeaders entidade a partir de Fontes de dados janela para o WPF designer.

Para criar controles ligados a dados que exibem os registros do pedido

  1. Em Solution Explorer, clique duas vezes em MainWindow. XAML.

    A janela se abre no designer WPF.

  2. Editar o XAML assim a altura e largura propriedades são definidas como 800

  3. No Fontes de dados janela, clique no menu drop-down para o SalesOrderHeaders nó e selecione detalhes.

  4. Expanda o SalesOrderHeaders nó.

  5. Clique no menu drop-down ao lado de SalesOrderID e selecione ComboBox.

  6. Para cada um dos seguintes nós filho da SalesOrderHeaders o nó, clique em menu drop-down próximo nó e selecione Nenhum:

    • RevisionNumber

    • OnlineOrderFlag

    • ShipToAddressID

    • BillToAddressID

    • CreditCardApprovalCode

    • SubTotal

    • TaxAmt

    • Frete

    • ROWGUID

    • ModifiedDate

    Essa ação impede que o Visual Studio de criar os controles ligados a dados para esses nós na próxima etapa. Para esta explicação passo a passo, presume-se que o usuário final não precisa ver os dados.

  7. Do Fontes de dados janela, arraste o SalesOrderHeaders o nó para a janela na O WPF Designer.

    Visual Studio gera o XAML cria um conjunto de controles ligados a dados a SalesOrderHeaders entidade e o código que carrega os dados. Para obter mais informações sobre o XAML e o código gerado, consulte Controles do WPF de ligação a dados em Visual Studio.

  8. No designer, clique na caixa de combinação ao lado do Identificação do pedido de vendas rótulo.

  9. No Propriedades janela, selecione a caixa de seleção ao lado do IsReadOnly propriedade.

Criando um DataGrid que exibe os detalhes do pedido

Criar um DataGrid controle que exibe os detalhes do pedido, arrastando o SalesOrderDetails entidade a partir de Fontes de dados janela para o WPF designer.

Para criar um DataGrid que exibe os detalhes do pedido

  1. No Fontes de dados janela, localize o SalesOrderDetails nó é um filho a SalesOrderHeaders nó.

    ObservaçãoObservação

    Há também um SalesOrderDetails nó é um ponto da SalesOrderHeaders nó. Certifique-se de que você selecione o nó filho da SalesOrderHeaders nó.

  2. Expanda o filho SalesOrderDetails nó.

  3. Para cada um dos seguintes nós filho da SalesOrderDetails o nó, clique em menu drop-down próximo nó e selecione Nenhum:

    • SalesOrderID

    • SalesOrderDetailID

    • ROWGUID

    • ModifiedDate

    Essa ação impede que Visual Studio incluindo os dados na DataGrid controle você criar a próxima etapa. Para esta explicação passo a passo, presume-se que o usuário final não precisa ver os dados.

  4. Do Fontes de dados janela, arraste o filho SalesOrderDetails o nó para a janela na O WPF Designer.

    Visual Studio gera o XAML para definir uma nova data-bound DataGrid o controle e o controle aparece no designer. Visual Studio também atualiza o gerado GetSalesOrderHeadersQuery método no arquivo code-behind para incluir os dados de SalesOrderDetails entidade.

Testando o aplicativo

Construir e executar o aplicativo para verificar que ele exibe os registros do pedido.

Para testar o aplicativo

  1. Pressione F5.

    O aplicativo é compilada e executada. Verifique o seguinte:

    • O Identificação do pedido de vendas exibe a caixa de combinação 71774. Esta é a primeira identificação do pedido na entidade.

    • Para cada ordem de você selecionar o Identificação do pedido de vendas caixa de combinação, as informações detalhadas do pedido são exibidas na DataGrid.

  2. Feche o aplicativo.

Próximas etapas

Depois de concluir este passo a passo, Aprenda a usar o Fontes de dados janela no Visual Studio para ligar o WPF controla a outros tipos de fontes de dados. Para obter mais informações, consulte Demonstra Passo a passo: A vinculação de controles do WPF para um serviço de dados do WCF e Demonstra Passo a passo: Controles do WPF de ligação a um Dataset.

Consulte também

Tarefas

Como: Exibir dados relacionados em aplicativos WPF

Conceitos

Controles do WPF de ligação a dados em Visual Studio