Tutorial: Bitmap nach XAML umwandeln

Bitmap VectorizingHin- und wieder hat man die Anforderung, z.B. ein Firmenlogo in eine WPF- bzw. Silverlight-Anwendung einzubauen. Was aber, wenn das Logo nur in einem Bitmap-Format vorliegt und auch noch gezoomt werden soll. Wie wir wissen, werden Bitmaps beim Vergrößern sehr schnell hässlich. Ich möchte hier eine Möglichkeit zeigen, wie man dieses Problem umgehen kann. Das Zauberwort heißt „Vektorisierung“.  Diese Funktionalität bieten u.a. Programme wie Microsoft Expression Design oder das freie Inkscape an. Letzteres hat mir persönlich in der Praxis bessere Ergebnisse geliefert. Außerdem kann das Resultat auch im XAML-Format abgespeichert werden.

Vektorisierungsstool

Um Schleichwerbung zu vermeiden, habe ich im Beispiel kein Firmenlogo, sondern die Bitmap eines Verkehrsschilds in das XAML-Format umgewandelt.  Dazu habe ich in Inkscape im Einstellungsmenü für die Vektorisierung folgende Einstellungen verwendet:

Einstellungen Vektorisierung

Die Kunst ist es, hier je nach Bitmap die perfekten Einstellungen zu finden. Hier der Vorher-Nachher-Vergleich:

 Bitmap Logo & vektorisiertes Logo

Der XAML-Code der von Inkscape erzeugt wird, besteht in diesem Beispiel lediglich aus den Data-Attributen zweier Path-Elemente, eines für die Beschreibung des roten dreieckigen Rahmens, das andere Path-Element für die Kuh. Dieses XAML-Objekt kann man nun in einer WPF- oder Silverlight-Anwendung beliebig Drehen, Skalieren, Verzerren, Animieren ohne dass die Qualität der Darstellung darunter leidet.

Das könnte dich auch interessieren …