Tutorial: Crie seu primeiro aplicativo WPF no Visual Studio 2019Tutorial: Create your first WPF application in Visual Studio 2019

Este artigo mostra como desenvolver um aplicativo de desktop do Windows Presentation Foundation (WPF) que inclui os elementos que são comuns à maioria dos aplicativos WPF: marcação XAML (Extensible Application Markup Language, xaml), code-behind, definições de aplicativos, controles, layout, vinculação de dados e estilos.This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. Para desenvolver o aplicativo, você usará o Visual Studio.To develop the application, you'll use Visual Studio.

Neste tutorial, você aprenderá como:In this tutorial, you learn how to:

  • Crie um projeto WPF.Create a WPF project.
  • Use XAML para projetar a aparência da interface de usuário do aplicativo (UI).Use XAML to design the appearance of the application's user interface (UI).
  • Escreva código para construir o comportamento do aplicativo.Write code to build the application's behavior.
  • Crie uma definição de aplicativo para gerenciar o aplicativo.Create an application definition to manage the application.
  • Adicione controles e crie o layout para compor a interface do aplicativo.Add controls and create the layout to compose the application UI.
  • Crie estilos para uma aparência consistente em toda a interface do ida do aplicativo.Create styles for a consistent appearance throughout the application's UI.
  • Vincule a ui a dados, tanto para preencher a ui a partir de dados quanto para manter os dados e a UI sincronizados.Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

No final do tutorial, você terá construído um aplicativo autônomo do Windows que permite que os usuários visualizem relatórios de despesas para pessoas selecionadas.By the end of the tutorial, you'll have built a standalone Windows application that allows users to view expense reports for selected people. O aplicativo é composto por várias páginas WPF que estão hospedadas em uma janela no estilo navegador.The application is composed of several WPF pages that are hosted in a browser-style window.

Dica

O código de exemplo usado neste tutorial está disponível tanto para visual basic quanto c# no Tutorial WPF App Sample Code.The sample code that is used in this tutorial is available for both Visual Basic and C# at Tutorial WPF App Sample Code.

Você pode alternar a linguagem de código do código de amostra entre C# e Visual Basic usando o seletor de idiomas no topo desta página.You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.

Pré-requisitosPrerequisites

Criar o projeto de aplicativoCreate the application project

