Compartilhar via

Passo a passo: organizar o conteúdo do WPF no Windows Forms em tempo de design

  • Artigo

Este artigo mostra como usar os recursos de layout do Windows Forms, como ancoragem e snaplines, para organizar controles do WPF (Windows Presentation Foundation).

Pré-requisitos

Você precisa do Visual Studio para concluir este passo a passo.

Criar o projeto

Abra o Visual Studio e crie um novo projeto de Aplicativo do Windows Forms no Visual Basic ou no Visual C# chamado ArrangeElementHost.

Nota

Ao hospedar conteúdo do WPF, há suporte apenas para projetos C# e Visual Basic.

Criar o controle WPF

Depois de adicionar um controle WPF ao projeto, você pode organizá-lo no formulário.

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

  2. No modo Design, verifique se UserControl1 está selecionado.

  3. Na janela de propriedades do , defina os valores das propriedades e como 200.

  4. Defina o valor da propriedade Background como Blue.

  5. Compile o projeto.

Hospedar controles do WPF em um painel de layout

Você pode usar controles WPF em painéis de layout da mesma forma que usa outros controles do Windows Forms.

  1. Abra Form1 no Designer de Formulários do Windows.

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

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

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

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

  7. Na janela Estrutura de Tópicos do Documento, selecione tableLayoutPanel1.

  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.

Usar snaplines para alinhar controles do WPF

Os snaplines habilitam o alinhamento fácil de controles em um formulário. Você também pode usar snaplines para alinhar seus controles do WPF. Para obter mais informações, consulte Passo a passo: organizando controles em Windows Forms usando Snaplines.

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

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

  2. Usando guias de alinhamento, alinhe a borda esquerda de elementHost3 com a borda esquerda do controle TableLayoutPanel.

  3. Usando guias de alinhamento, ajuste elementHost3 para a mesma largura do controle TableLayoutPanel.

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

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

  6. Mova o elementHost3 para longe do controle TableLayoutPanel até que a guia de alinhamento central apareça novamente. A guia de alinhamento central agora indica uma margem de 20.

  7. Mova elementHost3 para a direita até que sua borda esquerda se alinhe à borda esquerda de elementHost1.

  8. Altere a largura de elementHost3 até que sua borda direita se alinhe à borda direita de elementHost2.

Ancorar e encaixar controles WPF

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

  1. Selecione elementHost1.

  2. Na janela Propriedades, defina a propriedade Anchor como Superior, Inferior, Esquerda, Direita.

  3. Redimensione o controle TableLayoutPanel para um tamanho maior.

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

  4. Selecione elementHost2.

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

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

  6. Selecione o controle TableLayoutPanel.

  7. Defina o valor da propriedade Dock dela como Top.

  8. Selecione elementHost3.

  9. Defina o valor da propriedade Dock dela como Fill.

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

  10. Redimensione o formulário.

    Todos os três controles ElementHost se redimensionam adequadamente.

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

Consulte também