Partilhar via


Demonstra Passo a passo: Organizando o conteúdo do WPF no Windows Forms em tempo de Design

Essa explicação passo a passo mostra como usar os recursos de layout dos Formulários do Windows, como snaplines e a ancoragem para organizar controles do Windows Presentation Foundation (WPF).

Nesta explicação passo a passo, você executa as seguintes tarefas:

  • Criar o projeto.

  • Crie o controle WPF.

  • Hospedar controles WPF em um painel de layout.

  • Usar snaplines para alinhar controles WPF.

  • Âncorar e encaixar controles WPF.

ObservaçãoObservação

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritos na Ajuda, dependendo das configurações ativas ou configurações de edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

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

  • Visual Studio 2010.

Criando o projeto

A primeira etapa é criar um projeto de Formulário Windows.

ObservaçãoObservação

Quando hospedar conteúdo WPF, apenas projetos C# e Visual Basic são suportados.

Para criar o projeto

Criando o controle WPF

Após adicionar um controle WPF para o projeto, você pode organizá-lo no formulário.

Para criar controles WPF

  1. Adicione um novo UserControl WPF ao projeto Use o nome padrão para o tipo de controle, UserControl1.xaml. Para obter mais informações, consulte Demonstra Passo a passo: Criando novo conteúdo WPF no Windows Forms em tempo de Design.

  2. No modo de exibição de design, veja se UserControl1 está selecionada. Para obter mais informações, consulte Como: Selecionar e mover elementos na superfície de design.

  3. Na janela Propriedades, defina o valor das properties Width e Height como 200.

  4. Defina o valor da propriedade Background como Azul.

  5. Crie o projeto.

Hospedando controles WPF em um painel de layout.

Você pode usar controles WPF nos painéis de layout da mesma forma que você usa outros controles dos Formulários do Windows.

Para hospedar controles WPF em um painel de layout.

  1. Abra Form1 no Windows Forms Designer.

  2. Na Caixa de Ferramentas, arraste um controle TableLayoutPanel para o formulário.

  3. No painel de marcas inteligentes do controle TableLayoutPanel, selecione Remover Última Linha.

  4. Redimensione o controle TableLayoutPanel para uma largura e altura maior.

  5. Na Caixa de Ferramentas , clique duas vezes em UserControl1 para criar uma instância de UserControl1 na primeira célula do controle TableLayoutPanel.

    A instância de UserControl1 está hospedada em um novo controle ElementHost chamado elementHost1.

  6. Na Caixa de Ferramentas, clique duas vezes em UserControl1 para criar outra instância na segunda célula do controle TableLayoutPanel.

  7. Na janela Estrutura do Documento, selecione tableLayoutPanel1. Para obter mais informações, consulte A janela da estrutura do documento.

  8. Na janela Propriedades,defina o valor da propriedade Padding como 10, 10, 10, 10.

    Ambos os controles ElementHost são redimensionados para caber no novo layout.

Usando Snaplines para alinhar controles WPF

Snaplines permitem fácil alinhamento de controles em um formulário. Você pode usar snaplines para alinhar os controles WPF também. Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles em Windows Forms usando linhas de ajuste.

Para usar snaplines para alinhar controles WPF.

  1. Da Caixa de Ferramentas , arraste uma instância de UserControl1 para o formulário e coloque-o no espaço abaixo do controle TableLayoutPanel.

    A instância de UserControl1 está hospedada em um novo controle ElementHost chamado elementHost3.

  2. Usando snaplines, alinhe a borda esquerda de elementHost3 com a extremidade esquerda do controle TableLayoutPanel.

  3. Usando snaplines, dimensione elementHost3 para a mesma largura que o controle TableLayoutPanel.

  4. Mova elementHost3 em direção ao controle TableLayoutPanel até que apareça uma snapline de centro entre os controles.

  5. Na janela Propriedades, defina o valor da propriedade Margin como 20, 20, 20, 20.

  6. Mova o elementHost3 para fora do controle TableLayoutPanel até que a snapline do centro apareça novamente. O centro snapline agora indica uma margem de 20.

  7. Mova elementHost3 para a direita, até que sua borda esquerda alinhe com a extremidade esquerda de elementHost1.

  8. Altere a largura do elementHost3 até a borda direita alinhe com a extremidade direita de elementHost2.

Ancorando e Encaixando controles WPF

Um controle WPF hospedado em um formulário tem o mesmo comportamento de ancoragem e encaixe de outros controles de Formulários do Windows.

Para ancorar e encaixar controles WPF.

  1. Selecione elementHost1.

  2. Na janela Properties, defina a propriedade Anchor para Superior, Inferior, Esquerda, Direita.

  3. Redimensione o controle TableLayoutPanel para um tamanho maior.

    O controle elementHost1 redimensiona-se para preencher a célula.

  4. Selecione elementHost2.

  5. Na janela Propriedades,defina o valor da propriedade Dock como Fill.

    O controle elementHost2 redimensiona-se para preencher a célula.

  6. Selecione o controle TableLayoutPanel.

  7. Defina o valor da propriedade Dock como Top.

  8. Selecione elementHost3.

  9. Defina o valor da propriedade Dock como Fill.

    O controle elementHost3 redimensiona-se para preencher o espaço restante no formulário.

  10. Redimensione o formulário.

    Todos os três controles ElementHost redimensionam-se de forma apropriada.

    Para obter mais informações, consulte Como: Ancorar e ancorar controles filho em um controle TableLayoutPanel.

Consulte também

Tarefas

Como: Ancorar e ancorar controles filho em um controle TableLayoutPanel

Como: Alinhar um controle para as bordas dos formulários em tempo de Design

Demonstra Passo a passo: Organizando controles em Windows Forms usando linhas de ajuste

Referência

ElementHost

WindowsFormsHost

Outros recursos

Migração e Interoperabilidade

Usando os controles do WPF

WPF Designer