O primeiro passo é criar a infra-estrutura do aplicativo, que inclui uma definição de aplicativo, duas páginas e uma imagem.The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Crie um novo projeto de aplicativo WPF ExpenseIt no Visual Basic ou Visual C# chamado :Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Abra o Visual Studio e selecione Crie um novo projeto no menu 'Iniciar'.Open Visual Studio and select Create a new project under the Get started menu.

      O Diálogo Criar um novo projeto é aberto.The Create a new project dialog opens.

    2. Na estada do idioma, selecione C# ou Visual Basic.In the Language dropdown, select either C# or Visual Basic.

    3. Selecione o modelo WPF App (.NET Framework) e selecione Next.Select the WPF App (.NET Framework) template and then select Next.

      Crie um novo diálogo de projeto

      O Configure seu novo diálogo de projeto é aberto.The Configure your new project dialog opens.

    4. Digite o ExpenseIt nome do projeto e selecione Criar.Enter the project name ExpenseIt and then select Create.

      Configure uma nova caixa de diálogo de projeto

      O Visual Studio cria o projeto e abre o designer para a janela de aplicativo padrão chamada MainWindow.xaml.Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

  2. Abra o Application.xaml (Visual Basic) ou o App.xaml (C#).Open Application.xaml (Visual Basic) or App.xaml (C#).

    Este arquivo XAML define um aplicativo WPF e quaisquer recursos de aplicação.This XAML file defines a WPF application and any application resources. Você também usa este arquivo para especificar a interface do u, neste caso MainWindow.xaml, que mostra automaticamente quando o aplicativo é iniciado.You also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

    Seu XAML deve parecer o seguinte no Visual Basic:Your XAML should look like the following in Visual Basic:

    <Application x:Class="Application"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        StartupUri="MainWindow.xaml">
        <Application.Resources>
            
        </Application.Resources>
    </Application>
    

    E como o seguinte em C#:And like the following in C#:

    <Application x:Class="ExpenseIt.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="MainWindow.xaml">
        <Application.Resources>
             
        </Application.Resources>
    </Application>
    
  3. Abra MainWindow.xaml.Open MainWindow.xaml.

    Este arquivo XAML é a janela principal do seu aplicativo e exibe o conteúdo criado nas páginas.This XAML file is the main window of your application and displays content created in pages. A Window classe define as propriedades de uma janela, como seu título, tamanho ou ícone, e lida com eventos, como fechar ou ocultar.The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

  4. Altere Window o NavigationWindowelemento para a, conforme mostrado no seguinte XAML:Change the Window element to a NavigationWindow, as shown in the following XAML:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         ...
    </NavigationWindow>
    

    Este aplicativo navega para diferentes conteúdos, dependendo da entrada do usuário.This app navigates to different content depending on the user input. É por isso Window que o principal NavigationWindowprecisa ser alterado para um .This is why the main Window needs to be changed to a NavigationWindow. NavigationWindowherda todas as Windowpropriedades de .NavigationWindow inherits all the properties of Window. O NavigationWindow elemento no arquivo XAML cria NavigationWindow uma instância da classe.The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. Para obter mais informações, consulte Visão geral da navegação.For more information, see Navigation overview.

  5. Remova Grid os elementos NavigationWindow entre as etiquetas.Remove the Grid elements from between the NavigationWindow tags.

  6. Alterar as seguintes propriedades no código NavigationWindow XAML para o elemento:Change the following properties in the XAML code for the NavigationWindow element:

    • Defina Title aExpenseItpropriedade para ".Set the Title property to "ExpenseIt".

    • Defina Height a propriedade em 350 pixels.Set the Height property to 350 pixels.

    • Defina Width a propriedade para 500 pixels.Set the Width property to 500 pixels.

    Seu XAML deve parecer o seguinte para Visual Basic:Your XAML should look like the following for Visual Basic:

    <NavigationWindow x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500">
     
    </NavigationWindow>
    

    E como o seguinte para C#:And like the following for C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500">
        
    </NavigationWindow>
    
  7. Abra MainWindow.xaml.vb ou MainWindow.xaml.cs.Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    Este arquivo é um arquivo por trás do código que contém código para lidar com os eventos declarados em MainWindow.xaml.This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. Esse arquivo contém uma classe parcial para a janela definida no XAML.This file contains a partial class for the window defined in XAML.

  8. Se você estiver usando C#, mude MainWindow NavigationWindowa classe para derivar de .If you're using C#, change the MainWindow class to derive from NavigationWindow. (No Visual Basic, isso acontece automaticamente quando você altera a janela em XAML.) Seu código C# agora deve ser assim:(In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : NavigationWindow
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    

Adicionar arquivos ao aplicativoAdd files to the application

Nesta seção, você adicionará duas páginas e uma imagem ao aplicativo.In this section, you'll add two pages and an image to the application.

  1. Adicione uma nova página ao projeto ExpenseItHome.xaml e nomeie-a:Add a new page to the project, and name it ExpenseItHome.xaml:

    1. No Solution Explorer, clique ExpenseIt com o botão direito do mouse no nó do projeto e escolha Adicionar > página.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. Na caixa de diálogo Adicionar novo item, o modelo Página (WPF) já está selecionado.In the Add New Item dialog, the Page (WPF) template is already selected. Digite ExpenseItHome o nome e selecione Adicionar.Enter the name ExpenseItHome, and then select Add.

    Esta página é a primeira página exibida quando o aplicativo é lançado.This page is the first page that's displayed when the application is launched. Ele mostrará uma lista de pessoas para selecionar, para mostrar um relatório de despesas para.It will show a list of people to select from, to show an expense report for.

  2. Abra. ExpenseItHome.xamlOpen ExpenseItHome.xaml.

  3. Defina Title oExpenseIt - Home"" ".Set the Title to "ExpenseIt - Home".

  4. Defina DesignHeight os 350 pixels e os DesignWidth 500 pixels.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    O XAML agora aparece da seguinte forma para Visual Basic:The XAML now appears as follows for Visual Basic:

    <Page x:Class="ExpenseItHome"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
      Title="ExpenseIt - Home">
        <Grid>
            
        </Grid>
    </Page>
    

    E como o seguinte para C#:And like the following for C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid>
            
        </Grid>
    </Page>
    
  5. Abra MainWindow.xaml.Open MainWindow.xaml.

  6. Adicione Source uma propriedade NavigationWindow ao elemento eExpenseItHome.xamldefina-a como " ".Add a Source property to the NavigationWindow element and set it to "ExpenseItHome.xaml".

    Esta ExpenseItHome.xaml define-se para ser a primeira página aberta quando o aplicativo é iniciado.This sets ExpenseItHome.xaml to be the first page opened when the application starts.

    Exemplo XAML no Visual Basic:Example XAML in Visual Basic:

    <NavigationWindow x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
        
    </NavigationWindow>
    

    E em C#:And in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
        
    </NavigationWindow>
    

    Dica

    Você também pode definir a propriedade Origem na categoria Diversas da janela Propriedades.You can also set the Source property in the Miscellaneous category of the Properties window.

    Propriedade de origem na janela Propriedades

  7. Adicione outra nova página do WPF ao projeto e nomeie-a ExpenseReportPage.xaml::Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. No Solution Explorer, clique ExpenseIt com o botão direito do mouse no nó do projeto e escolha Adicionar > página.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. Na caixa de diálogo Adicionar novo item, selecione o modelo Página (WPF).In the Add New Item dialog, select the Page (WPF) template. Digite o nome ExpenseReportPagee, em seguida, selecione Adicionar.Enter the name ExpenseReportPage, and then select Add.

    Esta página mostrará o relatório de despesas ExpenseItHome para a pessoa selecionada na página.This page will show the expense report for the person that is selected on the ExpenseItHome page.

  8. Open ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  9. Defina Title oExpenseIt - View Expense"" ".Set the Title to "ExpenseIt - View Expense".

  10. Defina DesignHeight os 350 pixels e os DesignWidth 500 pixels.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    ExpenseReportPage.xaml agora parece o seguinte no Visual Basic:ExpenseReportPage.xaml now looks like the following in Visual Basic:

    <Page x:Class="ExpenseReportPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
          Title="ExpenseIt - View Expense">
        <Grid>
            
        </Grid>
    </Page>
    

    E como o seguinte em C#:And like the following in C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - View Expense">
    
        <Grid>
            
        </Grid>
    </Page>
    
  11. Custo abertoItHome.xaml.vb e ExpenseReportPage.xaml.vb, ou ExpenseItHome.xaml.cs e ExpenseReportPage.xaml.cs.Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    Quando você cria um novo arquivo de página, o Visual Studio cria automaticamente seu arquivo de código atrás.When you create a new Page file, Visual Studio automatically creates its code-behind file. Esses arquivos code-behind manipulam a lógica para responder à entrada do usuário.These code-behind files handle the logic for responding to user input.

    Seu código deve parecer ExpenseItHome o seguinte para:Your code should look like the following for ExpenseItHome:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for ExpenseItHome.xaml
        /// </summary>
        public partial class ExpenseItHome : Page
        {
            public ExpenseItHome()
            {
                InitializeComponent();
            }
        }
    }
    
    Class ExpenseItHome
    
    End Class
    

    E como o seguinte para ExpenseReportPage:And like the following for ExpenseReportPage:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for ExpenseReportPage.xaml
        /// </summary>
        public partial class ExpenseReportPage : Page
        {
            public ExpenseReportPage()
            {
                InitializeComponent();
            }
        }
    }
    
    Class ExpenseReportPage
    
    End Class
    
  12. Adicione uma imagem chamada watermark.png ao projeto.Add an image named watermark.png to the project. Você pode criar sua própria imagem, copiar o arquivo do código de amostra ou obtê-lo no repositório GitHub da Microsoft/WPF-Samples.You can create your own image, copy the file from the sample code, or get it from the microsoft/WPF-Samples GitHub repository.

    1. Clique com o botão direito do mouse no nó do projeto e selecione Adicionar > item existenteou pressione Shift+Alt+A.Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. Na caixa de diálogo Adicionar item existente, defina o filtro de arquivo para todos os arquivos ou arquivos de imagem, navegue até o arquivo de imagem que deseja usar e selecione Adicionar.In the Add Existing Item dialog, set the file filter to either All Files or Image Files, browse to the image file you want to use, and then select Add.

