Partilhar via

Tutorial: Criar seu primeiro aplicativo WPF no Visual Studio 2019

  • Artigo

Este artigo mostra como desenvolver um aplicativo de área de trabalho do Windows Presentation Foundation (WPF) que inclui os elementos comuns à maioria dos aplicativos WPF: marcação XAML (Extensible Application Markup Language), code-behind, definições de aplicativo, controles, layout, vinculação de dados e estilos. Para desenvolver o aplicativo, você usará o Visual Studio.

Importante

Este artigo foi escrito para .NET Framework. Para começar a usar o .NET 7, consulte Tutorial: Criar um novo aplicativo WPF (WPF .NET).

Neste tutorial, você aprenderá a:

  • Crie um projeto WPF.
  • Use XAML para projetar a aparência da interface do usuário (UI) do aplicativo.
  • Escreva código para criar o comportamento do aplicativo.
  • Crie uma definição de aplicativo para gerenciar o aplicativo.
  • Adicione controles e crie o layout para compor a interface do usuário do aplicativo.
  • Crie estilos para uma aparência consistente em toda a interface do usuário do aplicativo.
  • Associe a interface do usuário aos dados, tanto para preencher a interface do usuário a partir dos dados quanto para manter os dados e a interface do usuário sincronizados.

No final do tutorial, você terá criado um aplicativo autônomo do Windows que permite que os usuários visualizem relatórios de despesas para pessoas selecionadas. O aplicativo é composto por várias páginas WPF que são hospedadas em uma janela de estilo navegador.

Dica

O código de exemplo usado neste tutorial está disponível para Visual Basic e C# em Tutorial WPF App Sample Code.

Você pode alternar a linguagem de código do código de exemplo entre C# e Visual Basic usando o seletor de idioma na parte superior desta página.

Pré-requisitos

  • Visual Studio 2019 com a carga de trabalho de desenvolvimento de aplicações desktop .NET instalada.

    Para obter mais informações sobre como instalar a versão mais recente do Visual Studio, consulte Instalar o Visual Studio.

Criar o projeto de aplicativo

A primeira etapa é criar a infraestrutura do aplicativo, que inclui uma definição de aplicativo, duas páginas e uma imagem.

  1. Crie um novo projeto de aplicativo WPF no Visual Basic ou Visual C# chamado ExpenseIt:

    1. Abra o Visual Studio e selecione Criar um novo projeto no menu Primeiros passos.

      Abre-se a caixa de diálogo Criar um novo projeto.

    2. Na lista suspensa de Language, selecione C# ou Visual Basic.

    3. Selecione o Aplicativo WPF (.NET Framework) como modelo e, depois, selecione Avançar.

      Dialogo para criar um novo projeto

      A caixa de diálogo Configurar seu novo projeto é aberta.

    4. Introduza o nome do projeto ExpenseIt e, em seguida, selecione Criar.

      Configurar diálogo de um novo projeto

      O Visual Studio cria o projeto e abre o designer para a janela do aplicativo padrão chamada MainWindow.xaml.

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

    Esse arquivo XAML define um aplicativo WPF e quaisquer recursos do aplicativo. Você também usa esse arquivo para especificar a interface do usuário, neste caso MainWindow.xaml, que mostra automaticamente quando o aplicativo é iniciado.

    Seu XAML deve ter a seguinte aparência no 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#:

    <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.

    Esse arquivo XAML é a janela principal do seu aplicativo e exibe o conteúdo criado nas páginas. A classe Window define as propriedades de uma janela, como seu título, tamanho ou ícone, e manipula eventos, como fechar ou ocultar.

  4. Altere o elemento Window para um NavigationWindow, conforme mostrado no seguinte 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 conteúdo diferente, dependendo da entrada do usuário. É por isso que o Window principal precisa ser mudado para um NavigationWindow. NavigationWindow herda todas as propriedades de Window. O elemento NavigationWindow no arquivo XAML cria uma instância da classe NavigationWindow. Para obter mais informações, consulte Visão geral da navegação .

  5. Remova os elementos Grid entre as tags NavigationWindow.

  6. Altere as seguintes propriedades no código XAML para o elemento NavigationWindow:

    • Defina a propriedade Title como "ExpenseIt".

    • Configure a propriedade Height para 350 píxeis.

    • Defina a propriedade Width como 500 píxeis.

    Seu XAML deve ter a seguinte aparência para 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#:

    <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.

    Esse arquivo é um arquivo code-behind que contém código para manipular os eventos declarados em MainWindow.xaml. Este arquivo contém uma classe parcial para a janela definida em XAML.

  8. Se você estiver usando C#, altere a classe MainWindow para derivar de NavigationWindow. (No Visual Basic, isso acontece automaticamente quando você altera a janela em XAML.) Seu código C# agora deve ter esta aparência:

    
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 ficheiros à aplicação

