Demonstra Passo a passo: Guia de Introdução do WPF

Artigo
08/04/2011

Atualização: December 2010

Esta explicação passo a passo fornece uma introdução ao desenvolvimento de um Windows Presentation Foundation (WPF) aplicativo, que inclui os elementos que são comuns à maioria WPF aplicativos: Extensible Application Markup Language (XAML)marcação, code-behind, definições de aplicativo, controles, layout, ligação de dados e estilos.

Esta explicação passo a passo orienta durante o desenvolvimento de uma simples WPF aplicativo usando as seguintes etapas.

Definindo XAML para projetar a aparência do aplicativo user interface (UI).
Writing code to build the application's behavior.
Creating an application definition to manage the application.
Adicionando controles e criando o layout para redigir o aplicativo UI.
Creating styles to create a consistent appearance throughout an application's UI.
Binding the UI to data to both populate the UI from data and keep the data and UI synchronized.

No final da explicação, você será criado um autônomo Windows aplicativo que permite aos usuários exibir relatórios de despesas para pessoas selecionadas. The application will be composed of several WPF pages that are hosted in a browser-style window.

O código de exemplo é usado para criar este passo a passo está disponível para o Microsoft Visual Basic e C# em Introdução à criação de aplicativos WPF.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio 2010

Para obter mais informações sobre como instalar o Visual Studio, consulte Instalando o Visual Studio.

Criando o projeto de aplicativo

Nesta seção, você pode criar a infra-estrutura de aplicativos, que inclui uma definição de aplicativo, de duas páginas e de uma imagem.

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

Observação

Esta explicação passo a passo usa o controle deDataGrid que está disponível na.NET Framework 4.Ter certeza de que seus destinos do projeto a.NET Framework 4.For more information, see Como: Destino de um específico.NET Framework versão ou perfil.

Abra Application (Visual Basic) ou ser (C#).

Isso XAML arquivo define um WPF aplicativo e os recursos de aplicativo. Você também usa este arquivo para especificar o UI mostra que automaticamente quando o aplicativo é iniciado; Nesse caso, MainWindow. XAML.

O XAML deve esta aparência no Visual Basic:

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

    </Application.Resources>
</Application>

Ou assim no C#:

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

    </Application.Resources>
</Application>

Abra MainWindow. XAML.

Isso XAML arquivo é a janela principal do seu aplicativo e exibe o conteúdo criado em páginas. O Window classe define as propriedades de uma janela, como título, tamanho ou no ícone e trata os eventos, como o fechamento ou ocultar.
Alterar o Window elemento para um NavigationWindow.

Este aplicativo navegará para conteúdo diferente dependendo da interação do usuário. Portanto, o principal Window precisa ser alterado para um NavigationWindow. NavigationWindowherda todas as propriedades de Window. O NavigationWindow o elemento no arquivo XAML cria uma instância da NavigationWindow classe. For more information, see Visão geral de navegação.

Alterar as propriedades a seguir sobre o NavigationWindow elemento:

Definir o Title propriedade para "expenseit".
Definir o Width propriedade para 500 pixels.
Definir o Height propriedade 350 pixels.
Remover o Grid elementos entre a NavigationWindow marcas.

O XAML deve esta aparência no Visual Basic:

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

</NavigationWindow>

Ou assim no C#:

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

</NavigationWindow>

Abra MainWindow.xaml.vb ou MainWindow.xaml.cs.

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

Se você estiver usando o C#, altere o MainWindow classe derivar de NavigationWindow.

No Visual Basic, isso acontece automaticamente quando você altera a janela em XAML.

Seu código deve ter esta aparência.

Class MainWindow

End Class

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();
        }
    }
}

Adição de arquivos para o aplicativo.

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

Adicionar uma nova página (WPF) para o projeto chamado ExpenseItHome.xaml. For more information, see Como: Adicionar novos itens a um projeto WPF.

Esta página é a primeira página que é exibida quando o aplicativo é iniciado. Ela mostrará uma lista de pessoas a partir da qual um usuário pode selecionar uma pessoa para mostrar um relatório de despesas para.
Abra ExpenseItHome.xaml.