Compile e execute o aplicativoBuild and run the application

  1. Para criar e executar o aplicativo, pressione F5 ou selecione Iniciar depuração no menu Depuração.To build and run the application, press F5 or select Start Debugging from the Debug menu.

    A ilustração a seguir NavigationWindow mostra o aplicativo com os botões:The following illustration shows the application with the NavigationWindow buttons:

    Aplicativo depois de construí-lo e executá-lo.

  2. Feche o aplicativo para retornar ao Visual Studio.Close the application to return to Visual Studio.

Crie o layoutCreate the layout

O layout fornece uma maneira ordenada de colocar elementos de ida e volta, e também gerencia o tamanho e a posição desses elementos quando uma iu é redimensionada.Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. Normalmente, você cria um layout com um dos seguintes controles de layout:You typically create a layout with one of the following layout controls:

  • Canvas- Define uma área dentro da qual você pode posicionar explicitamente elementos infantis usando coordenadas relativas à área do Canvas.Canvas - Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
  • DockPanel- Define uma área onde você pode organizar elementos infantis horizontal ou verticalmente, em relação um ao outro.DockPanel - Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
  • Grid- Define uma área de grade flexível que consiste em colunas e linhas.Grid - Defines a flexible grid area that consists of columns and rows.
  • StackPanel- Organiza elementos infantis em uma única linha que pode ser orientada horizontal ou verticalmente.StackPanel - Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel- Organiza e virtualiza o conteúdo em uma única linha orientada horizontal ou verticalmente.VirtualizingStackPanel - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • WrapPanel- Posiciona os elementos da criança na posição seqüencial da esquerda para a direita, quebrando o conteúdo para a próxima linha na borda da caixa de contenção.WrapPanel - Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. A encomenda subseqüente acontece sequencialmente de cima para baixo ou da direita para a esquerda, dependendo do valor da propriedade Orientação.Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.

Cada um desses controles de layout suporta um tipo específico de layout para seus elementos infantis.Each of these layout controls supports a particular type of layout for its child elements. ExpenseItpáginas podem ser redimensionadas, e cada página tem elementos que são organizados horizontal e verticalmente ao lado de outros elementos.ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. Neste exemplo, Grid o é usado como elemento de layout para a aplicação.In this example, the Grid is used as layout element for the application.

Dica

Para obter Panel mais informações sobre elementos, consulte Painéis de visão geral.For more information about Panel elements, see Panels overview. Para obter mais informações sobre layout, consulte Layout.For more information about layout, see Layout.