Nesta seção, você adicionará duas páginas e uma imagem ao aplicativo.

  1. Adicione uma nova página ao projeto e nomeie-a ExpenseItHome.xaml:

    1. No Gerenciador de Soluções , clique no botão direito no nó de projeto ExpenseIt e escolha Adicionar >Página.

    2. Na caixa de diálogo Adicionar Novo Item, o modelo de Página (WPF) já está selecionado. Introduza o nome ExpenseItHomee, em seguida, selecione Adicionar.

    Esta página é a primeira página exibida quando o aplicativo é iniciado. Ele mostrará uma lista de pessoas para selecionar, para mostrar um relatório de despesas.

  2. Abra ExpenseItHome.xaml.

  3. Defina o Title como "ExpenseIt - Home".

  4. Defina o DesignHeight para 350 pixels e o DesignWidth para 500 pixels.

    O XAML agora aparece da seguinte forma para 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 exemplo seguinte para 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.

  6. Adicione uma propriedade Source ao elemento NavigationWindow e defina-a como "ExpenseItHome.xaml".

    Isso define ExpenseItHome.xaml como a primeira página aberta quando o aplicativo é iniciado.

    Exemplo de XAML no 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#:

    <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 Source na categoria Miscellaneous da janela Properties.

    propriedade

  7. Adicione outra nova página WPF ao projeto e nomeie-a ExpenseReportPage.xaml::

    1. No Explorador de Soluções , clique com o botão direito do mouse no nó de projeto ExpenseIt e escolha Adicionar>Página.

    2. Na caixa de diálogo Adicionar Novo Item, selecione o modelo Página (WPF). Introduza o nome ExpenseReportPagee, em seguida, selecione Adicionar.

    Esta página mostrará o relatório de despesas da pessoa selecionada na página ExpenseItHome.

  8. Abra ExpenseReportPage.xaml.

  9. Defina o Title como "ExpenseIt - View Expense".

  10. Defina o DesignHeight para 350 pixels e o DesignWidth para 500 pixels.

    ExpenseReportPage.xaml agora se parece com o seguinte no 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#:

    <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. Abra ExpenseItHome.xaml.vb e ExpenseReportPage.xaml.vbou ExpenseItHome.xaml.cs e ExpenseReportPage.xaml.cs.

    Quando você cria um novo arquivo Page, o Visual Studio cria automaticamente seu code-behind arquivo. Esses arquivos code-behind manipulam a lógica para responder à entrada do usuário.

    Seu código deve ter a seguinte aparência para 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

    Como o seguinte para 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. Você pode criar sua própria imagem, copiar o arquivo do código de exemplo ou obtê-lo do repositório microsoft/WPF-Samples GitHub.

    1. Clique com o botão direito no nó do projeto e selecione Adicionar Item Existente>, ou pressione Shift+Alt+A.

    2. Na caixa de diálogo Adicionar Item Existente, defina o filtro de arquivo como Todos os Arquivos ou Arquivos de Imagem, procure o arquivo de imagem que pretende usar e, em seguida, selecione Adicionar.

    3. Selecione o arquivo de imagem no Gerenciador de Soluções e, em seguida, na janela de Propriedades , defina a Ação de Criação para Recurso .

