7º Dia - Canvas

Dando continuidade aos estudos, hoje vou falar de Canvas. Nada mais é do que uma estrutura de layout, assim como o StackPanel e o Grid. A grande diferença é que no Canvas devemos posicionar os elementos XAML de acordo com os pixels. Vejamos um exemplo de Canvas sem utilizar as propriedades.

Código:

<Canvas Background="Black">
        <TextBlock Text="Mensagem:" FontSize="50" Foreground="White"></TextBlock>
        <TextBox Height="23" Name="TextBox1" Width="120" Text="Olá Mundo!!!" FontSize="20" />
</Canvas>

Resultado:

Uso de Canvas sem utilizar as propriedades de posicionamento

Como podemos ver na imagem acima, os elementos ficam posicionados no pixel 0 quando não utilizamos as propriedades de posicionamento que são:

Canvas.Right: refere-se a margem direita em pixels.
Canvas.Left: refere-se a margem esquerda em pixels.
Canvas.Top: refere-se a margem superior em pixels.
Canvas.Botton: refere-se a margem inferior em pixels.


Vejamos mais um exemplos do uso do canvas, porém utilizando as propriedades de posicionamento.

Código:

<Canvas Background="Black">
  <TextBlock Text="Mensagem:" FontSize="50" Foreground="White" Canvas.Left="10"></TextBlock>
  <TextBox Height="33" Name="TextBox1" Width="126" Text="Olá Mundo!!!" FontSize="20" Canvas.Right="23" Canvas.Bottom="107" />

</Canvas>

Resultado:

Uso de Canvas utilizando as propriedades de posicionamento