Compartilhar via

Demonstra Passo a passo: Organizar conteú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 Windows Presentation Foundation (WPF).

Pré-requisitos

É necessário o 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 Visual C# chamado ArrangeElementHost.

Observação

Ao hospedar conteúdo do WPF, haverá suporte apenas para projetos em 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 do tipo de controle, UserControl1.xaml. Para obter mais informações, consulte Instruções passo a passo: como criar novo conteúdo WPF nos Windows Forms em tempo de design.

  2. No modo de exibição de Design, verifique se UserControl1 está selecionado.

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

  4. Defina o Background valor da propriedade como Blue.

  5. Compile o projeto.

Controles WPF de host em um painel de layout

Você pode usar controles WPF nos painéis de layout da mesma maneira que você usa outros controles dos Windows Forms.

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

  2. Na caixa de ferramentas, arraste um TableLayoutPanel controle para o formulário.

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

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

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

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

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

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

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

    Ambos os ElementHost controles são redimensionados para se adequarem ao novo layout.

Usar snaplines para alinhar controles WPF

Guias de alinhamento permitem fácil alinhamento de controles em um formulário. Você também pode usar guias de alinhamento para alinhar os controles WPF. Para obter mais informações, consulte Instruções passo a passo: organizando controles nos Windows Forms usando guias de alinhamento.

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

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

  2. Usando snaplines, alinhe a borda esquerda do com a borda esquerda do elementHost3TableLayoutPanel controle.

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

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

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

  6. Afaste-o do TableLayoutPanel controle até que o elementHost3 snapline 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 com a borda esquerda do elementHost1.

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

Controles WPF de ancoragem e ancoragem

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

  1. Selecione elementHost1.

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

  3. Redimensione o TableLayoutPanel controle para um tamanho maior.

    O controle elementHost1 será redimensionado para preencher a célula.

  4. Selecione elementHost2.

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

    O controle elementHost2 será redimensionado para preencher a célula.

  6. Selecione o controle TableLayoutPanel.

  7. Defina o valor de sua Dock propriedade como Top.

  8. Selecione elementHost3.

  9. Defina o valor de sua Dock propriedade como Fill.

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

  10. Redimensione o formulário.

    Todos os três ElementHost controles são redimensionados adequadamente.

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

Confira também