Compilar e executar o aplicativo

  1. Para criar e executar o aplicativo, pressione F5 ou selecione Iniciar Depuração no menu Depurar.

    A ilustração a seguir mostra o aplicativo com os botões NavigationWindow:

    aplicação após compilar e executar.

  2. Feche o aplicativo para retornar ao Visual Studio.

Criar o layout

O layout fornece uma maneira ordenada de colocar elementos da interface do usuário e também gerencia o tamanho e a posição desses elementos quando uma interface do usuário é redimensionada. Normalmente, você cria um layout com um dos seguintes controles de layout:

  • Canvas - Define uma área na qual você pode posicionar explicitamente elementos filho usando coordenadas relativas à área Canvas.
  • DockPanel - Define uma área onde você pode organizar os elementos filho horizontal ou verticalmente, em relação uns aos outros.
  • Grid - Define uma área de grade flexível que consiste em colunas e linhas.
  • StackPanel - Organiza os elementos filho em uma única linha que pode ser orientada horizontal ou verticalmente.
  • VirtualizingStackPanel - Organiza e virtualiza o conteúdo em uma única linha orientada horizontal ou verticalmente.
  • WrapPanel - Posiciona elementos filho em posição sequencial da esquerda para a direita, quebrando o conteúdo para a próxima linha na borda da caixa de contenção. A ordenação subsequente acontece sequencialmente de cima para baixo ou da direita para a esquerda, dependendo do valor da propriedade Orientation.

Cada um desses controlos de layout suporta um tipo específico de layout para os seus elementos descendentes. ExpenseIt páginas podem ser redimensionadas e cada página tem elementos dispostos horizontal e verticalmente ao lado de outros elementos. Neste exemplo, o Grid é usado como elemento de layout para o aplicativo.

Dica

Para obter mais informações sobre os elementos Panel, consulte a visão geral dos painéis . Para obter mais informações sobre layout, consulte Layout.

Nesta seção, você cria uma tabela de coluna única com três linhas e uma margem de 10 pixels adicionando definições de coluna e linha ao Grid no ExpenseItHome.xaml.

  1. Em ExpenseItHome.xaml, defina a propriedade Margin no elemento Grid como "10,0,10,10", que corresponde às margens esquerda, superior, direita e inferior:

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

    Dica

    Você também pode definir os valores de margem na janela de Propriedades, na categoria de Layout:

    Valores de margem na janela Propriedades

  2. Adicione o seguinte XAML entre as marcas Grid para criar as definições de linha e coluna:

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

    A Height de duas linhas é definida como Auto, o que significa que as linhas são dimensionadas com base no conteúdo das linhas. O Height padrão é o dimensionamento Star, o que significa que a altura da linha é uma proporção ponderada do espaço disponível. Por exemplo, se duas linhas tiverem cada uma uma Height de "*", cada uma delas terá uma altura que é metade do espaço disponível.

    O seu Grid agora deve conter o seguinte 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 controlos

Nesta seção, você atualizará a interface do usuário da página inicial para mostrar uma lista de pessoas, onde selecionará uma pessoa para exibir seu relatório de despesas. Os controles são objetos da interface do usuário que permitem que os usuários interajam com seu aplicativo. Para obter mais informações, consulte Controls.

Para criar essa interface do usuário, você adicionará os seguintes elementos ao ExpenseItHome.xaml:

  • Um ListBox (para a lista de pessoas).
  • Um Label (para o cabeçalho da lista).
  • Um Button (para clicar para exibir o relatório de despesas da pessoa selecionada na lista).

Cada controle é colocado em uma linha do Grid definindo a propriedade Grid.Row anexada. Para mais informações sobre propriedades anexadas, consulte Visão Geral das Propriedades Anexadas.

  1. No ExpenseItHome.xaml, adicione o seguinte XAML em algum lugar entre as tags Grid:

    