Nesta seção, você cria uma tabela de uma única coluna com três linhas e uma Grid ExpenseItHome.xaml margem de 10 pixels adicionando definições de coluna e linha à entrada .In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml.

  1. Em ExpenseItHome.xaml, Margin definir a Grid propriedade no elemento como "10,0,10,10", que corresponde às margens esquerda, superior, direita e inferior:In ExpenseItHome.xaml, set the Margin property on the Grid element to "10,0,10,10", which corresponds to left, top, right and bottom margins:

    <Grid Margin="10,0,10,10">
    

    Dica

    Você também pode definir os valores de Margem na janela Propriedades, na categoria Layout:You can also set the Margin values in the Properties window, under the Layout category:

    Valores de margem na janela Propriedades

  2. Adicione o seguinte XAML entre as Grid tags para criar as definições de linha e coluna:Add the following XAML between the Grid tags to create the row and column definitions:

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    

    A Height de duas linhas Autoé definida como , o que significa que as linhas são dimensionadas com base no conteúdo nas linhas.The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. O Height padrão Star é o dimensionamento, o que significa que a altura da linha é uma proporção ponderada do espaço disponível.The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. Por exemplo, se duas Height linhas cada uma tem um de "*", cada uma tem uma altura que é metade do espaço disponível.For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    Agora Grid você deve conter o seguinte XAML:Your Grid should now contain the following XAML:

    <Grid Margin="10,0,10,10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    </Grid>
    

Adicionar controlesAdd controls

Nesta seção, você atualizará a ui da página inicial para mostrar uma lista de pessoas, onde você seleciona uma pessoa para exibir seu relatório de despesas.In this section, you'll update the home page UI to show a list of people, where you select one person to display their expense report. Os controles são objetos da interface do usuário que permitem aos usuários interagir com seu aplicativo.Controls are UI objects that allow users to interact with your application. Para obter mais informações, consulte Controles.For more information, see Controls.

Para criar essa iu, você adicionará ExpenseItHome.xaml os seguintes elementos a:To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • A ListBox (para a lista de pessoas).A ListBox (for the list of people).
  • A Label (para o cabeçalho da lista).A Label (for the list header).
  • A Button (clicar para visualizar o relatório de despesas para a pessoa selecionada na lista).A Button (to click to view the expense report for the person that is selected in the list).

Cada controle é colocado em Grid uma Grid.Row linha do definindo a propriedade anexada.Each control is placed in a row of the Grid by setting the Grid.Row attached property. Para obter mais informações sobre propriedades anexadas, consulte Visão geral de propriedades anexadas.For more information about attached properties, see Attached Properties Overview.

  1. Em ExpenseItHome.xaml, adicione o seguinte XAML em algum lugar entre as Grid tags:In ExpenseItHome.xaml, add the following XAML somewhere between the Grid tags:

    
    <!-- People list -->
    <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
        <Label VerticalAlignment="Center" Foreground="White">Names</Label>
    </Border>
    <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
    </ListBox>
    
    <!-- View report button -->
    <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
    

    Dica

    Você também pode criar os controles arrastando-os da janela Toolbox para a janela de design e, em seguida, definindo suas propriedades na janela Propriedades.You can also create the controls by dragging them from the Toolbox window onto the design window, and then setting their properties in the Properties window.

  2. Criar e executar o aplicativo.Build and run the application.

    A ilustração a seguir mostra os controles que você criou:The following illustration shows the controls you created:

DespesaA captura de tela de captura de tela de captura de tela exibindo uma lista de nomes

Adicione uma imagem e um títuloAdd an image and a title