Definir o Title para "expenseit - Home".

O XAML deve esta aparência no Visual Basic:

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

    </Grid>
</Page>

Ou isso em C#:

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

    <Grid>

    </Grid>
</Page>

Abra MainWindow. XAML.

Definir o Source propriedade no NavigationWindow para "ExpenseItHome.xaml".

Isso define o ExpenseItHome.xaml para ser a primeira página aberta quando o aplicativo for iniciado. O XAML deve esta aparência no Visual Basic:

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

</NavigationWindow>

Ou isso em C#:

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

</NavigationWindow>

Adicionar uma nova página (WPF) para o projeto chamado ExpenseReportPage.xaml.

Essa página mostrará o relatório de despesas para a pessoa que está selecionada na ExpenseItHome.xaml.
Open ExpenseReportPage.xaml.

Definir o Title para "ExpenseIt - despesas do modo de exibição".

O XAML deve esta aparência no Visual Basic:

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

    </Grid>
</Page>

Ou isso em C#:

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

    <Grid>

    </Grid>
</Page>

Abra ExpenseItHome.xaml.vb e ExpenseReportPage.xaml.vb, ou ExpenseItHome.xaml.cs e ExpenseReportPage.xaml.cs.

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

Seu código deve ter esta aparência.

Class ExpenseItHome

End Class

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 ExpenseReportPage

End Class

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();
        }
    }
}

Adicione uma imagem chamada watermark.png para o projeto. Você pode criar sua própria imagem ou copiar o arquivo do código de exemplo. For more information, see Como: Adicionar itens existentes a um projeto.

Building and Running the Application

Nesta seção, você pode criar e executa o aplicativo.

Construir e executa o aplicativo pressionando F5 ou selecione Start Debugging partir do Debug menu.

A ilustração a seguir mostra o aplicativo com o NavigationWindow botões.
Feche o aplicativo para retornar à Visual Studio.

Creating the Layout

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:

Cada um desses controles de layout oferece suporte a um tipo especial de layout para seus elementos filho. ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. Consequently, the Grid is the ideal layout element for the application.

Observação

Para obter mais informações sobre Panel elementos, consulte Panels Overview.Para obter mais informações sobre o layout, consulte Sistema de layout.

Na seção, crie uma única coluna de tabela com três linhas e uma margem de 10 pixels adicionando definições de coluna e linha para o Grid em ExpenseItHome.xaml.

Abra ExpenseItHome.xaml.
Definir o Margin propriedade no Grid elemento para "10,0,10,10" que corresponde às margens esquerda, superior, direita e inferior.
Adicione o seguinte XAML entre o Grid marcas para criar definições de linha e coluna.
```
<Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
```
O Height de duas linhas é definido como Auto que significa que serão dimensionadas as linhas de base no conteúdo de linhas. O padrão Height é Star dimensionamento, o que significa que a linha será uma proporção ponderada de espaço disponível. Por exemplo, se duas linhas tem uma altura de "*", eles terão, cada uma altura em que é a metade do espaço disponível.

