o controle Canvas

O Canvas é provavelmente o painel mais simples de todos eles. Ele não faz nada por padrão, apenas permite que você coloque os controles nele e os posicione usando coordenadas explícitas.

Se você já usou outra biblioteca de interface do usuário como o WinForms, isso provavelmente fará com que você se sinta em casa, mas embora possa ser tentador ter controle absoluto de todos os controles filhos, isso também significa que o Painel não fará nada por você quando o usuário começar a redimensionar sua janela, se você localizar o texto posicionado de forma absoluta ou se o conteúdo for dimensionado.

Depois veremos mais sobre isso, vamos entrar em um exemplo simples. Este é principalmente sobre mostrar o quão pouco o Canvas faz por padrão:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

Como você pode ver, apesar de termos dois botões, ambos são colocados exatamente no mesmo lugar, mas apenas o último está visível. O Canvas não faz absolutamente nada até que você comece a fornecer coordenadas para os controles filhos. Isso é feito usando as propriedades anexadas Left, Right, Top e Bottom do controle Canvas.

Essas propriedades permitem que você especifique a posição relativa às quatro bordas da Tela. Por padrão, eles estão todos configurados para NaN (Not a Number), o que fará com que o Canvas os coloque no canto superior esquerdo, mas, como mencionado, você pode facilmente mudar isso:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

Veja como eu apenas configuro a propriedade ou propriedades que preciso. Para os dois primeiros botões, desejo apenas especificar um valor para o eixo X, portanto, uso as propriedades Left e Right para empurrar os botões em direção ao centro, de cada direção.

Para os botões inferiores, eu uso os dois lados Esquerda / Direita e Inferior para empurrá-los em direção ao centro em ambas as direções. Você normalmente especificará um valor Top ou Bottom e / ou um valor Left ou Right.

Como mencionado, uma vez que o Canvas dá a você o controle completo das posições, ele não se importará se há ou não espaço suficiente para todos os seus controles ou se um estiver em cima do outro. Isso faz com que seja uma má escolha para praticamente qualquer tipo de design de diálogo, mas o Canvas é, como o nome indica, ótimo para pelo menos uma coisa: Pintura. O WPF tem um monte de controles que você pode colocar dentro de um Canvas, para fazer ilustrações legais.

Z-Index

No próximo exemplo, usaremos alguns controles relacionados ao formato do WPF para ilustrar outro conceito muito importante ao usar o Canvas: Z-Index. Normalmente, se dois controles dentro de um Canvas se sobrepuserem, o último definido na marcação terá precedência e se sobreporá ao (s) outro (s). No entanto, usando a propriedade ZIndex anexada na classe Panel, isso pode ser facilmente alterado.

Primeiro, um exemplo em que não utilizamos o z-index:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Observe que, como cada um dos retângulos é definido após o círculo, todos eles se sobrepõem ao círculo e cada um deles se sobreporá ao anteriormente definido. Vamos tentar mudar isso:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

O valor ZIndex padrão é 0, mas atribuímos um novo a cada uma das formas. A regra é que o elemento com o índice z mais alto sobrepõe aqueles com os valores mais baixos. Se dois valores forem idênticos, o último elemento definido "ganha". Como você pode ver na imagem, alterar a propriedade ZIndex dá uma outra aparência.