Nesta seção, você atualizará a ui da página inicial com uma imagem e um título de página.In this section, you'll update the home page UI with an image and a page title.

  1. Em ExpenseItHome.xaml, adicionar outra ColumnDefinitions coluna Width ao com um fixo de 230 pixels:In ExpenseItHome.xaml, add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

    
        <Page x:Class="ExpenseIt.ExpenseItHome"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <Grid.Resources>
               
                <!-- Expense Report Data -->
                <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
                    <x:XData>
                        <Expenses xmlns="">
                            <Person Name="Mike" Department="Legal">
                                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                            </Person>
                            <Person Name="Lisa" Department="Marketing">
                                <Expense ExpenseType="Document printing"
                      ExpenseAmount="50"/>
                                <Expense ExpenseType="Gift" ExpenseAmount="125" />
                            </Person>
                            <Person Name="John" Department="Engineering">
                                <Expense ExpenseType="Magazine subscription" 
                     ExpenseAmount="50"/>
                                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                                <Expense ExpenseType="Software" ExpenseAmount="500" />
                            </Person>
                            <Person Name="Mary" Department="Finance">
                                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                            </Person>
                        </Expenses>
                    </x:XData>
                </XmlDataProvider>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <Grid.Background>
                <ImageBrush ImageSource="watermark.png"  />
            </Grid.Background>
           
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="230" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
         
            <!-- People list -->
           
            <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
                View Expense Report
            </Label>
            
            <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
                <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
            </Border>
           
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  2. Adicione outra linha RowDefinitionsao , para um total de quatro linhas:Add another row to the RowDefinitions, for a total of four rows:

    
        <Page x:Class="ExpenseIt.ExpenseItHome"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <Grid.Resources>
               
                <!-- Expense Report Data -->
                <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
                    <x:XData>
                        <Expenses xmlns="">
                            <Person Name="Mike" Department="Legal">
                                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                            </Person>
                            <Person Name="Lisa" Department="Marketing">
                                <Expense ExpenseType="Document printing"
                      ExpenseAmount="50"/>
                                <Expense ExpenseType="Gift" ExpenseAmount="125" />
                            </Person>
                            <Person Name="John" Department="Engineering">
                                <Expense ExpenseType="Magazine subscription" 
                     ExpenseAmount="50"/>
                                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                                <Expense ExpenseType="Software" ExpenseAmount="500" />
                            </Person>
                            <Person Name="Mary" Department="Finance">
                                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                            </Person>
                        </Expenses>
                    </x:XData>
                </XmlDataProvider>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <Grid.Background>
                <ImageBrush ImageSource="watermark.png"  />
            </Grid.Background>
           
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="230" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
         
            <!-- People list -->
           
            <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
                View Expense Report
            </Label>
            
            <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
                <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
            </Border>
           
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  3. Mova os controles para a segunda Grid.Column coluna definindo a propriedade para 1 em cada um dos três controles (Border, ListBox e Button).Move the controls to the second column by setting the Grid.Column property to 1 in each of the three controls (Border, ListBox, and Button).

  4. Mova cada controle para baixo Grid.Row uma linha, aumentando seu valor em 1 para cada um dos três controles (Border, ListBox e Button) e para o elemento Borda.Move each control down a row by incrementing its Grid.Row value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.

    O XAML para os três controles agora parece o seguinte:The XAML for the three controls now looks like the following:

      <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
          <ListBoxItem>Mike</ListBoxItem>
          <ListBoxItem>Lisa</ListBoxItem>
          <ListBoxItem>John</ListBoxItem>
          <ListBoxItem>Mary</ListBoxItem>
      </ListBox>
    
      <!-- View report button -->
      <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
    Height="25" HorizontalAlignment="Right">View</Button>
    
  5. Defina Panel.Background a propriedade no arquivo de imagem watermark.png, adicionando o seguinte XAML em qualquer lugar entre as <Grid> </Grid> tags:Set the Panel.Background property to the watermark.png image file, by adding the following XAML anywhere between the <Grid> and </Grid> tags:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Antes Border do elemento, Label adicione a com o conteúdo "Exibir relatório de despesas".Before the Border element, add a Label with the content "View Expense Report". Este rótulo é o título da página.This label is the title of the page.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
    </Label>
    
  7. Criar e executar o aplicativo.Build and run the application.

A ilustração a seguir mostra os resultados do que você acabou de adicionar:The following illustration shows the results of what you just added:

Captura de tela de exemplo expenseIt mostrando o novo plano de fundo da imagem e o título da página

Adicionar código para lidar com eventosAdd code to handle events

  1. Em ExpenseItHome.xaml, Click adicionar um Button manipulador de eventos ao elemento.In ExpenseItHome.xaml, add a Click event handler to the Button element. Para obter mais informações, consulte Como: Criar um simples manipulador de eventos.For more information, see How to: Create a simple event handler.

      <!-- View report button -->
      <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
    Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>
    
  2. Abra ExpenseItHome.xaml.vb ExpenseItHome.xaml.cs ou.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  3. Adicione o seguinte ExpenseItHome código à classe para adicionar um manipulador de eventos clique em botão.Add the following code to the ExpenseItHome class to add a button click event handler. O manipulador de eventos abre a página ExpenseReportPage.The event handler opens the ExpenseReportPage page.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage();
        this.NavigationService.Navigate(expenseReportPage);
    }
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ' View Expense Report
        Dim expenseReportPage As New ExpenseReportPage()
        Me.NavigationService.Navigate(expenseReportPage)
    
    End Sub
    

Criar a ui para relatório de despesasCreate the UI for ExpenseReportPage