O Grid deve agora parecer com 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>
```

Adding Controls

Nesta seção, a home page UI é atualizado para mostrar uma lista de pessoas que os usuários podem selecionar para mostrar o relatório de despesas para a pessoa selecionada. Controles são objetos de interface do usuário que permitem aos usuários interagir com seu aplicativo. For more information, see Controles.

Para criar esse UI, os seguintes elementos são adicionados ao ExpenseItHome.xaml:

ListBox (for the list of people).
Label (for the list header).
Button (to click to view the expense report for the person that is selected in the list).

Cada controle é colocado em uma linha da Grid , definindo a Grid.Row anexado propriedade. Para obter mais informações sobre propriedades anexadas, consulte Attached Properties Overview.

Abra ExpenseItHome.xaml.

Adicione o seguinte XAML entre o Grid marcas.


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

Criar e executar o aplicativo.

A ilustração a seguir mostra os controles que são criados pelo XAML nesta seção.

Captura de tela de exemplo de ExpenseIt

Adicionando um título e uma imagem

Nesta seção, a home page UI é atualizado com uma imagem e um título de página.

Abra ExpenseItHome.xaml.

Adicione outra coluna para o ColumnDefinitions fixa Width de 230 pixels.

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

Adicionar outra linha para o RowDefinitions.

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

Mover os controles para a segunda coluna, definindo Grid.Column como 1. Mover cada controle para baixo uma linha, aumentando a Grid.Row por 1.

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

Definir o Background da Grid para ser o arquivo de imagem de watermark.png.

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

Antes de Border, adicione um Label com o conteúdo "relatório de despesas do modo de exibição" para ser 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>

Criar e executar o aplicativo.

A ilustração a seguir mostra os resultados desta seção.

Captura de tela de exemplo de ExpenseIt

Adicionando código para manipular eventos

Abra ExpenseItHome.xaml.

Adicionar um Click o manipulador de eventos para o Button elemento. 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>

Abra ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

Adicione o seguinte código para o Click o manipulador de eventos, que faz com que a janela navegar até o arquivo ExpenseReportPage.xaml.

        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

private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage();
    this.NavigationService.Navigate(expenseReportPage);

}

Criando a interface do usuário para ExpenseReportPage

ExpenseReportPage.xaml exibe o relatório de despesas para a pessoa que foi selecionada no ExpenseItHome.xaml. Esta seção adiciona controles e cria o UI para ExpenseReportPage.xaml. Esta seção também adiciona as cores de plano de fundo e o preenchimento para as várias UI elementos.

Open ExpenseReportPage.xaml.

Adicione o seguinte XAML entre o Grid marcas.

Essa interface do usuário é semelhante à interface do usuário criado em ExpenseItHome.xaml, exceto os dados do relatório são exibidos em um DataGrid.

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

Criar e executar o aplicativo.

Observação

Se você receber um erro que o DataGrid não foi encontrado ou não existe, certifique-se de que seus destinos do projeto a.NET Framework 4.For more information, see Como: Destino de um específico.NET Framework versão ou perfil.
Clique o Exibir botão.

Será exibida a página de relatório de despesas.

A ilustração a seguir mostra a UI os elementos adicionados ao ExpenseReportPage.xaml. Observe que o botão de navegação Voltar está habilitado.

Captura de tela de exemplo de ExpenseIt

Controles de estilo

A aparência de vários elementos pode geralmente ser o mesmo para todos os elementos do mesmo tipo em um UI. UIusa os estilos para tornar aparências reutilizáveis através de vários elementos. A capacidade de reutilização dos estilos ajuda a simplificar XAML criação e gerenciamento. For more information about styles, see Styling and Templating. Esta seção substitui os atributos por elemento que foram definidos nas etapas anteriores, com estilos.

Application ou ser aberto.

Adicione o seguinte XAML entre o Application.Resources marcas:


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

Isso XAML adiciona os seguintes estilos:

headerTextStyle: Para formatar o título da página Label.
labelStyle: Para formatar o Label controles.
columnHeaderStyle: Para formatar a DataGridColumnHeader.
listHeaderStyle: Para formatar o cabeçalho da lista Border controles.
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 seus filhos a Application.Resources elemento de propriedade. In this location, the styles are applied to all the elements in an application. For an example of using resources in a .NET Framework application, see Como: Usar Recursos do aplicativo.

Abra ExpenseItHome.xaml.

Substituir tudo entre os Grid elementos com o XAML a seguir.

<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 aplicando estilos. Por exemplo, o headerTextStyle é aplicado para o "relatório de despesas do modo de exibição" Label.

Open ExpenseReportPage.xaml.

Substituir tudo entre os Grid elementos com o XAML a seguir.

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

Isso adiciona estilos para o Label e Border elementos.

Criar e executar o aplicativo.

Após adicionar o XAML nesta seção, o aplicativo procura os mesmos como fazia antes sendo atualizados com estilos.

Ligação de dados para um controle.

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

Abra ExpenseItHome.xaml.

Após a abertura Grid elemento, adicione o seguinte XAML para criar um XmlDataProvider que contém os dados para cada pessoa.

Os dados são criados como um Grid recurso. Normalmente, isso seria carregado como um arquivo, mas para simplificar os dados são adicionados in-line.

<Grid.Resources>


...


<!-- Expense Report Data -->
<XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
    <x:XData>
        <Expenses >
            <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>

No Grid recurso, adicione o seguinte DataTemplate, que define como exibir os dados do ListBox. For more information about data templates, see Visão geral sobre Templating de dados.

<Grid.Resources>


...


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


...


</Grid.Resources>

Substituir o ListBox com o XAML a seguir.

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

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

Conectando a dados a controles

Nesta seção, você escreve o código que recupera o item atual que está selecionado na lista de pessoas na página ExpenseItHome.xaml e passa sua referência para o construtor da ExpenseReportPage durante a instanciação. ExpenseReportPageconjuntos de seu contexto de dados com o item passado, o que é o que os controles definidos no ExpenseReportPage.xaml vinculará a.

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

Adicione um construtor que leva a um objeto para passar os dados do relatório de despesas da pessoa selecionada.

    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

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;
    }

}

Abra ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

Alterar o Click o manipulador de eventos para chamar o construtor new, passando os dados do relatório de despesas da pessoa selecionada.

        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

private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);

}

Dados de estilo com os modelos de dados

Nesta seção, você atualiza o UI para cada item de dados vinculado listas usando modelos de dados.

Open ExpenseReportPage.xaml.

Vincular o conteúdo de "Nome" e "Departamento" Labelelementos para a propriedade da fonte de dados apropriado. For more information about data binding, see Revisão de Associaçã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>

Após a abertura Grid elemento, adicione os seguintes modelos de dados, que definem como exibir dados de 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>

Aplicar os modelos para o DataGrid colunas que exibem dados de relatório de despesas.

<!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >

    <DataGrid.Columns>
        <DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}"  />
        <DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" />
    </DataGrid.Columns>

</DataGrid>

Criar e executar o aplicativo.
Selecione uma pessoa e clique no Exibir botão.

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

Capturas de tela de exemplo de ExpenseIt

Best Practices

Este exemplo demonstra um recurso específico do WPF e, conseqüentemente, não segue as práticas recomendadas de desenvolvimento de aplicativo. Para uma cobertura abrangente de WPF e o .NET Framework práticas recomendadas de desenvolvimento de aplicativos, consulte os tópicos a seguir, conforme apropriado:

Accessibility - Práticas recomendadas de Acessibilidade
Security - Segurança (WPF)
Localization - Visão geral de globalização e localização do WPF
Desempenho-Optimizing WPF Application Performance

What's Next

You now have a number of techniques at your disposal for creating a UI using Windows Presentation Foundation (WPF). You should now have a broad understanding of the basic building blocks of a data-bound .NET Framework application. This topic is by no means exhaustive, but hopefully you also now have a sense of some of the possibilities you might discover on your own beyond the techniques in this topic.

Para obter mais informações sobre os modelos de arquitetura e a programação do WPF, consulte os seguintes tópicos:

Para obter mais informações sobre a criação de aplicativos, consulte os seguintes tópicos:

Consulte também

Conceitos

Panels Overview

Visão geral sobre Templating de dados

Building a WPF Application (WPF)

Outros recursos

Styles and Templates

Histórico de alterações

Date	History	Motivo
December 2010	Adicionado anotações sobre direcionamento.NET Framework 4.	Aprimoramento de informações.

December 2010

Adicionado anotações sobre direcionamento.NET Framework 4.

Aprimoramento de informações.

Demonstra Passo a passo: Guia de Introdução do WPF

Prerequisites

Criando o projeto de aplicativo

Adição de arquivos para o aplicativo.

Building and Running the Application

Creating the Layout

Adding Controls

Adicionando um título e uma imagem

Adicionando código para manipular eventos

Criando a interface do usuário para ExpenseReportPage

Controles de estilo

Ligação de dados para um controle.

Conectando a dados a controles

Dados de estilo com os modelos de dados

Best Practices

What's Next

Consulte também

Conceitos

Outros recursos

Histórico de alterações

Recursos adicionais