<!-- 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,10" 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 .

  2. Compile e execute o aplicativo.

    A ilustração a seguir mostra os controles que você criou:

captura de tela de exemplo ExpenseIt exibindo uma lista de nomes

Adicionar uma imagem e um título

Nesta seção, você atualizará a interface do usuário da página inicial com uma imagem e um título de página.

  1. No ExpenseItHome.xaml, adicione outra coluna ao ColumnDefinitions com uma Width fixa de 230 pixels:

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>

  2. Adicione outra linha ao RowDefinitions, para um total de quatro linhas:

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

  3. Mova os controles para a segunda coluna definindo a propriedade Grid.Column como 1 em cada um dos três controles (Border, ListBox e Button).

  4. Mova cada controle para baixo em uma linha incrementando seu valor Grid.Row em 1 para cada um dos três controles (Border, ListBox e Button) e para o elemento Border.

    O XAML para os três controles agora se parece com o seguinte:

      <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 a propriedade Background para o arquivo de imagem watermark.png, adicionando o seguinte XAML em qualquer lugar entre as tags <Grid> e </Grid>:

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. Antes do elemento Border, adicione um Label com o conteúdo "Exibir relatório de despesas". Este rótulo é o título da página.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

  7. Compile e execute o aplicativo.

A ilustração a seguir mostra os resultados do que você acabou de adicionar:

captura de tela de exemplo do ExpenseIt mostrando o novo plano de fundo da imagem e o título da página

Adicionar código para manipular eventos

  1. No ExpenseItHome.xaml, adicione um manipulador de eventos Click ao elemento Button. Para obter mais informações, consulte Como criar um manipulador de eventos simples.

      <!-- 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 ou ExpenseItHome.xaml.cs.

  3. Adicione o seguinte código à classe ExpenseItHome para adicionar um manipulador de eventos de clique em botão. O manipulador de eventos abre a página ExpenseReportPage.

    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 interface do usuário para ExpenseReportPage

ExpenseReportPage.xaml exibe o relatório de despesas da pessoa selecionada na página ExpenseItHome. Nesta seção, você criará a interface do usuário para ExpenseReportPage. Você também irá adicionar cores de fundo e de preenchimento aos vários elementos da interface de utilizador.

  1. Abra ExpenseReportPage.xaml.

  2. Adicione o seguinte XAML entre as marcas Grid:

     <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 interface de utilizador é semelhante a ExpenseItHome.xaml, exceto que os dados do relatório são exibidos em um DataGrid.

  3. Compile e execute o aplicativo.

  4. Selecione o botão Ver.

    A página do relatório de despesas é exibida. Repare também que o botão de navegação voltar está ativado.

A ilustração a seguir mostra os elementos da interface do usuário adicionados ao ExpenseReportPage.xaml.

captura de tela de exemplo de ExpenseIt mostrando a interface do usuário recém-criada para o ExpenseReportPage.

Controles de estilo

A aparência de vários elementos geralmente é a mesma para todos os elementos do mesmo tipo em uma interface do usuário. A IU utiliza estilos para tornar as aparências reutilizáveis em múltiplos elementos. A reutilização de estilos ajuda a simplificar a criação e o gerenciamento de XAML. Esta seção substitui os atributos por elemento que foram definidos nas etapas anteriores por estilos.

  1. Abra Application.xaml ou App.xaml.

  2. Adicione o seguinte XAML entre as tags Application.Resources:

    