ExpenseReportPage.xaml exibe o relatório de despesas para ExpenseItHome a pessoa selecionada na página.ExpenseReportPage.xaml displays the expense report for the person that's selected on the ExpenseItHome page. Nesta seção, você criará a ui para ExpenseReportPage.In this section, you'll create the UI for ExpenseReportPage. Você também adicionará o plano de fundo e preencherá cores aos vários elementos de ia.You'll also add background and fill colors to the various UI elements.

  1. Open ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Adicione o seguinte XAML entre as Grid tags:Add the following XAML between the Grid tags:

     <Grid.Background>
         <ImageBrush ImageSource="watermark.png" />
     </Grid.Background>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="230" />
         <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition />
     </Grid.RowDefinitions>
    
    
     <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
     FontWeight="Bold" FontSize="18" Foreground="#0066cc">
         Expense Report For:
     </Label>
     <Grid Margin="10" Grid.Column="1" Grid.Row="1">
    
         <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition />
         </Grid.RowDefinitions>
    
         <!-- Name -->
         <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
             <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
             <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
         </StackPanel>
    
         <!-- Department -->
         <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
             <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
             <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
         </StackPanel>
    
         <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
               HorizontalAlignment="Left">
             <!-- Expense type and Amount table -->
             <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >
                 <DataGrid.ColumnHeaderStyle>
                     <Style TargetType="{x:Type DataGridColumnHeader}">
                         <Setter Property="Height" Value="35" />
                         <Setter Property="Padding" Value="5" />
                         <Setter Property="Background" Value="#4E87D4" />
                         <Setter Property="Foreground" Value="White" />
                     </Style>
                 </DataGrid.ColumnHeaderStyle>
                 <DataGrid.Columns>
                     <DataGridTextColumn Header="ExpenseType" />
                     <DataGridTextColumn Header="Amount"  />
                 </DataGrid.Columns>
             </DataGrid>
         </Grid>
     </Grid>
    

    Esta ui é ExpenseItHome.xaml semelhante, exceto que os DataGriddados do relatório são exibidos em um .This UI is similar to ExpenseItHome.xaml, except the report data is displayed in a DataGrid.

  3. Criar e executar o aplicativo.Build and run the application.

  4. Selecione o botão Exibir.Select the View button.

    A página de relatório de despesas é exibida.The expense report page appears. Observe também que o botão de navegação de volta está ativado.Also notice that the back navigation button is enabled.

A ilustração a seguir mostra os elementos de IA adicionados ao ExpenseReportPage.xaml.The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Captura de tela de exemplo expenseIt mostrando a ui criada para o ExpenseReportPage.

Controles de estiloStyle controls

O aparecimento de vários elementos é muitas vezes o mesmo para todos os elementos do mesmo tipo em uma ui.The appearance of various elements is often the same for all elements of the same type in a UI. A ui usa estilos para tornar as aparências reutilizáveis em vários elementos.UI uses styles to make appearances reusable across multiple elements. A reutilização dos estilos ajuda a simplificar a criação e o gerenciamento do XAML.The reusability of styles helps to simplify XAML creation and management. Esta seção substitui os atributos por elemento que foram definidos nas etapas anteriores com estilos.This section replaces the per-element attributes that were defined in previous steps with styles.

  1. Abra o Application.xaml ou app.xaml.Open Application.xaml or App.xaml.

  2. Adicione o seguinte XAML entre as Application.Resources tags:Add the following XAML between the Application.Resources tags:

    
    <!-- Header text style -->
    <Style x:Key="headerTextStyle">
        <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
        <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
        <Setter Property="Label.FontWeight" Value="Bold"></Setter>
        <Setter Property="Label.FontSize" Value="18"></Setter>
        <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
    </Style>
    
    <!-- Label style -->
    <Style x:Key="labelStyle" TargetType="{x:Type Label}">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Margin" Value="0,0,0,5" />
    </Style>
    
    <!-- DataGrid header style -->
    <Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Height" Value="35" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Background" Value="#4E87D4" />
        <Setter Property="Foreground" Value="White" />
    </Style>
    
    <!-- List header style -->
    <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
        <Setter Property="Height" Value="35" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Background" Value="#4E87D4" />
    </Style>
    
    <!-- List header text style -->
    <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
    
    <!-- Button style -->
    <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="125" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Margin" Value="0,10,0,0" />
        <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
    

    Esse XAML adiciona os seguintes estilos:This XAML adds the following styles:

    • headerTextStyle: para formatar o título da página Label.headerTextStyle: To format the page title Label.

    • labelStyle: para formatar os controles Label.labelStyle: To format the Label controls.

    • columnHeaderStyle: para formatar o DataGridColumnHeader.columnHeaderStyle: To format the DataGridColumnHeader.

    • listHeaderStyle: para formatar os controles Border do cabeçalho da lista.listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: Para formatar Labelo cabeçalho da lista .listHeaderTextStyle: To format the list header Label.

    • buttonStyle: Para Button formatar o on ExpenseItHome.xaml.buttonStyle: To format the Button on ExpenseItHome.xaml.

    Observe que os estilos são Application.Resources recursos e filhos do elemento propriedade.Notice that the styles are resources and children of the Application.Resources property element. Nesse local, os estilos são aplicados a todos os elementos em um aplicativo.In this location, the styles are applied to all the elements in an application. Para um exemplo de uso de recursos em um aplicativo .NET, consulte Use Application Resources.For an example of using resources in a .NET app, see Use Application Resources.

  3. Em ExpenseItHome.xaml, substituir Grid tudo entre os elementos com o seguinte XAML:In ExpenseItHome.xaml, replace everything between the Grid elements with the following XAML:

       <Grid.Background>
           <ImageBrush ImageSource="watermark.png"  />
       </Grid.Background>
      
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="230" />
           <ColumnDefinition />
       </Grid.ColumnDefinitions>
       
       <Grid.RowDefinitions>
           <RowDefinition/>
           <RowDefinition Height="Auto"/>
           <RowDefinition />
           <RowDefinition Height="Auto"/>
       </Grid.RowDefinitions>
    
       <!-- People list -->
      
       <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
           View Expense Report
       </Label>
       
       <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
           <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
       </Border>
       <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
           <ListBoxItem>Mike</ListBoxItem>
           <ListBoxItem>Lisa</ListBoxItem>
           <ListBoxItem>John</ListBoxItem>
           <ListBoxItem>Mary</ListBoxItem>
       </ListBox>
    
       <!-- View report button -->
       <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
    

    As propriedades como VerticalAlignment e FontFamily que definem a aparência de cada controle são removidas e substituídas ao aplicar os estilos.The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. Por exemplo, headerTextStyle o é aplicado ao "Exibir relatório de despesas". LabelFor example, the headerTextStyle is applied to the "View Expense Report" Label.

  4. Open ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  5. Substitua tudo Grid entre os elementos pelo seguinte XAML:Replace everything between the Grid elements with the following XAML:

      <Grid.Background>
          <ImageBrush ImageSource="watermark.png" />
      </Grid.Background>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="230" />
          <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition />
      </Grid.RowDefinitions>
    
    
      <Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
          Expense Report For:
      </Label>
      <Grid Margin="10" Grid.Column="1" Grid.Row="1">
    
          <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
              <RowDefinition />
          </Grid.RowDefinitions>
    
          <!-- Name -->
          <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
              <Label Style="{StaticResource labelStyle}">Name:</Label>
              <Label Style="{StaticResource labelStyle}"></Label>
          </StackPanel>
    
          <!-- Department -->
          <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
      Orientation="Horizontal">
              <Label Style="{StaticResource labelStyle}">Department:</Label>
              <Label Style="{StaticResource labelStyle}"></Label>
          </StackPanel>
    
          <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
                HorizontalAlignment="Left">
              <!-- Expense type and Amount table -->
              <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" 
                        AutoGenerateColumns="False" RowHeaderWidth="0" >
                  <DataGrid.Columns>
                      <DataGridTextColumn Header="ExpenseType" />
                      <DataGridTextColumn Header="Amount"  />
                  </DataGrid.Columns>
              </DataGrid>
          </Grid>
      </Grid>
    

    Este XAML adiciona Label estilos Border aos elementos.This XAML adds styles to the Label and Border elements.

  6. Criar e executar o aplicativo.Build and run the application. A aparência da janela é a mesma de antes.The window appearance is the same as previously.

    ExpenseIt captura de tela de captura de tela com a mesma aparência da última seção.

  7. Feche o aplicativo para retornar ao Visual Studio.Close the application to return to Visual Studio.

