Ícone do site dfilitto

Personalizando os componentes com o Dock Panel no WPF

Danilo Filitto

O post Personalizando componentes com o DockPanel tem como objetivo explicar o funcionamento do Dock Panel e como utilizá-lo para personalizar componentes utilizados na Window do WPF. Nós utilizaremos o DockPanel com um container, que coordenará a forma como os componentes serão exibidos na tela e garantirá que a interface responda bem a alterações nas dimensões da janela.

Dock Panel

O Dock Panel é um painel de layout que fornece um encaixe de elementos (objetos) na esquerda, direita, superior, inferior ou no centro do painel. A forma de indicar o lado em que um objeto deve ser posicionado dentro do Dock Panel é por meio da propriedade Dock. Para encaixar um elemento para o centro do painel, ele deve ser o último filho do painel e a propriedade LastChildFill deve ser definido como verdadeiro.

Personalizando os componentes com o Dock Panel no WPF

Exemplos

1 Exemplo – DockPanel com apenas um elemento filho

<DockPanel>
  <Button Content=”Um botão”/>
</DockPanel>

O resultado deste código é ilustrado na Figura 1.

Figura 1.DockPanel com apenas um controle

2 Exemplo – DockPanel com vários elementos filhos com alinhamento padrão

<DockPanel>
      <Button Content=”Um botão”/>
      <Button Content=”Outro botão”/>
      <Button Content=”Mais um”/>
</DockPanel>
 Dessa vez, os dois primeiros são alinhados à esquerda, mantendo sua largura padrão, e o último ocupa todo o espaço restante, como mostra a Figura 2.

Figura 2.Vários elementos com alinhamento padrão

Para definir a posição em que cada elemento filho deve ser fixado, devemos definir em cada um a propriedade Dock como Bottom, Top, Left ou Right, o que os posicionaria na base, no topo, na esquerda ou na direita, respectivamente.

3 Exemplo – DockPanel com vários elementos filhos com alinhamento definido

<DockPanel>
      <Button Content=”Topo” DockPanel.Dock=”Top”/>
      <Button Content=”Base” DockPanel.Dock=”Bottom”/>
      <Button Content=”Esquerda” DockPanel.Dock=”Left”/>
      <Button Content=”Direita” DockPanel.Dock=”Right”/>
      <Button Content=”Centro”/>
  </DockPanel>

Figura 3.Vários elementos com alinhamento definido

A ordem em que os controles são adicionados ao DockPanel é importante, pois ela definirá quem tem a prioridade de ocupação do espaço na posição definida. O último elemento definido ocupará por padrão todo o espaço disponível do Dock Panel. Para desabilitar o comportamento padrão que faz com que o último controle filho ocupe todo o espaço restante, basta definir a propriedade LastChildFill do DockPanel como False, da seguinte forma: <DockPanel LastChildFill=”False”>. Isso fará com que o último elemento mantenha suas dimensões originais, mas respeitando o alinhamento definido para ele (ou o padrão à esquerda, caso não seja especificado).

Acesse nosso canal no YouTube para visualizar outros vídeos sobre programação, como por exemplo Python, Java e Desenvolvimento de sistemas comerciais utilizando a linguagem C#.

Parte do conteúdo da matéria foi retirada dos seguintes links:

 

Sair da versão mobile