<!-- 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>

    Este XAML adiciona os seguintes estilos:

    • headerTextStyle: Para formatar o título da página Label.

    • labelStyle: Para formatar os controles Label.

    • columnHeaderStyle: Para formatar o DataGridColumnHeader.

    • listHeaderStyle: Formatar os controlos do cabeçalho da lista Border.

    • listHeaderTextStyle: Para formatar o cabeçalho da lista Label.

    • buttonStyle: Para formatar o Button em ExpenseItHome.xaml.

    Observe que os estilos são recursos e filhos do elemento de propriedade Application.Resources. Neste local, os estilos são aplicados a todos os elementos em um aplicativo. Para obter um exemplo de uso de recursos em um aplicativo .NET, consulte Usar recursos de aplicativo.

  3. No ExpenseItHome.xaml, substitua tudo entre os elementos Grid pelo seguinte 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 pela aplicação dos estilos. Por exemplo, o headerTextStyle é aplicado ao Label"Exibir relatório de despesas".

  4. Abra ExpenseReportPage.xaml.

  5. Substitua tudo entre os elementos Grid pelo seguinte 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 estilos aos elementos Label e Border.

  6. Compile e execute o aplicativo. A aparência da janela é a mesma que anteriormente.

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

  7. Feche o aplicativo para retornar ao Visual Studio.

Vincular dados a um controle

Nesta seção, você criará os dados XML vinculados a vários controles.

  1. No ExpenseItHome.xaml, após a abertura do elemento Grid, adicione o seguinte XAML para criar um XmlDataProvider que contenha os dados de cada pessoa:

    <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 recurso Grid. Normalmente, esses dados seriam carregados como um arquivo, mas para simplificar, os dados são adicionados em linha.

  2. Dentro do elemento <Grid.Resources>, adicione o seguinte elemento <xref:System.Windows.DataTemplate>, que define como exibir os dados no ListBox, após o elemento <XmlDataProvider>:

    <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 da modelagem de dados.

  3. Substitua o ListBox existente pelo seguinte XAML:

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

    Esse XAML vincula a propriedade ItemsSource do ListBox à fonte de dados e aplica o modelo de dados como o ItemTemplate.

Conectar dados a controles

Em seguida, você adicionará código para recuperar o nome selecionado na página ExpenseItHome e passá-lo para o construtor de ExpenseReportPage. ExpenseReportPage define seu contexto de dados com o item passado, ao qual os controles definidos em ExpenseReportPage.xaml se vinculam.

  1. Abra ExpenseReportPage.xaml.vb ou ExpenseReportPage.xaml.cs.

  2. Adicione um construtor que aceite um objeto para que possa passar os dados do relatório de despesas da pessoa selecionada.

    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 ou ExpenseItHome.xaml.cs.

  4. Altere o manipulador de eventos Click para chamar o novo construtor passando os dados do relatório de despesas da pessoa selecionada.

    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

Estilizar dados com modelos de dados

Nesta seção, você atualizará a interface do usuário para cada item nas listas associadas a dados usando modelos de dados.

  1. Abra ExpenseReportPage.xaml.

  2. Vincule o conteúdo dos elementos de Label "Nome" e "Departamento" à propriedade de fonte de dados apropriada. Para obter mais informações sobre vinculação de dados, consulte Visão geral da vinculação de dados.

    <!-- 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 a abertura do elemento Grid, adicione os seguintes modelos de dados, que definem como exibir os dados do relatório de despesas:

    <!--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 os elementos DataGridTextColumn por DataGridTemplateColumn sob o elemento DataGrid e aplique os modelos a eles. Além disso, especifique o atributo ItemsSource com seu valor no elemento DataGrid.

    <!-- 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. Compile e execute o aplicativo.

  6. Selecione uma pessoa e, em seguida, selecione o botão Ver.

A ilustração a seguir mostra ambas as páginas do aplicativo ExpenseIt com controles, layout, estilos, vinculação de dados e modelos de dados aplicados:

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

Observação

Este exemplo demonstra um recurso específico do WPF e não segue todas as práticas recomendadas para coisas como segurança, localização e acessibilidade. Para obter uma cobertura abrangente do WPF e das práticas recomendadas de desenvolvimento de aplicativos .NET, consulte os seguintes tópicos:

Próximos passos

Neste passo a passo, você aprendeu várias técnicas para criar uma interface do usuário usando o 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. Para obter mais informações sobre a arquitetura WPF e modelos de programação, consulte os seguintes tópicos:

Para obter mais informações sobre como criar aplicativos, consulte os seguintes tópicos:

Ver também