Het Canvas besturingselement

Het canvas is waarschijnlijk het eenvoudigste paneel van allemaal. Het doet standaard niets, het stelt je alleen in staat om er bedieningselementen in te plaatsen en vervolgens te positioneren ze zelf met behulp van expliciete coördinaten.

Als u ooit een andere UI-bibliotheek zoals WinForms heeft gebruikt, voelt u zich waarschijnlijk meteen thuis, U heeft de totale controle over dit element maar dit betekent ook dat het Panel niets voor u zal doen als de gebruiker het formaat van uw venster begint te wijzigen, als u elementen absoluut lokaliseert, absoluut gepositioneerde tekst of als de inhoud wordt geschaald.

Daarover later meer, laten we een eenvoudig voorbeeld bekijken. Deze gaat vooral over het laten zien van hoe weinig het Canvas standaard doet:

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

Zoals je kunt zien, ook al hebben we twee knoppen, ze zijn beide op exact dezelfde plaats geplaatst, dus alleen de laatste is zichtbaar. Het canvas doet het absoluut niets totdat je coördinaten gaat geven aan de onderliggende controles. Dit wordt gedaan met de bijgevoegde eigenschappen Links, Rechts, Boven en Onder van het canvas element.

Met deze eigenschappen kunt u de positie opgeven ten opzichte van de vier randen van het canvas. Standaard zijn ze allemaal ingesteld op NaN (geen getal (Not a Number)), dat zal het canvas in de linkerbovenhoek plaatsen, maar zoals gezegd kun je dit gemakkelijk wijzigen:

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

Merk op dat hier alleen de eigenschap of eigenschappen instel die er nodig zijn. Voor de eerste twee knoppen wil gaan we alleen een waarde specificeren voor de X-as, dus gebruiken gebruik Links en de rechts eigenschappen om de knoppen vanuit elke richting naar het midden te duwen.

Voor de onderste knoppen worden zowel links / rechts als onder / boven gebruikt om ze in beide richtingen naar het midden te duwen. Meestal specificeert u ofwel een Top ofwel een onderste waarde en / of een waarde voor Links of Rechts.

Zoals gezegd, aangezien het Canvas je volledige controle over posities geeft, maakt het niet uit of er genoeg ruimte is voor al je bedieningselementen of dat de ene is bovenop de andere. Dit maakt het een slechte keuze voor vrijwel elk soort dialoogvensterontwerp, maar het canvas is, zoals de naam al aangeeft, geweldig voor in ieder geval één ding: schilderen. WPF heeft een heleboel bedieningselementen die je in een canvas kunt plaatsen om mooie illustraties te maken.

Z-Index

In het volgende voorbeeld zullen we een aantal vormgerelateerde besturingselementen van WPF gebruiken om een ander zeer belangrijk concept te illustreren bij het gebruik van de Canvas: Z-Index. Normaal gesproken, als twee besturingselementen binnen een canvas elkaar overlappen, heeft het besturingselement dat als laatste in de opmaak is gedefinieerd voorrang en overlapt het de ander(en). Door echter de bijgevoegde ZIndex-eigenschap op de klasse Panel, dit kan eenvoudig worden gewijzigd.

Allereerst een voorbeeld waarbij we helemaal geen z-index gebruiken:

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

Merk op dat omdat elk van de rechthoeken na de cirkel wordt gedefinieerd, ze allemaal de cirkel overlappen en dus de eerder gedefinieerde cirkel overlappen. Laten we proberen dat te veranderen:

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

De standaardwaarde van ZIndex is 0, maar we wijzen een nieuwe toe aan elk van de vormen. De regel is dat het element met de hogere z-index degene met de lagere waarden overlappen. Als twee waarden identiek zijn, "wint" het laatst gedefinieerde element. Zoals u kunt zien op de schermafbeelding, geeft het wijzigen van de eigenschap ZIndex een heel andere beeld.