Microsoft WPF Canvas Beispiel

Ziel: Dieses Beispiel zeigt wie ein Canvas Element in WPF benutzt wird. Canvads ist ein Layout Container bei dem die Elemente an einer definierten Position angeordnet werden.

Schritt 1: Ein Projekt mit dem Namen "CanvasBsp" erzeugen. (siehe Hello World)

Schritt 2: Im XAML Code das Grid durch Canvas ersetzen. Um die Ausgabe in diesem Blogeintrag etwas einfach zu gestalten wird auch die Height und Width eigenschaft des Fensters auf 300 gesetzt.

<Window x:Class="CanvasBsp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CanvasBsp"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <!-- <Grid> -->
    <Canvas>
    </Canvas>
    <!-- </Grid> -->
</Window>

Schritt 3: Hintergrundfarbe des Canvas ändern und einige TextBlock Elemente mit expilziter Position hinzufügen.

<Canvas Background="Blue">
  <TextBlock Canvas.Left="10" Canvas.Top="10" >Canvas.Left=10 <LineBreak /> Canvas.Top=10</TextBlock>
  <TextBlock Canvas.Right="10" Canvas.Top="10" >Canvas.Right=10 <LineBreak /> Canvas.Top=10</TextBlock>
   <TextBlock Canvas.Left="10" Canvas.Bottom="10" >Canvas.Left=10 <LineBreak /> Canvas.Bottom=10</TextBlock>
   <TextBlock Canvas.Right="10" Canvas.Bottom="10" >Canvas.Right=10 <LineBreak /> Canvas.Bottom=10</TextBlock>
</Canvas>

Ergebnis: Beim vergößern/verkleinern des Fensters wird die ralative Positionsangabe deutlich. Die Textblöcke bleiben immer in den jeweiligen Ecken.