Vincular dados a um controleBind data to a control

Nesta seção, você criará os dados XML que estão vinculados a vários controles.In this section, you'll create the XML data that is bound to various controls.

  1. Em ExpenseItHome.xaml, após Grid o elemento de abertura, adicione XmlDataProvider o seguinte XAML para criar um que contenha os dados de cada pessoa:In ExpenseItHome.xaml, after the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person:

    <Grid.Resources>
        <!-- Expense Report Data -->
        <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
            <x:XData>
                <Expenses xmlns="">
                    <Person Name="Mike" Department="Legal">
                        <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                        <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                    </Person>
                    <Person Name="Lisa" Department="Marketing">
                        <Expense ExpenseType="Document printing"
              ExpenseAmount="50"/>
                        <Expense ExpenseType="Gift" ExpenseAmount="125" />
                    </Person>
                    <Person Name="John" Department="Engineering">
                        <Expense ExpenseType="Magazine subscription" 
             ExpenseAmount="50"/>
                        <Expense ExpenseType="New machine" ExpenseAmount="600" />
                        <Expense ExpenseType="Software" ExpenseAmount="500" />
                    </Person>
                    <Person Name="Mary" Department="Finance">
                        <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                    </Person>
                </Expenses>
            </x:XData>
        </XmlDataProvider>
    </Grid.Resources>
    

    Os dados são criados como um Grid recurso.The data is created as a Grid resource. Normalmente esses dados seriam carregados como um arquivo, mas para simplificar os dados são adicionados inline.Normally this data would be loaded as a file, but for simplicity the data is added inline.

  2. Dentro <Grid.Resources> do elemento, <xref:System.Windows.DataTemplate> adicione o seguinte elemento, que define ListBoxcomo <XmlDataProvider> exibir os dados no , após o elemento:Within the <Grid.Resources> element, add the following <xref:System.Windows.DataTemplate> element, which defines how to display the data in the ListBox, after the <XmlDataProvider> element:

    <Grid.Resources>
        <!-- Name item template -->
        <DataTemplate x:Key="nameItemTemplate">
            <Label Content="{Binding XPath=@Name}"/>
        </DataTemplate>
    </Grid.Resources>
    

    Para obter mais informações sobre modelos de dados, consulte Visão geral do templating de dados.For more information about data templates, see Data templating overview.

  3. Substitua o ListBox existente pelo seguinte XAML:Replace the existing ListBox with the following XAML:

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
             ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
             ItemTemplate="{StaticResource nameItemTemplate}">
    </ListBox>
    

    Este XAML vincula ItemsSource a ListBox propriedade da fonte de dados e ItemTemplateaplica o modelo de dados como .This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Conecte dados a controlesConnect data to controls

