Eigene Linien in Grid Panel zeichnen

Das Grid ist das Mächtigste und am Häufigsten gebrauchte Panel in WPF.

Mit der Eigenschaft "ShowGridLines" lassen sich Hilfslinien anzeigen.

<Grid ShowGridLines="True">

Diese Linien dienen nur als Hilfestellung für den Entwickler, der so die Position der Spalten und Reihen erkennen kann.

Leider kann man nicht selber bestimmen wie diese Linien aussehen. Oder etwas doch?

Was passiert eigentlich im Grid wenn ShowGridLines=True gesetzt wird?

WPF-Controls können sich selbst zeichnen, in dem sie die OnRender Methode überschreiben. Wie dies auch bei OnPaint in WinForms der Fall ist.

Doch beim Grid wird davon nicht Gebrauch gemacht um die Linien zu zeichnen! Stattdessen wird zu den logischen UI-Elementen in dem Panel ein zusätzliches visuelles Element der "GridLinesRenderer" hinzugefügt. Dies geschieht nicht per ControlTemplate. (Templates ändern ebenfalls das Aussehen also den VisualTree), sonder programmatisch durch den Aufruf von AddVisualChild(visual) in der Basisklasse.

Der GridLinesRenderer ist von DrawingVisual abgeleitet. UIElement und DrawingVisual haben also den Selben Vorfahr "Visual". DrawingVisuals sind jedoch wesentlichen performanter als UIElements, da sie direkt auf den "Bildschrim" (WPF-Subsystem) zeichnen.

Der VisualTree im XamlPad zeigt, dass neben dem logischen Child – einem Button - noch ein visuelles Element - der GridLinesRenderer - in der Hierarchie zu finden ist.

 

Möglichkeit 1: Einen eigenen GridLinesRenderer schreiben

Meine erste Idee war es einen eigenen GridLinesRenderer zu schreiben. Ganz nach dem Vorbild des in dem Grid zu findenden Renderer.

Das Problem ist, dass es nicht möglich ist den Renderer in den VisuallTree des Grid einzufügen. Die Methode die dieses möglich machen würde – AddVisualChild – ist nämlich protected.

Ein eigenes Grid zu erstellen, nur um die GridLinien zeichnen zu können war mir dann aber zu aufwändig.

Es muss einen anderen Weg geben.

Möglichkeit 2: Einen GridLinesAdorner schreiben

Wenn es keine Möglichkeit gibt ein UIElement von Innen zu verändern ohne ein eigenes Control abzuleiten, so muss man es eben von Außen probieren. Das machen sog. Adorner.

Adorner "verzieren" ein UIElement. Wie, das bestimmt der Adorner. Wichtig ist, dass ein Adorner immer über einem UIElement gezeichnet wird. D.h. der Adorner verdeckt darunter liegende Zeichnungen.

Public
Class GridLinesAdorner

Inherits Adorner

 

Private Grid As System.Windows.Controls.Grid

 

'Übergabe des zu verzierenden Elements (hier Grid)

Sub
New(ByVal grid As System.Windows.Controls.Grid)

MyBase.New(grid)

Me.Grid = grid

End
Sub

 

Private _pen As Pen

 

'Stift um die Linien zeichnen zu können

Public
Property Pen() As Pen

Get

Return _pen

End
Get

Set(ByVal value As Pen)

_pen = value

End
Set

End
Property

 

 

'Zeichnen der Linien

Protected
Overrides
Sub OnRender(ByVal dc As System.Windows.Media.DrawingContext)

If Pen Is
Nothing
Then
Exit
Sub

 

If Grid.ColumnDefinitions.Count > 0 Then

Dim x As
Double

For i As
Integer = 1 To Grid.ColumnDefinitions.Count - 1

x = Grid.ColumnDefinitions(i).Offset

dc.DrawLine(Pen, New Point(x, 0), New Point(x, Grid.ActualHeight))

Next

End
If

 

If grid.RowDefinitions.Count > 0 Then

Dim y As
Double

For i As
Integer = 1 To Grid.RowDefinitions.Count - 1

y = Grid.RowDefinitions(i).Offset

dc.DrawLine(Pen, New Point(0, y), New Point(Grid.ActualWidth, y))

Next

End
If

 

End
Sub

 

End
Class

 

Die Methode OnRender führt nun das Zeichnen der Gridlinien durch. Über die Row- und ColumnDefinitions des Grid, kann der Offset der einzelnen Spalten vom Grid abgerufen werden. Diese dienen uns als Koordination um an diesen Stellen die entsprechenden Linien zu zeichnen.

Anwenden des Adorners

Um den Adorner zum Einsatz zu bringen, müssen wir nun noch die Code-Behind Datei anpassen. Leider ist es nicht möglich den Adorner in XAML direkt anzuwenden. (Die Klasse AdornerDecorator ist nur dafür da einen Layer für ein zu verzierendes Element bereitzustellen, worauf ein Adorner angewendet werden kann; aber nicht für den Adorner selbst.)

Class Window1

 

Private
Sub Window1_Loaded(ByVal sender As
Object, ByVal e As System.Windows.RoutedEventArgs) Handles
Me.Loaded

'Layer für das Element holen in dem der Adorner gezeichnet wird

Dim layer As AdornerLayer = AdornerLayer.GetAdornerLayer(Me.Grid)

'Adorner mit Stift erstellen

Dim adorner As
New GridLinesAdorner(Grid)

adorner.Pen = New Pen(Brushes.Black, 2)

'Adorner dem Layer hinzufügen

layer.Add(adorner)

End
Sub

 

End
Class

 

Das Ergebnis

 

Wer noch einen Rahmen um das Grid herum haben möchte, der brauch nur noch das Grid in ein Border zu packen.

Achtung: Wie man sieht wird der Adorner über das Grid gezeichnet. Daher sind die Ränder der im Grid befindlichen Buttons nicht ganz zu sehen.

Hier muss dann noch ein entsprechendes Margin auf die Buttons angewendet werden um den richtigen Abstand zu den Gridinnenseiten zu ermöglichen.