El control Canvas

El Canvas es probablemente el panel más simple de todos. Realmente no hace nada por defecto, solo te permite poner controles en él y entonces posicionarlos por ti mismo usando coordenadas explícitas.

Si alguna vez has usado otra biblioteca UI como WinForms, esto probablemente te haga sentir como en casa, pero si bien puede ser tentador tener control de todos los controles hijos, esto también significa que el Panel no hará nada por ti una vez que el usuario comience a cambiar el tamaño de tu ventana, si colocas texto posicionado de manera absoluta o si el contenido está escalado.

Veamos más sobre eso a continuación con un ejemplo simple. En general, se trata de mostrar lo poco que el Canvas hace por defecto:

<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 puedes ver, aunque tenemos dos botones, ambos se colocan exactamente en el mismo lugar, por lo que solo el último es visible. El Canvas no hace absolutamente nada hasta que comiences a dar coordenadas a los controles hijos. Esto se hace usando las propiedades izquierda, derecha, superior e inferior adjuntas del control Canvas.

Estas propiedades le permiten especificar la posición relativa a los cuatro bordes del Canvas. Por defecto, todos están configurados en NaN (No es un número), lo que hará que el lienzo los coloque en la esquina superior izquierda, pero como se mencionó, puedes cambiar esto fácilmente:

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

Observa cómo solo configuro la propiedad o propiedades que necesito. Para los dos primeros botones, solo deseo especificar un valor para el eje X, entonces uso las propiedades Left y Right (Izquierda y Derecha) para empujar los botones hacia el centro, desde cada dirección.

Para los botones de abajo, uso ambas Left/Right (Izquierda / Derecha) y Bottom (Inferior) para empujarlos hacia el centro en ambas direcciones. Por lo general, especificarás un valor par Top (Superior) o un valor para Bottom (Inferior) y / o un valor para Left (Izquierda) o para Right (Derecha).

Como hemos dicho, el Canvas te da control completo de las posiciones, no le preocupa realmente si hay suficiente celda para todos tus controles o si uno está encima de otro. Esto lo convierte en una mala elección para casi cualquier tipo de diseño de diálogo, pero el Canvas (Lienzo) es, como su nombre indica, ideal para al menos una cosa: Pintar. WPF tiene una serie de controles que puedes colocar dentro de un lienzo para hacer buenas ilustraciones.

Eje Z

En el siguiente ejemplo, usaremos un par de controles forma relacionada de WPF para ilustrar otro concepto muy importante al utilizar el Canvas: Z-Index. Normalmente, si dos controles dentro de un Canvas se superponen, el último definido en el marcado tendrá prioridad y se superpondrá con el otro. Sin embargo, al usar la propiedad ZIndex adjunta en la clase Panel, esto puede cambiarse fácilmente.

Primero, un ejemplo donde no usamos el z-index para nada

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

Fijate que debido a cada uno de los rectángulos está definidos después del circulo, cada uno de ellos se superpone al circulo y cada uno se superpone al que ha sido definido previamente. Vamos a intentar cambiar eso:

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

El valor por defecto del ZIndex es 0, nosotros le asignamos uno nuevo a cada una de las otras figuras. La regla es que el elemento que tenga el mayor z-index se sobrepone a los que tengan un valor menor. Si dos valores son idénticos, el que haya sido definido el último "gana". Como puedes ver en la captura, cambiar la propiedad ZIndex le da otra apariencia muy distinta.