Em seguida, você adicionará código para recuperar o ExpenseItHome nome selecionado na página e passá-lo para o construtor de ExpenseReportPage.Next, you'll add code to retrieve the name that's selected on the ExpenseItHome page and pass it to the constructor of ExpenseReportPage. ExpenseReportPage define seu contexto de dados com o item passado, que é o que os controles definidos em ExpenseReportPage.xaml bind to.ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

  1. Open ExpenseReportPage.xaml.vb ou ExpenseReportPage.xaml.cs.Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. Adicione um construtor que utiliza um objeto para passar os dados do relatório de despesas da pessoa selecionada.Add a constructor that takes an object so you can pass the expense report data of the selected person.

    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    
        // Custom constructor to pass expense report data
        public ExpenseReportPage(object data):this()
        {
            // Bind to expense report data.
            this.DataContext = data;
        }
    }
    
    Partial Public Class ExpenseReportPage
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub
    
        ' Custom constructor to pass expense report data
        Public Sub New(ByVal data As Object)
            Me.New()
            ' Bind to expense report data.
            Me.DataContext = data
        End Sub
    
    End Class
    
  3. Abra ExpenseItHome.xaml.vb ExpenseItHome.xaml.cs ou.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Altere Click o manipulador de eventos para chamar o novo construtor passando os dados do relatório de despesas da pessoa selecionada.Change the Click event handler to call the new constructor passing the expense report data of the selected person.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
        this.NavigationService.Navigate(expenseReportPage);
    }
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ' View Expense Report
        Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
        Me.NavigationService.Navigate(expenseReportPage)
    
    End Sub
    

Dados de estilo com modelos de dadosStyle data with data templates

Nesta seção, você atualizará a ui para cada item nas listas vinculadas a dados usando modelos de dados.In this section, you'll update the UI for each item in the data-bound lists by using data templates.

  1. Open ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Vincule o conteúdo dos elementos Label "Nome" e "Departamento" à propriedade de origem de dados apropriada.Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. Para obter mais informações sobre vinculação de dados, consulte Visão geral de vinculação de dados.For more information about data binding, see Data binding overview.

    <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
    </StackPanel>
    
    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>
    </StackPanel>
    
  3. Após o Grid elemento de abertura, adicione os seguintes modelos de dados, que definem como exibir os dados do relatório de despesas:After the opening Grid element, add the following data templates, which define how to display the expense report data:

    <!--Templates to display expense report data-->
    <Grid.Resources>
        <!-- Reason item template -->
        <DataTemplate x:Key="typeItemTemplate">
            <Label Content="{Binding XPath=@ExpenseType}"/>
        </DataTemplate>
        <!-- Amount item template -->
        <DataTemplate x:Key="amountItemTemplate">
            <Label Content="{Binding XPath=@ExpenseAmount}"/>
        </DataTemplate>
    </Grid.Resources>
    
  4. Substitua DataGridTextColumn os DataGridTemplateColumn elementos por o DataGrid elemento e aplique os modelos a eles.Replace the DataGridTextColumn elements with DataGridTemplateColumn under the DataGrid element and apply the templates to them.

    <!-- Expense type and Amount table -->
    <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
       
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
            <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
        </DataGrid.Columns>
        
    </DataGrid>
    
  5. Criar e executar o aplicativo.Build and run the application.

  6. Selecione uma pessoa e selecione o botão Exibir.Select a person and then select the View button.

A ilustração a ExpenseIt seguir mostra ambas as páginas do aplicativo com controles, layout, estilos, vinculação de dados e modelos de dados aplicados:The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

Ambas as páginas do aplicativo mostrando a lista de nomes e um relatório de despesas.

Observação

Esta amostra demonstra uma característica específica do WPF e não segue todas as práticas recomendadas para coisas como segurança, localização e acessibilidade.This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. Para obter uma cobertura abrangente das práticas recomendadas de desenvolvimento de aplicativos .NET, consulte os seguintes tópicos:For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:

Próximas etapasNext steps

Neste passo a passo você aprendeu uma série de técnicas para criar uma UI usando o Windows Presentation Foundation (WPF).In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Agora você deve ter uma compreensão básica dos blocos de construção de um aplicativo .NET vinculado a dados.You should now have a basic understanding of the building blocks of a data-bound .NET app. Para obter mais informações sobre os modelos de arquitetura e programação do WPF, consulte os seguintes tópicos:For more information about the WPF architecture and programming models, see the following topics:

Para obter mais informações sobre como criar aplicativos, consulte os seguintes tópicos:For more information about creating applications, see the following topics:

Confira tambémSee also