Aktuell habe ich in meiner Silverlight Schulung einen Teilnehmer, der wirklich interessante Fragen aufwirft, deren Antwort ich dann im Nachgang suche und hier in meinem Blog poste. Schließlich sind nur glückliche Silverlight Kurs Teilnehmer auch gute Teilnehmer. In diesem Silverlight 4 Beispiel soll ein Bild beschnitten werden. Das geht auch ganz einfach mit dem Clipping Path Attribut.
Mit Expression Blend nimmt man ein Bild, legt darüber eine Kurve (z.B. Kreis) und markiert beide. Dann wird im Context Menü Path- Make Clipping Path ausgewählt.
Im XAML sieht das wie folgt aus und man sieht nur mehr den Hintern der hübschen Person vom Foto 
.
<Image Margin="30,41,-140,-124" Source="/maus[1].jpg" Stretch="Fill"
Clip="M470.5,351.5 C470.5,387.3985 425.05692,416.5 369,416.5 C312.94308,416.5
267.5,387.3985 267.5,351.5 C267.5,315.6015 312.94308,286.5 369,286.5
C425.05692,286.5 470.5,315.6015 470.5,351.5 z"/>
Leider lässt sich das so nicht mehr animieren. Viele Attribute eines UIElements lassen sich durch ein Unterelement aufsplitten. So auch das Clip Attribut zu Image.Clip. Der Pfad wird dann mit Geometry Elementen beschrieben. In unserem Beispiel eben eine Ellipse.
<Image x:Name="image" Source="/maus[1].jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" >
<Image.Clip>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="100,100">
</EllipseGeometry>
</Image.Clip>
</Image>
Insgesamt gibt es fünf solcher Geomtrien.
-
EllipseGeometry
-
GeometryGroup
-
LineGeometry
-
PathGeometry
-
RectangleGeometry
Jetzt bleibt nur mehr das Problem der Animation. Leider gibt es keine Unterstützung durch Expression Blend oder schon gar nicht Visual Studio 2010. Also ran per Hand. Da ich eine Punkt verschieben möchte ist die PointAnimation das passende. Recht Tricky ist die Adressierung des Center Propertys über die XAML Hierarchie.
<Storyboard x:Name="Storyboard1">
<PointAnimation BeginTime="0" Duration="0:0:01" From="0,0" To="200,200"
Storyboard.TargetName="image"
Storyboard.TargetProperty="(UIElement.Clip).(EllipseGeometry.Center)">
</PointAnimation></Storyboard>
Gestartet wird die Animation per Expression Blend behavior. Am Ende eine Null Code Lösung.
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
Funktioniert. Ich bin wieder mal begeistert.
