Canvas kontrollen

Canvas kontrollen er sikker det simpleste Panel af dem alle. Det gør ikke rigig noget som standard, det giver dig bare mulighed for at placere kontroller i det og derefter manuelt positionere dem med specifikke koordinater.

Hvis du har brugt et andet UI bibliotek som WinForms, vil dette sikkert få dig til at føle dig hjemme, men selvom det kan være fristende at have absolut kontrol over alle underordrende kontroller, betyder det også, at Panel kontrollen ikke gør noget for dig, når brugeren begynder at ændre størrelse på dine vinduer, hvis du oversætter tekster placeret med absolute koordinater, eller hvis indholdet skaleres.

Mere om det senere, lad os se på et simpelt eksempel. Dette er mest for at vise dig hvor lidt, Canvas kontrollen gør som standard:

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

Som du kan se: Selv om vi har to knapper, bliver de begge placeret på nøjagtig samme plads, så kun den sidste er synlig. Canvas gør absolut ingenting før du begynder at give koordinater til de underordnede kontroller. Dette gøres ved hjælp af de tilknyttede egenskaber Left, Right, Top og Bottom.

Disse egenskaber giver dig mulighed for at angive positionen i forhold til de fire kanter af Canvas kontrollen. Som standard står de alle til NaN (Not a Number), hvilket vil få Canvas til at placere dem i det øverste, venstre hjørne, men som nævnt kan du nemt ændre dette:

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

Bemærk hvordan, jeg kun behøver sætte de egenskaber, jeg behøver. På de første to knapper ønsker jeg kun at angive en værdi for X-aksen, så jeg burger Left og Right egenskaberne til at skubbe knapperne mod centrum - fra hver deres retning.

På de nederste knapper bruger jeg både Left/Right egenskaberne samt Buttom til at skubbe dem mod centrum i begge retninger. Du vil normal angive enten en Top eller en Bottom værdi og/eller en Left eller Right værdi.

Som nævnt, siden Canvas kontrollen giver dig komplet kontrol over positioner, vil den ikke bekymre sig om hvor vidt, der er plads nok til alle dine kontroller, eller om de ligger oven på hinanden. Dette gør den til at dårligt valg til stort set ethvert dialogdesign, men Canvas er (som navnet antyder) god til i hvert fald en ting. Tegning. WPF har en samling kontroller, du kan placere på en Canvas for at lave pæne illustrationer.

Z-Indeks

I det næste eksempel vil vi bruge nogle af de formrelaterede kontroller i WPF for at illustrere et andet vigtigt concept ved brug af Canvas kontrollen: Z-Indeks. Normalt, hvis to kontroller i en Canvad overlapper, vil den sidst definerede i markup vinde og overlappe de andre. Men ved at bruge den tilknyttede egenskab ZIndex på Panel klassen, kan dette nemt ændres.

Først et eksempel, hvor vi ikke bruger z-indeks overhovedet:

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

Bemærk, at fordi hvert af rektanglerne er defineret efter cirklen, overlapper de alle cirklen, og hver af dem overlapper den forrige definerede. Lad os prøve at ændre dette:

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

Standard ZIndex værdier er 0, men vi tildeler en ny til hver af formerne. Reglen er, at elementet med den højeste z-indeks overlapper den med laveste værdi. Hvis to værdier er ens, vinder det sidst definerede element. Som du kan se på skærmbilledet vil en ændring af ZIndex egenskaben give et helt andet billede.