Montag, 9. Juli 2007

WPF: Wie erstelle ich einen autoskalierenden Text?

Es hat lange gebraucht bis ich mich an WPF (Windows Presentation Foundation) rangewagt habe. Ich erkenne aber immer mehr die Vorzüge von WPF. Z.B. erstelle ich gerade für eine Anwendung einen animierten Splash-Screen bzw. Intro. Das gibt natürlich wesentlich mehr her als ein statisches Bitmap auf dem das Anwendungslogo zu sehen ist. Ich brauche nicht zu erwähnen, dass dies mit GDI+ echt aufwändig wäre und lange nicht so gut aussehen würde wie mit WPF.

Der Splash-Screen soll natürlich voll Vektrobasiert sein, d.h. alle Grafiken, Text und Animationen, sollen sich der Größe des Fensters anpassen. Doch wie schaffe ich es, dass die Schriftgröße eines Textes in einer TextBox automatisch skaliert wird? Ich habe lange gesucht, und keine passende "einfache" Einstellung gefunden, wie z.B. TextBox.Strech = Fill; Hieran sieht man, dass WPF noch nicht ganz ausgereift ist. Es sind zwar viele Grundelemente vorhanden, die man zu anderen komplexen Elementen zusammenstellen kann, aber das muss man halt selber machen. Zudem braucht man eine Menge Wissen über WPF, was man am Anfang natürlich nicht hat. Wenn man also eine DataGridView in WPF braucht, wird man nicht direkt rangehen können, um sich eine eigene DataGridView zu bauchen; auch wenn die dafür erforderlichen Grundelemente vorhanden sind. 1. Braucht man viel Efahrung mit WPF und 2. kostet es enorm viel Zeit.

Aber zurück zu unserem skalierbaren Text.

Wir benötigen zunächst das Tool ExpressionBlend. Meine Lösung kann nicht programmiert werden, sondern benötigt ein Feature von ExpressionBlen

1. Wir nehmen einen TextBlock. (Achtung keine normale TextBox!)
2. Wir schreiben einen Text in unseren TextBlock. Es können auch andere Elemente wie Elipsen, Controls etc. zwischen dem Text stehen. Das ist mit einem TextBlock möglich. Dann die Schriftart und andere Einstellungen setzen.
3. Wir konvertiere nun den TextBlock in einen Path. Menü->Objekt->Pfad->in Pfad konvertieren. Alle Elemente des TextBlock auch der Text wird in einen Pfad konvertiert. Dieser Pfad besteht aus relativen Punkten die Vektororientiert sind und somit voll skalierbar.
4. Wir umgeben den Pfad mit einer ViewBox. Diese ViewBox kann automatisch ihre Childelemente skalieren.
5. Tada! Fertig ist unser automatisch skalierender Text

Nachteil: wenn man den Text ändern will muss man die Schritte erneut durchführen ;-(

Es wäre natürlich auch denkbar eine Skalierung in Abhängigkeit der Fenstergröße per Databinding zu ermöglichen. Hierzu müsste man aber entsprechende Berechnungen anstellen.

Keine Kommentare: