Compartilhar via


Associar controles do WPF a um serviço de dados do WCF

Neste passo a passo, você criará um aplicativo WPF que contém controles associados a dados. Os controles são associados a registros de clientes encapsulados em um Serviço de Dados do WCF. Você também adicionará botões que os clientes podem usar para exibir e atualizar registros.

Este passo a passo ilustra as seguintes tarefas:

  • Criando um modelo de dados de entidade gerado a partir de dados no banco de dados de exemplo AdventureWorksLT.

  • Criando um serviço de dados WCF que expõe os dados no modelo de dados de entidade a um aplicativo WPF.

  • Criando um conjunto de controles associados a dados arrastando itens da janela Fontes de Dados para o designer do WPF.

  • Criando botões que navegam para a frente e para trás nos registros de clientes.

  • Criando um botão que salva as alterações dos dados nos controles para o e a fonte de dados subjacente.

Observação

As instruções deste artigo ilustram a versão mais recente da experiência de desenvolvimento interativo (IDE) disponível no Visual Studio. Seu computador pode mostrar nomes ou locais diferentes para alguns dos elementos da interface do usuário. Talvez você esteja usando uma versão diferente do Visual Studio ou configurações de ambiente diferentes. Para obter mais informações, consulte Personalizar o IDE.

Pré-requisitos

Você precisa dos seguintes componentes para concluir este passo a passo:

  • Visual Studio

  • Acesso a uma instância em execução do SQL Server ou do SQL Server Express que tem o banco de dados de exemplo AdventureWorksLT anexado a ele. Para baixar o banco de dados, consulte bancos de dados de exemplo do AdventureWorks

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

Criar o projeto de serviço

  1. Inicie este passo a passo criando um projeto C# ou Visual Basic ASP.NET Aplicativo Web . Nomeie o projeto AdventureWorksService.

  2. No Gerenciador de Soluções, clique com o botão direito do mouse em Default.aspx e selecione Excluir. Esse arquivo não é necessário para o passo a passo.

Criar um modelo de dados de entidade para o serviço

Para expor dados a um aplicativo usando um Serviço de Dados do WCF, você deve definir um modelo de dados para o serviço. O Serviço de Dados do WCF dá suporte a dois tipos de modelos de dados: Modelos de Dados de Entidade e modelos de dados personalizados definidos usando objetos CLR (Common Language Runtime) que implementam a IQueryable<T> interface. Neste passo a passo, você cria um Modelo de Dados de Entidade para o modelo de dados.

  1. No menu Project, clique em Adicionar Novo Item.

  2. Na lista Modelos Instalados, clique em Dados e selecione o item de projeto ADO.NET Modelo de Dados de Entidade .

  3. Altere o nome para AdventureWorksModel.edmxe clique em Adicionar.

    O Assistente do Modelo de Dados de Entidade será aberto.

  4. Na página Escolher Conteúdo do Modelo , clique em Gerar do banco de dados e clique em Avançar.

  5. Na página Escolher Sua Conexão de Dados , selecione uma das seguintes opções:

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

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

  6. Na página Escolher Sua Conexão de Dados, verifique se a opção Salvar configurações de conexão de entidade em App.Config como está selecionada, e então selecione Avançar.

  7. Na página Escolher Seus Objetos de Banco de Dados , expanda Tabelas e selecione a tabela SalesOrderHeader .

  8. Clique em Concluir.

Criar o serviço

Crie um Serviço de Dados do WCF para expor os dados no Modelo de Dados de Entidade a um aplicativo WPF:

  1. No menu Projeto , selecione Adicionar Novo Item.

  2. Na lista Modelos Instalados , clique na Web e selecione o item de projeto do Serviço de Dados do WCF .

  3. Na caixa Nome , digite AdventureWorksService.svce clique em Adicionar.

    O Visual Studio adiciona o AdventureWorksService.svc ao projeto.

Configurar o serviço

