Le contrôle Canvas

Le Canvas est probablement le panel le plus simple. Par défaut il ne fait pas grand chose et vous permet simplement d'ajouter des contrôles et de les positionner en spécifiant explicitement leurs coordonnées.

Si vous avez déjà utilisé des librairies d'interfaces comme WinForms, vous vous sentirez probablement comme à la maison. Mais s'il est tentant d'avoir un contrôle absolu de la disposition, cela signifie aussi que le panel ne fera rien lorsque l'utilisateur redimensionnera votre fenêtre ou si le contenu change de taille.

Nous verrons le reste en détails plus tard. Commençons par un simple exemple pour vous montrer comment le Canvas se comporte par défaut.

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

Comme vous pouvez le voir, bien que nous ayons deux boutons, ils sont tous les deux placés à la même position, donc seul le dernier est visible. Le Canvas ne fait strictement rien tant que vous ne spécifiez pas de coordonnées pour vos contrôles enfants. Ceci est fait en spécifiant les propriétés attachées Left, Right, Top et Bottom du Canvas.

Ces propriétés vous permettent de spécifier la position relativement aux quatre bords du Canvas. Par défaut elles sont toutes initialisées à NaN (Not a Number / pas un nombre), et le Canvas place alors le contrôle dans le coin supérieur gauche. Mais comme mentionné, vous pouvez changer cela:

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

Remarquez comme j'ai seulement spécifié les propriétés nécessaires. Pour les deux boutons du haut, j'ai simplement voulu préciser la position sur l'axe X, j'ai donc utilisé les propriétés Left et Right afin de pousser les boutons vers le centre, depuis les bords gauche et droite.

Pour les boutons du bas, j'ai utilisé simultanément les propriétés Left/Right et Bottom pour pousser les boutons vers le centre à partir des deux coins inférieurs. J'utilise généralement les propriétés Top ou Bottom ainsi que Left ou Right.

Comme précisé, puisque le Canvas vous donne la totale maîtrise du positionnement, il ne s'occupera pas de savoir s'il y a ou non assez d'espace pour tous vos contrôles, ou si certains sont placés au-dessus d'autres. Cela en fait un mauvais choix pour à peu près toutes les interfaces de dialogues. Cependant, comme son nom l'indique, le Canvas est très bon à une chose: le dessin. Le WPF possède une quantité de contrôles que vous pouvez disposer dans un Canvas, et réaliser de belles illustrations.

Z-Index

Dans l'exemple suivant, nous allons utiliser quelques contrôles de formes (ou shapes) du WPF pour illustrer un concept important lors de l'utilisation des canvas: le Z-Index (ou indice de profondeur). Normalement, si deux contrôles se chevauchent dans un Canvas, celui défini en dernier dans le code prendra l'ascendant et chevauchera tous les autres. Cependant, en utilisant la propriété attachée ZIndex, cela peut être modifié.

Tout d'abord, un exemple où nous n'utilisons pas le 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>

Remarquez que puisque chaque rectangle est défini après le cercle, ils chevauchent tous le cercle, et chaque rectangle chevauche le précédent. Essayons de changer ceci:

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

La valeur par défaut du Z-Index est 0, mais nous en assignons une nouvelle pour chaque forme. La règle est que l'élément de z-index le plus haut chevauche tous ceux d'indice inférieur. Si deux valeurs sont identiques , l'élément défini en dernier "gagne". Comme vous pouvez le voir avec l'aperçu, changer le Z-Index donne un look assez différent.