Seiten

Dienstag, 15. März 2011

Bildvergleich mithilfe eines GridSplitter

Dieses Beispiel demonstriert, wie man ein GridSplitter-Steuerelement verwendet, um zwei Bilder zu vergleichen. So kann man beispielsweise einen Vergleich vorher nachher umsetzen.



Im obigen Beispiel können zwei Bilder miteinander verglichen werden, indem der GridSplitter hin- und her bewegt wird. Es werden zwei Bilder benutzt. Sie stellen die selbe Szenerie dar, jedoch in zwei unterschiedlichen Momenten. (Hinweis: Ich hatte vorher zu Demonstrationszwecken zwei Bilder gegenübergestellt, von denen eines einen ColorTone-Effekt hatte. Ich habe die Bildauswahl geändert, um den visuellen Effekt deutlicher zu demonstrieren.)

Wie es funktioniert

Das Beispiel funktioniert ziemlich einfach. Es werden zwei Bilder in einem Grid platziert. Das Grid besteht aus drei Spalten. Beide Bilder erstrecken sich über alle drei Spalten. Die zweite Spalte hat einen fixen Wert für "Width". Diese Spalte hält ein GridSplitter-Steuerelement. Für eines der Bilder wird im Xaml-Quellcode eine leere RectangleGeometry als Beschneidungspfad definiert. Die Linke Spalte des Grid wird benannt. Die RectangleGeometry wird ebenfalls benannt.

Im Code behind wird dann bei der Behandlung des "MouseMove"-Ereignisses die aktuelle Breite der linken Spalte abgefragt. Dieser Wert wird verwendet, um das rect-Attribut der RectangleGeometry dynamisch zu steuern. Von dem Bild, dem der Beschneidungspfad zugewiesen ist, wird dann immer nur der über die RectangleGeometry definierte Bereich angezeigt.

Download: Beispielprojekt mit vollständigem Quellcode in der Expression Gallery.

Viel Spass damit!

1 Kommentar:

  1. Hallo Martin,
    leider ist der Quellcode nicht mehr verfügbar. Wäre es möglich, diesen erneut zu veröffentlichen?

    Gruß
    Stefan

    AntwortenLöschen