Você deve configurar o serviço para operar no Modelo de Dados de Entidade que você criou:

  1. AdventureWorks.svc No arquivo de código, substitua a declaração de classe AdventureWorksService pelo código a seguir.

    public class AdventureWorksService : DataService<AdventureWorksLTEntities>
    {
        // This method is called only once to initialize service-wide policies.
        public static void InitializeService(IDataServiceConfiguration config)
        {
            config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
        }
    }
    

    Esse código atualiza a classe AdventureWorksService, para que derive de um DataService<T> que opera na classe de contexto do objeto AdventureWorksLTEntities em seu Modelo de Dados de Entidade. Ele também atualiza o método InitializeService para permitir que os clientes do serviço tenham acesso completo de leitura/gravação à entidade SalesOrderHeader.

  2. Compile o projeto e verifique se ele é compilado sem erros.

Criar o aplicativo cliente WPF

Para exibir os dados do Serviço de Dados do WCF, crie um novo aplicativo WPF com uma fonte de dados baseada no serviço. Posteriormente, neste passo a passo, você adicionará controles associados a dados ao aplicativo.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó da solução, clique em Adicionar e selecione Novo Projeto.

  2. Na caixa de diálogo Novo Projeto , expanda Visual C# ou Visual Basic e selecione Windows.

  3. Selecione o modelo de projeto do aplicativo WPF .

  4. Na caixa Nome , digite AdventureWorksSalesEditore clique em OK.

    O Visual Studio adiciona o AdventureWorksSalesEditor projeto à solução.

  5. No menu Dados , clique em Mostrar Fontes de Dados.

    A janela Fontes de Dados é aberta.

  6. Na janela de Fontes de Dados, clique em Adicionar Nova Fonte de Dados.

    O assistente de Configuração da Fonte de Dados é aberto.

  7. Na página Escolher um Tipo de Fonte de Dados do assistente, selecione Serviço e selecione Avançar.

  8. Na caixa de diálogo Adicionar Referência de Serviço , clique em Descobrir.

    O Visual Studio pesquisa a solução atual para serviços disponíveis e adiciona AdventureWorksService.svc à lista de serviços disponíveis na caixa Serviços .

  9. Na caixa Namespace , digite AdventureWorksService.

  10. Na caixa Serviços , clique em AdventureWorksService.svc e selecione OK.

    O Visual Studio baixa as informações do serviço e retorna ao assistente de Configuração da Fonte de Dados .

  11. Na página Adicionar Referência de Serviço , clique em Concluir.

    O Visual Studio adiciona nós que representam os dados retornados pelo serviço à janela Fontes de Dados .

Definir a interface do usuário

Adicione vários botões à janela modificando o XAML no designer do WPF. Posteriormente neste passo a passo, você adicionará um código que permite que os usuários exibam e atualizem registros de vendas usando esses botões.

  1. No Gerenciador de Soluções, clique duas vezes em MainWindow.xaml.

    A janela é aberta no designer do WPF.

  2. Na exibição XAML do designer, adicione o seguinte código entre as <Grid> tags:

    <Grid.RowDefinitions>
        <RowDefinition Height="75" />
        <RowDefinition Height="525" />
    </Grid.RowDefinitions>
    <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>
    <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>
    <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
    
  3. Compile o projeto.

Criar os controles associados a dados

Crie controles que exibem registros do cliente ao arrastar o SalesOrderHeadersnó SalesOrderHeaders da janela Fontes de Dados para o designer.

  1. Na janela Fontes de Dados, clique no menu da lista suspensa para o nó SalesOrderHeaders e selecione Detalhes.

  2. Expanda o nó SalesOrderHeaders.

  3. Para este exemplo, alguns campos não serão exibidos, portanto, clique no menu lista suspensa ao lado dos seguintes nós e selecione Nenhum:

    • CreditCardApprovalCode

    • ModifiedDate

    • OnlineOrderFlag

    • RevisionNumber

    • rowguid

    Essa ação impede que o Visual Studio crie controles associados a dados para esses nós na próxima etapa. Para este passo a passo, suponha que o usuário final não precise ver esses dados.

  4. Na janela Fontes de Dados, arraste o nó SalesOrderHeaders para a linha de grade sob a linha que contém os botões.

    O Visual Studio gera XAML e código que cria um conjunto de controles associados a dados na tabela Produto . Para obter mais informações sobre o XAML e o código gerados, consulte Associar controles WPF a dados no Visual Studio.

  5. No designer, clique na caixa de texto ao lado do rótulo ID do Cliente .

  6. Na janela Propriedades , marque a caixa de seleção ao lado da propriedade IsReadOnly .

  7. Defina a propriedade IsReadOnly para cada uma das seguintes caixas de texto:

    • Número do pedido de compra

    • ID do pedido de vendas

    • Número do Pedido de Vendas

