Seiten

Donnerstag, 30. September 2010

RichTextBox.Xaml Builder Add-In für Expression Blend 4

Vor Kurzem habe ich das RichTextBox.Xaml Builder Tool, ein kleines WPF Programm, vorgestellt. Nun gibt es das RichTextBox.Xaml Builder Add-In für Expression Blend 4. Dieses Add-In bietet die gleiche Funktionalität wie das standalone tool, aber halt mit dem Vorteil, dass es direkt in Blend 4 genutzt werden kann.

Das Add-In ist natürlich kostenlos und als Download in der Expression Gallery erhältlich.

Wichtiger Hinweis: Das Add-In ist in der aktualisierten Version 1.0.0.2 verfügbar. Die aktualisierte Version bietet einige nützliche Neuerungen, insbesondere erkennt das Add-In ab Version 1.0.0.2 den Projekttyp eines geöffneten Projekts. Weitere Informationen zur Version 1.0.0.2 und den Link zum Download gibt es hier im Blog. Es wird empfohlen, die aktuelle Version 1.0.0.2 zu verwenden.



Um so wird das Add-In in Expression Blend 4 eingebunden:

1. In dem Ordner C:\Program Files (x86)\Microsoft Expression\Blend 4\ einen neuen Ordner mit dem Namen "Extensions" erstellen.

2. Die Datei XamlBuilder.Extension.dll aus dem Download in diesen Ordner einfügen.

3. Expression Blend 4 starten.

4. In der laufenden Instanz von Expression Blend 4 auf das Menü "Fenster" klicken und auf "XamlBuilder" klicken.

Hiernach erscheint der RichTextBox.Xaml Builder als neues Fenster in der Entwicklungsumgebung von Expression Blend 4. Das XamlBuilder-Fenster kann wie jedes andere Fenster von Blend 4 in einen der Registerkartenpanel per Drag & Drop hinzugefügt werden, so dass es dann z.B. als Registerkarte neben Projekt, Objekte, Auslöser, etc. abgelegt ist und genutzt werden kann (siehe Screenshot oben).

Verwendet wird die Oberfläche genauso, wie auch das standalone tool. Insofern empfehle ich das Video, das ich als Screencast zu dem standalone tool gemacht habe.

Wer selbst ein Add-In für Expression Blend 4 schreiben will, dem empfehle ich als Einstiegspunkt den sehr instruktiven Artikel von Timmy Kokke. Die Klasse, die er dort vorstellt ist in C# geschrieben. Für alle, die in VB.NET programmieren findet Ihr nachstehend den Quellcode der Klasse XamlBuilderExtension.vb. Diese Klasse entspricht in ihrer Grundstruktur dem C# Quellcode von Timmy Kokke und ebnet für das RichTextBox.Xaml Builder Add-In den Weg hinein in Expression Blend 4:


Ich hoffe, das Add-In ist für Euch eine nützliche Erweiterung in Blend 4.

Viel Spass damit.

Dienstag, 28. September 2010

Windows Phone 7 Entwicklung mit VB.NET

Seit Kurzem gibt es die finalen Developer Tools für Windows Phone 7. Super Sache, dachte ich mir. Und zack, gleich installieren. Doch leider gibt es für die finalen Tools noch keine VB.NET templates für Visual Studio.

Aber für alle VB.NET-Entwickler, die bereits jetzt in ihrer Programmiersprache mit der WP7-Entwicklung loslegen wollen, gibt es seit Kurzem ein kleines Trostpflaster: Die Visual Basic CTP  for Windows Phone Developer Tools. Weitere Informationen findet Ihr hier, auch zu den Einschränkungen gegenüber der RTM.

Sonntag, 26. September 2010

Rich Text zu Xml zu RichTextBox.Xaml mit dem "RichTextBox.Xaml Builder" Tool

Der RichTextBox.Xaml Builder ist ein kleines kostenloses Programm das ich entwickelt habe, mit dem man Rich Text, z.B. aus einer Word Datei, in Xml konvertieren kann. Das besondere ist, dass bei der Konvertierung zu Xml eine Xml-Dokumentstruktur erstellt wird, die mit Xaml kompatibel ist. Die resultierende Xml-Datei kann also benutzt werden, um sie in ein Silverlight 4 Projekt einzubinden und den Text in einer regulären Silverlight 4 RichTextBox oder in meinem RichXamlViewer, einem Silverlight 4 UserControl, darzustellen.


Screenshot des RichTextBox.Xaml Builder

Hier ein lebendiges Beispiel für den RichXamlViewer, in der als Quelle für den dargestellten Text eine .xml-Datei verwendet wird, die mit dem RichTextBox.Xaml Builder erstellt wurde.


Das RichXamlViewer UserControl basiert auf einer regulären Silverlight 4 RichTextBox, hat aber ein paar nützliche Zusatzfeatures. Der Text kann über das ZoomPad oben rechts zur Laufzeit vergrößert oder verkleinert werden. Die Textgrößenveränderung erfolgt animiert, weil die entsprechende Eigenschaft "TextFontSize" als DependencyProperty implementiert ist. Außerdem kann der Text über ein integriertes Kontextmenü ganz oder in Teilen in die Zwischenablage kopiert werden (das allerdings nicht im Rich Text Format). Der größte Vorteil des RichXamlViewer UserControl ist, dass es im Zusammenspiel mit Expression Blend 4 ein echtes Null-Code-Control ist. Einfach Drag & Drop auf die Oberfläche zur Entwurfszeit, den .xml-Dateinamen der mit dem RichTextBox.Xaml Builder Tool erstellten .xml-Datei in die "XamlSource"-Eigenschaft des UserControls eintragen und fertig.

Der Vorteil, den Text, der in einer Silverlight 4 RichTextBox dargestellt werden soll, in einer .xml-Datei abzulegen, anstatt ihn direkt in die RichTextBox einzugeben, besteht darin, dass der Text nicht mehr in der Xaml-Ansicht sichtbar ist. Außerdem kann über den Code Behind der darzustellende Text zur Laufzeit über eine einzige Zeile Code ausgewechselt werden. Man weist der RichTextBox.Xaml Eigenschaft einfach eine andere .xml-Datei zu. Einfacher geht es kaum.

Alle Infos dazu, wie das geht, zur Anwendung des RichTextBox.Xaml Builder und der Verwendung einer mit diesem Tool erzeugten .xml-Datei mit einer regulären Silverlight 4 RichTextBox oder mit dem Silverlight 4 RichXamlViewer UserControl gibt es in diesem Demo-Video:


Rich Text zu Xml zu Xaml from LawBot on Vimeo.

Den Download für den RichTextBox.Xaml Builder gibt es in der Visual Studio Gallery. Alternativ könnt Ihr den RichTextBox.Xaml Builder auch als Click-Once-Anwendung installieren, um stets die neueste Version zu erhalten.

Der RichXamlViewer kann in der Expression Gallery heruntergeladen werden.

Viel Spaß damit.

Freitag, 17. September 2010

CodeBox - Syntax Darstellung in Silverlight für jede Programmiersprache

CodeBox ist ein Silverlight 4 UserControl. Mit CodeBox kann die Darstellung von Quellcode jeder beliebigen Programmiersprache als Silverlight 4 Anwendung in eine Website eingebunden werden.

Das ist CodeBox:


CodeBox ist wahrscheinlich die simpelste SyntaxHighlighting Lösung überhaupt. CodeBox verzichtet auf eigenes Programmieren eines Code-Parsers und auf umständliche Konvertierungen von Klartext zu RichText oder von RichText zu HTML.

CodeBox nutzt schlicht das neue Silverlight 4 RichTextBox Steuerelement für die absolut syntaxgetreu formatierte Darstellung von Quellcode. Und das Beste daran: Mit CodeBox kann jede beliebige Programmiersprache dargestellt werden. Egal ob C#, VB.NET, F#, C++, HTML, XAML, XML oder was auch immer. Alles wird exakt so dargestellt, wie es im Visual Studio Code-Editor dargestellt ist.

Die Verwendung von CodeBox

Mit CodeBox eine syntaxgetreu formatierte Darstellung von Quellcode in Silverlight 4 darzustellen geht folgendermaßen:

1. CodeBox herunterladen.

2. Ein neues Silverlight 4 Projekt öffnen.

3. Das Beispiel-Projekt aus dem Download öffnen und die Datei "SilverLawCodeBoxControl.xaml" kopieren (Rechtsklick ... kopieren) und in das neue Projekt einfügen (Rechtsklick auf das neue Projekt im Projekt-Explorer von Blend 4 und Einfügen).

4. Die XAML-Ansicht von SilverLawCodeBoxControl.xaml öffnen und x:Class="CodeBoxControlSolution.SilverLawCodeBoxControl" durch x:Class="DeinProjektName.SilverLawCodeBoxControl" ersetzen.

5. Den Quellcode, der dargestellt werden soll, aus dem Visual Studio Code-Editor in die Zwischenablage kopieren.

6. Zurück in die Design-Ansicht von SilverLawCodeBoxControl.xaml in Expression Blend 4 und in der Registerkarte Objekte und Zeitachsen das Element mit dem Namen "CodeBox" selektieren (das ist eine simple RichTextBox).

7. In der Design-UI von Blend einen Doppelklick auf die CodeBox-RichTextBox machen, wonach der gesamte Text in der CodeBox-RichTextBox markiert ist.

8. Mit Strg-V den in die Zwischenablage kopierten Quellcode in die CodeBox-RichTextBox einfügen.

9. F5.

Das war's!

Zur Laufzeit kann durch Klicken und Ziehen mit dem Mauszeiger entweder ein Teil des Textes oder über das Context-Menü der gesamte Text markiert werden. Über das Context-Menü kann der markierte Text in die Zwischenablage kopiert werden.

Aus der Zwischenablage kann der Text dann wieder in den Visual Studio Code-Editor eingefügt werden.

Ach ja. Und wenn Ihr mit CodeBox in einem Google Blogger Blog Quellcode darstellen wollt müßt Ihr folgendes machen:

1. Eine Silverlight 4-Anwendung mit einer CodeBox herstellen.

2. Die TestPage.html zusammen mit der .xap-Datei auf einem Web-Server ablegen.

3. In der HTML-Ansicht des Post-Designers von blogger den folgenden Code an der Stelle einfügen, in der die CodeBox erscheinen soll:


Also ... viel Spaß mit CodeBox.


Bitte beachtet noch folgendes, wenn Ihr CodeBox in Eurer Website nutzen wollt:
Der HyperlinkButton mit dem Namen hbDownload darf weder vollständig entfernt, noch darf der dort gesetzte Link auf die originale Download-Quelle in der Expression Gallery entfernt werden.

Donnerstag, 16. September 2010

How To: Rotieren eines ChildWindow

Dieser Artikel beschreibt Schritt für Schritt, wie man ein ChildWindow zum Rotieren bringt, einschließlich einer Rotationsanimation beim Öffnen des ChildWindow.

Das folgende Beispiel zeigt, wohin die Reise geht:

Mittwoch, 15. September 2010

Focus für TextBox mit dem Laden der Seite

Über dieses Problem ist garantiert jeder einmal gestoplert: Wie stellt man sicher, dass nach dem Laden einer Silverlight-Anwendung der Focus auf eine TextBox gesetzt ist? Chris Rouw löst dieses Problem in einem kurzen Blog-Beitrag.

Neues Blog-Design

Es ist kaum zu übersehen. SilverLaw hat ein neues Blog-Design. Grund dafür ist nicht zuletzt, dass dieser Blog jetzt als externer Blog in der Community Section der offiziellen Microsoft Expression Studio Seite gelistet ist.

Montag, 13. September 2010

Video: Seitenübergänge mit eigener Transition - Silverlight 4

Das Navigation-Framework von Silverlight ermöglicht es, in einer Silverlight-Anwendung zwischen mehreren Seiten zu navigieren, einschließlich der Integration in die Browser-History. Alles was man dazu braucht, sind die einzelnen Seiten, also Pages, und ein Frame-Element, in dem die Seiten angezeigt werden und das für die Navigation zuständig ist.

Soweit so gut. Die Seitenübergänge von einer zur nächsten Seite sind standardmäßig jedoch plötzlich. Also bei der Navigation zu einer neuen Seite erscheint die Seite sofort und ohne Seitenübergang.

Es gibt aber eine recht einfache Möglichkeit, innerhalb des Navigation-Framework ansprechende Seitenübergänge hinzuzufügen. Wie man einen eigenen Seitenübergang erstellen und implementieren kann, das habe ich in einem Demovideo zusammengefaßt.


Seitenübergänge mit eigener Transition from LawBot on Vimeo.

Das Demovideo findet Ihr, neben weiteren Screencasts, auch in meinem Vimeo channel, LawBot On Silverlight.

Es zeigt Schritt für Schritt, wie man vorgeht. Das im Video entwickelte Beispiel baut einen Seitenübergang, der jede neue Seite von einer monochromen Farbdarstellung (also von schwarz-weiß) zu der tatsächlichen Farbdarstellung der Seite aufscheinen läßt (ColorTone Page Transition).

Wie das Ganze im Ergenis aussieht, könnt Ihr am folgenden Beispiel sehen. Den Quellcode für dieses und alle anderen Beispiele findet Ihr als Download jeweils in der Expression Gallery.


Weitere Quellcode-Beispiele für Seitenübergänge mit eigener Transition findet Ihr in der Expression Gallery:

Montag, 6. September 2010

Flexible MouseMove Surface - Silverlight 4

In der Expression Gallery findet Ihr ein Beispiel inklusive Sourceode für eine flexible Oberfläche, die auf den MouseMove reagiert (Flexible MouseMove Surface). Das ist eine Ergänzung zu meinem Flexible Surface Effect - Silverlight 4.

Und so sieht das Ganze aus:


Viel Spass damit.

Samstag, 4. September 2010

Hyperlink Button Style - Silverlight 4

In der Expression Gallery findet Ihr einen HypelinkButton Style, der bei den Entwürfen für die UI meiner neuen Silverlight Seite entstanden ist.

Hier ein lebendiges Beispiel:




Viel Spass damit.