Carregar os dados do serviço

Utilize o objeto proxy do serviço para carregar dados de vendas do serviço. Em seguida, atribua os dados retornados à origem de dados da janela CollectionViewSource do WPF.

  1. No designer, para criar o Window_Loaded manipulador de eventos, clique duas vezes no texto que diz: MainWindow.

  2. Substitua o manipulador de eventos pelo código a seguir. Certifique-se de substituir o endereço localhost nesse código pelo endereço do host local no seu computador de desenvolvimento.

    private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
    private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
    private CollectionViewSource ordersViewSource;
    
    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        // TODO: Modify the port number in the following URI as required.
        dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
            new Uri("http://localhost:45899/AdventureWorksService.svc"));
        salesQuery = dataServiceClient.SalesOrderHeaders;
    
        ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
        ordersViewSource.Source = salesQuery.Execute();
        ordersViewSource.View.MoveCurrentToFirst();
    }
    

Adicione um código que permita que os usuários percorram os registros de vendas usando os botões < e >.

  1. No designer, clique duas vezes no < botão na superfície da janela.

    O Visual Studio abre o arquivo code-behind e cria um novo backButton_Click manipulador de eventos para o Click evento.

  2. Adicione o seguinte código ao manipulador de eventos gerado backButton_Click :

    if (ordersViewSource.View.CurrentPosition > 0)
        ordersViewSource.View.MoveCurrentToPrevious();
    
  3. Retorne ao designer e clique duas vezes no botão >.

    O Visual Studio abre o arquivo code-behind e cria um novo nextButton_Click manipulador de eventos para o Click evento.

  4. Adicione o seguinte código ao manipulador de eventos gerado nextButton_Click :

    if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
    {
        ordersViewSource.View.MoveCurrentToNext();
    }
    

Salvar alterações nos registros de vendas

Adicione um código que permite que os usuários exibam e salvem alterações nos registros de vendas usando o botão Salvar alterações :

  1. No designer, clique duas vezes no botão Salvar Alterações .

    O Visual Studio abre o arquivo code-behind e cria um novo saveButton_Click manipulador de eventos para o Click evento.

  2. Adicione o código a seguir ao manipulador de eventos saveButton_Click.

    AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
    dataServiceClient.UpdateObject(currentOrder);
    dataServiceClient.SaveChanges();
    

Testar o aplicativo

Crie e execute o aplicativo para verificar se você pode exibir e atualizar registros de clientes:

  1. No menu Criar , clique em Criar Solução. Verifique se a solução é compilada sem erros.

  2. Pressione Ctrl++F5.

    O Visual Studio inicia o projeto AdventureWorksService sem depurá-lo.

  3. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto AdventureWorksSalesEditor .

  4. No menu de clique com o botão direito do mouse (menu de contexto), em Depurar, clique em Iniciar nova instância.

    O aplicativo roda. Verifique o seguinte:

    • As caixas de texto exibem diferentes campos de dados do primeiro registro de vendas, que tem a ID do pedido de vendas 71774.

    • Você pode clicar nos botões > ou < para navegar por outros registros de vendas.

  5. Em um dos registros de vendas, digite um texto na caixa Comentário e selecione Salvar alterações.

  6. Feche o aplicativo e inicie o aplicativo novamente no Visual Studio.

  7. Navegue até o registro de vendas que você alterou e verifique se a alteração persiste depois que você fechar e reabrir o aplicativo.

  8. Feche o aplicativo.

Próximas etapas

Depois de concluir este passo a passo, você pode executar as seguintes tarefas relacionadas: