SilverLaw

Nokia Tune Remake --- Create And Vote

2011-09-07T17:29:00.000+02:00

Schon gehört? Nokia sucht einen neuen "Nokia Tune". Bis zum 05.10.2011 läuft ein öffentlicher Wettbewerb. Der Gewinner wird am 07.10.2011 bekanntgegeben. Es lohnt sich übrigens, die bisherigen Einsendungen anzuhören. Mein Favorit ist #367 "Nokia One World". Und wer weiß, vielleicht findet sich ja bald Euer Favorit auf dem neuen Nokia Windows Phone. So ... Create And Vote!

ListBoxItem Style: Vergrößerung des getrimmten Textes bei MouseOver

2011-08-24T12:46:00.000+02:00

In der Expression Gallery habe ich einen neuen ListBoxItem style veröffentlicht. Er bietet die Funktionalität, längeren, aber getrimmten Text beim Bewegen des Mauszeigers über das ListBoxItem zu erweitern, so dass der Text vollständig sichtbar wird. Wir alle kennen dieses Verhalten, das vergleichbar ist dem Verhalten des Windows Explorer bei der Anzeige von Dateinamen oder Ordnernamen, der zu lang ist für die Anzeige in einer bestimmten Spalte.

Viel Spaß damit. Ich hoffe, ich finde in nächster Zukunft die Zeit, hierüber einen kurzen Artikel zu schreiben.

Download: Vollständiger Quellcode des Beispielprojekts in der Expression Gallery.

P.S.: Es ist wirklich sehr lange her, seit meinem letzten Blog-Post. Danke an alle, die weiterhin meinen Blog lesen.

Windows Phone Developer Tools 7.1 Beta veröffentlicht - inklusive Visual Basic-Unterstützung für Silverlight und XNA

2011-05-25T11:27:00.001+02:00

Es gibt großartige Neuigkeiten für die VB.Net-Community: Die Windows Phone Developer Tools 7.1 Beta sind veröffentlicht worden und stehen zum Download bereit. Hier kann man nachlesen, dass Visual Basic jetzt für Silverlight und XNA Framework-Anwendungen verfügbar ist. Visual Basic ist also vollständig in die Windows Phone Developer Tools 7.1 Beta integriert.

Einen wichtigen Hinweis gibt es hier, wonach empfohlen wird, die Windows Phone Developer Tools 7.1 Beta auf einer separaten Maschine zu installieren.

Außerdem wurde das Windows Azure Toolkit for Windows Phone 7 veröffentlicht, das mit den Windows Phone Developer Tools 7.1 Beta zusammen verwendet werden kann. Für VB.NET-Entwickler gibt es insofern hier einen ergänzenden Hinweis zu wichtigen Updates.

Teil 2: Spaltentransposition Chiffre mit "CubeCrypt 2011" - Verwendung von "CubeCrypt 2011"

2011-05-10T19:54:00.001+02:00

Dies ist der zweite Teil der dreiteiligen Artikelserie über das Tool "CubeCrypt 2011". Dieser zweite Teil zeigt die Verwendung von "CubeCrypt 2011". Hier sind nochmal alle Teile der Artikelserie in der Übersicht:

Teil 1: Das Verfahren der "Spaltentransposition"
Teil 2: Verwendung von "CubeCrypt 2011"
Teil 3: Kryptologie und Kryptanalyse der "Spaltentransposition" (noch nicht veröffentlicht)

Dieser zweite Teil behandelt die Verwendung von "CubeCrypt 2011" und die Implementierung des Werkzeugs in eine Silverlight-Anwendung. Im Abschnitt "Implementierung mit Datenbindung" zeige ich eine Lösung auf, wie man "CubeCrypt 2011" auch im Rahmen einer Datenbindung nutzen kann, ohne dass im Quellcode (weder Xaml noch C# oder VB) ein Klartext-Passwort vorhanden ist.

Implementierung von "CubeCrypt 2011" für Silverlight

"CubeCrypt 2011" ist eine Silverlight-Assembly. Sie ist verfügbar als Bestandteil des Beispielprojekts, das in der Expression Gallery heruntergeladen werden kann. Die Assembly heißt CubeCrypt.dll. Um "CubeCrypt 2011" zu verwenden, muss zu einem Silverlight 4-Projekt ein Verweis auf die Datei CubeCrypt.dll hinzugefügt werden. Außerdem muss in der Klasse, in der CubeCrypt verwendet wird, eine Imports-Anweisung für den Namespace "ColumnarTransposition" hinzugefügt werden.

Imports ColumnarTransposition
Imports ColumnarTransposition.CubeCrypt

Um mit CubeCrypt eine Zeichenfolge zu verschlüsseln oder zu entschlüsseln, muss zunächst ein neues CubeCrypt-Objekt (Namespace ColumnTransposition) erstellt werden. Der Konstruktor der neuen Objektinstanz erfordert die Übergabe eines Parameters. Dieser Parameter erfordert entweder die Übergabe eines Wertes vom Typ "EncryptionMode" oder die Übergabe eines Werts vom Typ "DecryptionMode". Die Übergabe eines Wertes vom Typ "EncryptionMode'" erzeugt eine Objektinstanz, die zum Verschlüsseln einer Zeichenfolge benutzt werden kann. Die Übergabe eines Wertes vom Typ "DecryptionMode'" erzeugt eine Objektinstanz, die zum Entschlüsseln einer Zeichenfolge benutzt werden kann.

EncryptionMode und DecryptionMode sind jeweils vom Typ Enum. EncryptionMode kennt die beiden Werte EncryptionMode.SingleEncryption und EncryptionMode.DoubleEncryption. DecryptionMode kennt die beiden Werte DecryptionMode.SingleDecryption und DecryptionMode.DoubleDecryption. Die Auswahl des Enumerationswertes entscheidet darüber, ob die Verschlüsselung bzw. die Entschlüsselung mit einer einzelnen Spaltentransposition erfolgen soll, oder ob die Verschlüsselung bzw. die Entschlüsselung mit einer doppelten Spaltentransposition erfolgen soll. Die folgenden Grafiken veranschaulichen das:

Abbildung 1: Enum: EncryptionMode (Namespace: ColumnarTransposition. Class: CubeCrypt)

Abbildung 2: Enum: DecryptionMode (Namespace: ColumnarTransposition. Class: CubeCrypt)

Verschlüsselung

Die Klasse CubeCrypt stellt die öffentliche Methode Encrypt() zur Verfügung. Die Methode Encrypt() ist überladen. Der Methode wird als Parameter der Klartext übergeben und zusätzlich entweder ein oder zwei Passworte. Abhängig davon, ob der Methode Encrypt() ein oder zwei Passworte übergeben wird, wird der Klartext entweder mit einer einzelnen Spaltentransposition verschlüsselt oder er wird mit einer doppelten Spaltentransposition verschlüsselt. Der Geheimtext wird, wiederum abhängig davon, ob eine einzelne Spaltentransposition durchgeführt wurde, oder ob eine doppelte Spaltentransposition durchgeführt wurde, von den Eigenschaften SingleEncyrptedCiphertext oder DoubleEncryptedCiphertext zurückgegeben. Die Eigenschaften SingleEncyrptedCiphertext und DoubleEncryptedCiphertext sind beide ReadOnly. Der nachfolgende Quellcode verdeutlicht diese Logik:

Beispiel-Quellcode:

  Private Function EncryptString(ByVal plaintext As String,
                                 ByVal pw1 As String,
                                 ByVal pw2 As String) As String

    Dim rv As String

    If String.IsNullOrEmpty(pw2) Then

      Dim ct As New CubeCrypt(EncryptionMode.SingleEncryption)

      ct.Encrypt(plaintext, pw1)

      rv = ct.SingleEncryptedCipherText

    Else

      Dim ct As New CubeCrypt(EncryptionMode.DoubleEncryption)

      ct.Encrypt(plaintext, pw1, pw2)

      rv = ct.DoubleEncryptedCipherText

    End If

    Return rv

  End Function

Entschlüsselung

Der Vorgang der Entschlüsselung erfolgt entsprechend der Logik der Entschlüsselung. Im Unterschied zur Verschlüsselung, wird bei der Entschlüsselung eine Objektinstanz erzeugt, der als Parameter ein Wert vom Typ DecryptionMode übergeben wird. Die Entschlüsselung erfolgt mit der ebenfalls überladenen Methode "Decrypt()". Der Methode "Decrypt()" wird der Geheimtext übergeben. Außerdem werden ihr entweder ein einzelnes Passwort oder zwei Passworte übergeben. Der entschlüsselte Klartext wird entweder von der Eigenschaft SingleDecryptedPlaintext oder von der Eigenschaft DoubleDecryptedPlaintext zurückgegeben.

Beispiel-Quellcode:

  Private Function DecryptString(ByVal ciphertext As String,
                                 ByVal pw1 As String,
                                 ByVal pw2 As String) As String

    Dim rv As String

    If String.IsNullOrEmpty(pw2) Then

      Dim cr As New CubeCrypt(DecryptionMode.SingleDecryption)

      cr.Decrypt(ciphertext, pw1)

      rv = cr.SingleDecryptedPlainText

    Else

      Dim cr As New CubeCrypt(DecryptionMode.DoubleDecryption)

      cr.Decrypt(ciphertext, pw1, pw2)

      rv = cr.DoubleDecryptedPlainText

    End If

    Return rv

  End Function

Implementierung mit Datenbindung (Datenbindung von Element zu Element)

Die Beispielanwendung, die in der Expression Gallery zum Download bereitgestellt ist, verwendet Datenbindung. Die Implementierung der Verschlüsselung und der Entschlüsselung mittels Datenbindung ist ziemlich einfach.

In der Beispielanwendung ist es so, dass bei einer Texteingabe von Klartext oder bei der Eingabe eines Passwortes oder eines zweiten Passwortes automatisch der Geheimtext geändert wird. Klartext, Passwort1, Passwort2, Geheimtext und der wieder entschlüsselte Klartext sind jeweils in TextBox-Steuerelementen enthalten. Die TextBox-Steuerelemente kommunizieren über Datenbindung miteinander. Die TextBox, die den Geheimtext enthält, ist mit der "TextProperty"-Abhängigkeitseigenschaft datengebunden an die Text-Eigenschaft der TextBox, die den Klartext enthält. Die TextBox, die den entschlüsselten Klartext anzeigen soll, ist mit der "TextProperty"-Abhängigkeitseigenschaft datengebunden an die Text-Eigenschaft der Textbox, die den Geheimtext enthält. Die Datenbindung funktioniert über jeweils ein Binding-Objekt. Eingebunden in jede dieser Datenbindungen bzw. in das jeweilige Binding-Objekt ist ein jeweils unterschiedlicher Converter. Ein Converter (EncryptConverter.vb) ist für die Verschlüsselung zuständig, ein anderer Converter (DecryptConverter.vb) ist für die Entschlüsselung zuständig. Jedem Binding-Objekt wird zusätzlich ein Parameter-Wert übergeben. Dieser Parameter beinhaltet das Passwort bzw. die beiden Passworte. Der Wert für den ConverterParameter wird in der Funktion GetConverterParameter() zurückgegeben. Diese Funktion erzeugt den Parameter-Wert aus dem Inhalt der beiden TextBox-Steuerelemente, die die Passworte enthalten.

Die nachfolgenden Grafiken veranschaulichen diese Funktionsweise:

Abbildung 3: Logic of encryption using DataBinding element to element

Abbildung 4: Logic of encryption using DataBinding element to element

Bei einer Datenbindung von Element zu Element besteht im Rahmen einer Verschlüsselung ein grundsätzliches Problem. Wenn der ConverterParameter im Xaml-Quellcode angegeben ist, kann das Passwort leicht ausgelesen werden. Denn der ConverterParameter stellt das Passwort bzw. die Passworte zur Verfügung, die innerhalb der Converter für die Verschlüsselung bzw. für die Entschlüsselung benötigt werden. Dieses Problem habe ich in der Beispielanwendung so gelöst, dass ein lesbares Passwort im Xaml-Quellcode und auch im Code Behind nicht explizit auftaucht! Um das zu erreichen, wird das DataBindung vollständig im Code Behind implementiert. Jeder der beiden implementierten Converter bezieht die Passworte jeweils nur zur Laufzeit über den Inhalt der TextBox-Steuerelemente, die für die beiden Passworte vorgesehen sind. Um das zu erreichen, wird die Datenbindung mit jedem Feuern des TextChanged()-Ereignisses neu definiert. Das heißt, die Passworte werden dem Bindungsobjekt jedesmal neu übergeben, wenn sich der Text in einer der TextBox-Steuerelemente für die Passworte ändert.

Im Ergebnis dieses Modells der Datenbindung verbleiben die Passworte jeweils nur im Arbeitspeicher des Computers. Es erfolgt keine explizite Speicherung der Passworte auf einem dauerhaften Speicherträger. Ich möchte jedoch darauf hinweisen, dass Silverlight derzeit nicht die Klasse SecureString unterstützt. Es kann daher auch im Rahmen einer Datenbindung nur der normale String-Typ benutzt werden. Im Gegensatz zu einem SecureString erfolgt bei der Verwendung von einem normalen String keine automatische Verschlüsselung des Werts der Zeichenfolge. Das ist allerdings eine allgemeine Einschränkung, die bei Silverlight derzeit hingenommen werden muss.

Den Quellcode der Beispielanwendung, die das beschriebene Modell der Datenbindung von Element zu Element implementiert, steht in der Expression Gallery zum Download bereit.

Über Feedback, Fragen und Anregungen würde ich mich sehr freuen. Bitte schickt mir eine E-Mail an silverlaw [at] t-online.de oder schreibt einen Kommentar zu diesem Artikel.

Im nächsten Artikel dieser Reihe werde ich ausführlich die Kryptologie und die Kryptanalyse des Verfahrens der Spaltentransposition darstellen. Das wird eine spannende Reise.

Bis dahin .... Viel Spass mit "CubeCrypt 2011".

Teil 1: Spaltentransposition Chiffre mit CubeCrypt 2011 - Das Verfahren der "Spaltentransposition"

2011-05-03T10:28:00.003+02:00

Seit gestern ist "CubeCrypt 2011" in der Expression Gallery zum Download bereitgestellt. "CubeCrypt 2011" ist ein Tool für Silverlight. Es ermöglicht das Verschlüsseln und Entschlüsseln von Text mithilfe eines speziellen Verschlüsselungsverfahrens. Dieses Verschlüsselungsverfahren wird "Spaltentransposition" genannt.

Diese dreiteilige Artikelreihe stellt das Verschlüsselungsverfahren der "Spaltentransposition" kurz vor und zeigt, wie man "CubeCrypt 2011" in einer Silverlight-Anwendung verwendet. Schließlich werde ich auf die kryptologische Sicherheit des Verfahrens und mögliche kryptanalytische Angriffe eingehen. Hier ist der Inhalt dieser Artikelreihe in der Übersicht:

Teil 1: Das Verfahren der "Spaltentransposition"
Teil 2: Verwendung von "CubeCrypt 2011"
Teil 3: Zur Kryptologie und Kryptanalyse der "Spaltentransposition" (noch nicht veröffentlicht)

Das Verfahren der "Spaltentransposition"

"Spaltentransposition" ist von seiner Herkunft her ein einfach anwendbares Handverfahren. Es kann überall und jederzeit sehr einfach nur mithilfe von Papier und Bleistift angewendet werden. Die Funktionsweise des Verschlüsselungsalgorithmus ist dadurch gekennzeichnet, dass die Positionen der Alphabetzeichen von einem Klartext durch Anwendung eines Passwortes auf den Klartext geändert werden.

Dabei werden die Zeichen von einem Klartext in Reihen geschrieben, die jeweils der Länge des Passwortes entsprechen.. Ein Beispiel:

Passwort: BERLIN

Diese Passwort hat die Länge 6.

Klartext: WE ARRIVE AT TEN PAST EIGHT

Die Leerzeichen werden entfernt, so dass der Klartext dann lautet:

WEARRIVEATTENPASTEIGHT

Dieser Klartext wird nun in Reihen, die jeweils der Länge des Passwortes entsprechen niedergeschrieben:

Nun werden die Spalten numeriert, und zwar nach der Reihenfolge, in der die Buchstaben des Passworts im Alphabet auftreten:

In alphabetischer Reihenfolge tritt als erstes der Buchstabe "B" auf. Die Spalte, die durch den Buchstaben "B" markiert ist, wird deswegen mit der Ziffer "1" numeriert.

In alphabetischer Reihenfolge tritt als nächtes der Buchstabe "E" auf. Die Spalte, die durch den Buchstaben "E" markiert ist, wird deswegen mit der Ziffer "2" numeriert.

Entsprechend dieser Logik werden alle Buchstaben des Passworts bzw. alle Spalten numeriert.

Um den Geheimtext zu erhalten, werden dann die Buchstaben im Klartext Spalte für Spalte in der Reihenfolge der Numerierungen ausgelesen und in einer Zeile aufgeschrieben. Als erstes werden die Buchstaben der ersten Spalte ausgelesen, danach die Buchstaben der zweiten Spalte, dann die Buchstaben der dritten Spalte, und so weiter. Die nachfolgende Grafik veranschaulicht diesen Vorgang.

Im Ergebnis erhalten wir den folgenden Geheimtext:

WVNIEEPGRTTRTSTIEEAAAH

Dieser Geheimtext ist das Ergebnis einer einzelnen Spaltentransposition. Bei einer doppelten Spaltentransposition wird auf den Geheimtext erneut eine einzelne Spaltentransposition angewendet.

Gegeben sei das weitere Passwort "HAMBURG". Der Geheimtext, der das Resultat der ersten einzelnen Spaltentransposition war, wird erneut in Reihen unterhalb des zweiten Passworts geschrieben. Die Buchstaben des Passworts bzw. die Spalten werden erneut entsprechend der oben beschriebenen Logik numeriert.

Die Spalten werden erneut in der numerischen Reihenfolge ausgelesen. Das Resultat ist der zweite Geheimtext.

VRIITEPSAWGTHNTEETAERA

Das ist das Ergebnis der doppelten Spaltentransposition.

Das ist fast alles, was zu der Anwendung der Spaltentransposition zu sagen ist. Eines fehlt noch. Wenn in einem Passwort ein Buchstabe mehrfach vorkommt, dann werden sie in der Reihenfolge ihres Auftretens im Passwort numeriert. Dazu ein Beispiel. In dem Passwort "HAMM" tritt der Buchstabe "M" zweimal auf. Die Buchstaben dieses Passworts werden wie folgt numeriert:

Der Vorgang der Entschlüsselung funktioniert folgendermaßen. Bekannt sind die folgenden Informationen:

Passwort 1: BERLIN

Passwort 2: HAMBURG

Geheimtext: VRIITEPSAWGTHNTEETAERA

Der Geheimtext hat 22 Zeichen. Das Passwort 1 hat 6 Zeichen. Das Passwort 2 hat 7 Zeichen.

Um den Geheimtext mithilfe der Passworte zu entschlüsseln, wird zunächst das Passwort 2 auf den Geheimtext angewendet. Auf den sich nach diesem Vorgang ergebenden Geheimtext wird das Passwort 1 angewendet. Das Ergebnis ist der Klartext. Bei der Entschlüsselung wird grundsätzlich das oben beschriebene Verfahren verwendet, nur in umgekehrter Reihenfolge.

Das folgende Beispiel veranschaulicht den Vorgang der Entschlüsselung:

Zunächst wird das zweite Passwort "HAMBURG" niedergeschrieben, die Buchstaben des Passworts werden numeriert und der Geheimtext "VRIITEPSAWGTHNTEETAERA" wird in Reihen unterhalb der Buchstaben des Passworts Spalte für Spalte eingetragen.

Weil der Geheimtext spaltenweise eingetragen wird, muss vorher bekannt sein, wieviele kurze Spalten und wieviel lange Spalten es gibt. Der Grund ist, dass die Anzahl der langen Spalten abhängt von der Anzahl der Zeichen im Passwort. Die Anzahl der langen Spalten wird anhand der folgenden Formel berechnet:

Anzahl der Geheimtextzeichen "MODULO" Anzahl der Passwortzeichen

Angewendet auf unser Beispiel:

22 MODULO 7

22 geteilt durch 7 ergibt 3 mit einem Rest von 1.

Das Ergebnis ist, dass es 1 lange Spalte gibt. Das ganzzahlige Ergebnis der obigen Berechnung gibt die Anzahl der vollständig ausgefüllten Reihen wieder.

Der Geheimtext wird nun zeilenweise ausgelesen. Das ergibt die folgende Zeichenfolge.

WVNIEEPGRTTRTSTIEEAAAH

Diese Zeichenfolge stellt das Ergebnis der ersten Verschlüsselung dar. Die Zeichenfolge muss nun mit dem ersten Passwort entschlüsselt werden. Dazu wird das erste Passwort aufgeschrieben und die Buchstaben des Passworts werden erneut numeriert.

Die Anzahl der langen Spalten und die Anzahl der vollständig ausgefüllten Reihen werden berechnet.

22 MODULO 6

22 geteilt durch 6 ergibt 3 mit einem Rest von 4

Jetzt kann die Zeichenfolge der ersten Entschlüsselung unter das erste Passwort Spalte für Spalte eingetragen werden. Die numerische Reihenfolge der Spalten muss eingehalten werden.

Dann werden die Reihen nacheinander ausgelesen. Das Resultat ist der ursprüngliche Klartext.

WEARRIVEATTENPASTEIGHT

Im zweiten Teil dieser Artikelreihe werde ich das Tool "CubeCrypt 2011" für Silverlight vorstellen.

CubeCrypt 2011 - Columnar Transposition Cipher For Silverlight 4

2011-05-02T15:56:00.003+02:00

Password1: SilverLaw

Password2: Solutions

Ciphertext:

Decrypt with CubeCrypt 2011.

Benutzerdefinierte angefügte Abhängigkeitseigenschaft IsKeepFocusVisual für den HyperlinkButton

2011-04-27T11:02:00.001+02:00

Kürzlich habe ich ein HyperlinkButton Custom Control veröffentlicht. Dieses Custom Control hat die zusätzliche Funktion, visuell anzuzeigen, ob der HyperlinkButton geklickt wurde, auch wenn er den visuellen Focus verloren hat.

Die selbe Funktionalität habe ich nun mithilfe einer benutzerdefinierten angefügten Abhängigkeitseigenschaft für einen regulären HyperlinkButton realisiert. Der Download wird in der Expression Gallery bereitgehalten. Dort gibt es auch einen Link zu einer Beispielanwendung.

Diese Lösung ist eine alternative Herangehensweise. Die Implementierung dieser Funktionalität mittels einer benutzerdefinierten angefügten Abhängigkeitseigenschaft ist meine bevorzugte Lösung. Denn sie ermöglicht die größtmögliche Freiheit bei der Gestaltung des Style bzw. der Vorlage eines regulären HyperlinkButton.

Ich werde in den nächsten Tagen hier im Blog einen detaillierten Artikel über die alternativen Lösungen veröffentlichen.

Datenbindung für den reichhaltigen Text eines RichTextBox-Steuerelements durch eine angefügte Abhängigkeitseigenschaft

2011-04-15T14:40:00.003+02:00

Heute las ich einen Artikel in Delay's Blog über eine angefügte Abhängigkeitseigenschaft für ein WebBrowser-Steuerelement. Ich kann nur empfehlen, diesen Artikel mal zu lesen. Als ich diesen Artikel gelesen hatte, dachte ich mir, dass es cool wäre, wenn es etwas vergleichbares auch für die RichTextBox.Xaml-Eigenschaft gäbe. Die RichTextBox.Xaml-Eigenschaft ist eine einfache Eigenschaft vom Typ String und keine Abhängigkeitseigenschaft. Wenn dies eine Abhängigkeitseigenschaft wäre, so wäre es möglich, den Inhalt für eine RichTextBox über Datenbindung zu setzen.

Also habe ich mich hingesetzt und eine kleine Klasse geschrieben, mit deren Hilfe eine Datenbindung für den reichhaltigen Inhalt einer regulären RichTextBox möglich wird. Dabei wird die angefügte Abhängigkeitseigenschaft XamlSource verwendet.

Eine Verwendung dieser angefügten Abhängigkeitseigenschaft setzt natürlich voraus, dass man einen String hat, der Xaml-Code enthält, der von der RichTextBox.Xaml-Eigenschaft verstanden wird. Hierfür verwende ich einfach xml-Dateien, die zuvor mit meinem RichTextBox.Xaml Builder Addin erstellt wurden.

Nachfolgend stelle ich eine kleine Beispielanwendung vor und beschreibe kurz, wie einfach die Logik funktioniert.

Beispielanwendung

Hier ist zunächst einmal eine kleine Beispielanwendung.

Die obige Anwendung besteht aus einer ListBox, mit mehreren ListBoxItems, und aus einer einzelnen RichTextBox. Abhängig davon, welches ListBoxItem ausgewählt ist, wird in der RichTextBox ein anderer Inhalt dargestellt.

Die Logik der Beispielanwendung

Die Klasse XamlAP.vb stellt eine angefügte Abhängigkeitseigenschaft bereit. Dies ist die angefügte Abhängigkeitseigenschaft mit dem Namen XamlSource. Die Eigenschaft XamlSource nimmt als Wert den qualifizierten Dateinamen einer xml-Datei entgegen. Der nachfolgende Quellcode-Ausschnitt zeigt den PropertyChangedCallBack OnXamlSourcePropertyChanged der Klasse XamlAP.vb:

    Shared Sub OnXamlSourcePropertyChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)

      Dim rtb As RichTextBox = CType(d, RichTextBox)

      If rtb Is Nothing Then

        Throw New NotSupportedException("XamlSource property only valid for RichTextBox instance.")

      End If

      Dim newSource As String = CStr(e.NewValue)

      If Not String.IsNullOrEmpty(newSource) Then

        rtb.Xaml = XElement.Load(newSource).ToString(SaveOptions.DisableFormatting)

        rtb.Selection.Select(rtb.ContentStart, rtb.ContentStart)

      End If

    End Sub

Hier wird der Xaml-Eigenschaft der RichTextBox als Wert der in einen String umgewandelte Inhalt einer xml-Datei zugewiesen. Die xml-Datei wurde zuvor mithilfe meines RichTextBox.Xaml Builder Addin erstellt. Wie man existierenden reichhaltigen Inhalt mit dem RichTextBox.Xaml Builder Addin so in xml konvertiert, dass das xml von der RichTextBox.Xaml-Eigenschaft als Xaml verstanden wird , habe ich hier beschrieben.

Um die angefügte Abhängigkeitseigenschaft verwenden zu können, muss der Namespace für die Klasse XamlAP.vb in MainPage.xaml referenziert werden:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:silverlaw="clr-namespace:RtbAttachedXamlPropertyLab.SilverLaw"
            ...

Der Wert für XamlSource wird dann als Attribute der RichTextBox im Xaml gesetzt:

silverlaw:XamlAP.XamlSource="{Binding SelectedItem.Content, ElementName=fileList, Converter={StaticResource ItemConverter}}"

Im obigen Code wurde die XamlSource-Eigenschaft datengebunden. Die Datenbindung ist eine Elementeigenschaftsdatenbindung an die Content-Eigenschaft der ListBoxItems. Die ListBoxItems enthalten jeweils einen String-Wert als Content-Eigenschaft. Dieser String-Wert enthält jeweils einen beschreibenden Text für den reichhaltigen Inhalt, der in der RichTextBox dargestellt werden soll. Die Datenbindung nimmt hier also den beschreibenden Text der ListBoxItem entgegen. Damit die Datenbindung versteht, welche Datei jeweils abgerufen werden soll, wurde zusätzlich ein Converter implementiert. Hier ist der Quellcode dieses Converters:

Imports System.Windows.Data

Namespace SilverLaw

  Public Class ItemToFileNameConverter
    Implements IValueConverter

    Public Function Convert(ByVal value As Object,
                            ByVal targetType As System.Type,
                            ByVal parameter As Object,
                            ByVal culture As System.Globalization.CultureInfo) _
                          As Object Implements System.Windows.Data.IValueConverter.Convert

      Dim item As String = CStr(value)

      Dim returnValue As String = ""

      Select Case item

        Case Is = "OnXamlSourcePropertyChanged"

          returnValue = "0065.xml"

        Case Is = "XamlSourceProperty"

          returnValue = "0066.xml"

        Case Is = "MainPage.xaml"

          returnValue = "0067.xml"

        Case Is = "MainPage.xaml.vb"

          returnValue = "0068.xml"

        Case Is = "XamlAP.vb"

          returnValue = "0069.xml"

        Case Is = "ItemToFileNameConverter.vb"

          returnValue = "0070.xml"

      End Select

      Return returnValue

    End Function

    Public Function ConvertBack(ByVal value As Object,
                                ByVal targetType As System.Type,
                                ByVal parameter As Object,
                                ByVal culture As System.Globalization.CultureInfo) _
                              As Object Implements System.Windows.Data.IValueConverter.ConvertBack

      ' code

    End Function

  End Class

End Namespace

Die Methode Convert erhält den beschreibenden Text von einem ListBoxItem als Parameter übergeben. Dieser Wert wird ausgewertet und abhängig von diesem Wert wird der qualifizierte Name der zutreffenden xml-Datei zurückgegeben. Der qualifizierte Name der xml-Datei wird dann, wie weiter oben erwähnt, im PropertyChangedCallBack der angefügten Abhängigkeitseigenschaft ausgewertet.

Das war's. Bei jedem Klick auf ein ListBoxItem wird der betreffende Inhalt dargestellt.

Viel Spass damit!

Download: Vollständiger Quellcode des Beispielprojekts.

Stay Selected HyperlinkButton Custom Control

2011-04-06T20:58:00.001+02:00

In einer Silverlight-Navigationsanwendung mit mehreren HyperlinkButton-Steuerelementen ist es ein bekanntes Problem: Wenn der Nutzer den Fokus beispielsweise in ein TextBox-Steuerelement setzt, dann verliert der HyperlinkButton seinen Fokus. Mit dem Verlust des Fokus verliert der HyperlinkButton zugleich seine Indikatorwirkung, das heißt, er zeigt nicht mehr an, welche Seite derzeit aktiv ist.

Der SilverLawHyperlinkButton, ein custom control, zeigt eine Lösung für dieses Problem auf.

Eine Beispielanwendung, die das Steuerelement in Aktion zeigt, gibt es hier.

Das Steuerelement einschließlich Quellcode gibt es hier.

UPDATE: Eine erweiterte und verbesserte Version des Custom Control steht ab sofort in der Expression Gallery zum Download bereit. Die Änderungen in der verbesserten Version betreffen vor allem den Aufbau der Vorlage in der Datei generic.xaml.
Ich werde sobald wie möglich einen Artikel dazu veröffentlichen.

Beispiel eines kreisrunden ProgressBar

2011-03-31T09:01:00.000+02:00

In der Expression Gallery findet Ihr ein neues Beispielprojekt für einen kreisrunden ProgressBar-Style. Das Beispiel benutzt einen Style für das ProgressBar-Steuerelement und etwas code behind, um die Funktionalität zu implementieren.

Hier ein Screenshot:

Den Download des vollständigen Quellcodes findet Ihr in der Expression Gallery.

Viel Spass damit.

Movie Countdown in Silverlight

2011-03-23T17:48:00.000+01:00

In der Expression Gallery findet Ihr ein Beispiel für einen "Movie Countdown", realisiert in Silverlight. Es gibt sicherlich viele andere Herangehensweisen, um einen "Movie CountDown" zu bauen. Ich habe den Ansatz gewählt, ein ProgressBar-Steuerelement als Grundlage zu nehmen.

Hier ist das Beispiel:

Das Interessante an der Entwicklung dieses Projekts war die Aufgabe, mit einem einigermaßen vertretbaren Aufwand eine kreisförmige Fortschrittsanzeige mit der ProgressBar zu implementieren. Mit ein wenig Handarbeit ist das auch recht einfach umzusetzen. Auf ein wenig "code behind" kann dabei zwar nicht verzichtet werden. Aber das grundlegende Prinzip ist recht einfach. Ich werde demnächst einen kleinen Artikel hierüber schreiben.

Download: Vollständiger Quellcode des Beispiel-Projekts.

Freihändiges Zeichnen LayoutPaths zur Laufzeit

2011-03-20T18:45:00.000+01:00

In der Expression Gallery findet Ihr ein kleines Beispiel-Projekt für das freihändige Zeichnen von LayoutPaths für eine PathListBox zur Laufzeit.

Hier geht's zum Download.

Eine Umfrage - Werbung in diesem Blog?

2011-03-17T19:08:00.001+01:00

Seit Längerem denke ich darüber nach, wie die Leser meines Blogs es wohl aufnehmen würden, wenn ich es zulassen würde, dass in diesem Blog Werbung geschaltet wird. Ich möchte das in Eure Hände legen und deswegen Eure Meinung dazu erfragen.

Die Frage ist in englischer Sprache gestellt. Denn seitdem ich diesen Blog aktiv betreibe, also seit August 2010, haben knapp 29000 Besucher meinen Blog besucht, wovon nur ca. 17% der Zugriffe aus Deutschland kamen.

Für alle, die kein Englisch sprechen, ist hier die Frage in deutscher Sprache gestellt:

Würde es Sie stören, wenn ich es erlauben würde,

dass in diesem Blog Werbung platziert wird?

Die Beteiligung an der Umfrage ist auf 400 Stimmen begrenzt. Also ... früher Vogel fängt den Wurm.

Bildvergleich mithilfe eines GridSplitter

2011-03-15T18:53:00.002+01:00

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!

Half Square UserControl

2011-03-14T09:40:00.003+01:00

Ich habe ein UserControl entwickelt, mit dem ein Halbquadrat erstellt werden kann. Den Download gibt es als .dll in der Expression Gallery. Einen Artikel über die Berechnungslogik für ein Halquadrat, erstellt aus einem RegularPolygon, findet Ihr hier.

Eigenschaften

Das "HalfSquareUserControl" wird grundlegend über fünf Eigenschaften konfiguriert:

Mithilfe der Eigenschaft "RightCornerOrientation" kann die Orientierung der durch den rechten Winkel definierten Ecke festgelegt werden. Dieser Eigenschaft können alternativ vier Werte zugewiesen werden: "TopLeft", "TopRight", "BottomRight" oder "BottomLeft".

Die Eigenschaft "SquareBrush" legt den Brush des Innenbereichs fest. Diese Eigenschaft entspricht der Eigenschaft "Fill" eines herkömmlichen RegularPolygon.

Die Eigenschaft "StrokeBrush" legt den Brush für den Stroke fest.

Über die Eigenschaft "SquareSize" werden die Seitenlängen des Quadrats festgelegt, in welches das Halbquadrat virtuell eingebettet ist. Das Setzen dieser Eigenschaft bewirkt, dass die Eigenschaften "Height" und "Width" jeweils die gleichen Werte haben.

Die Eigenschaft "StrokeThickness" bestimmt schließlich die Stärke des Stroke in Pixel.

Alle Eigenschaften sind als Abhängigkeitseigenschaften implementiert.

Verwendung

1. Herunterladen des Beispielprojekts in der Expression Gallery.

2. Dem eigenen Silverlight-Projekt wird eine Referenz zu der SilverLawHalfSquare.dll hinzugefügt. Die .dll findet man im /Bin/Release-Ordner des Beispielprojekts.

3. In der Registerkarte "Objekte" wird das "HalfSquareUserControl" ausgewählt ...

4. ... und mit einem Doppelklick der UI hinzugefügt. Die Eigenschaften des UserControls sind in die Kategorie "Layout" eingebettet:

5. Nach dem Hinzufügen des UserControls hat es zunächst eine Größe von 100px. Die Eigenschaften "Width" und "Height" sollten auf "Automatisch" gesetzt werden. Denn die Größe des UserControls wird einheitlich über die Eigenschaft "SquareSize" festgelegt. Eine Veränderung des Werts von "SquareSize" wirkt sich automatisch auf die Eigenschaften "Width" und "Height" aus. Das setzt aber voraus, dass diese beiden Eigenschaften auf "Automatisch" gesetzt wurden.

Eine Größenveränderung des UserControls sollte nur über die Eigenschaft "SquareSize" erfolgen, damit die quadratische Dimension immer beibehalten wird.

6. Optional können die Eigenschaften "StrokeThickness", "StrokeBrush", "SquareBrush" und "RightCornerOrientation" gesetzt werden.

Wichtiger Hinweis

Überwiegend wirkt sich jede Veränderung eines der Eigenschaftswerte bereits zur Entwurfszeit auf die visuelle Gestalt des UserControls aus. Hiervon gibt es eine Ausnahme. Nachdem die Eigenschaft "StrokeBrush" geändert wurde, sollte das Projekt neu erstellt werden, damit diese Änderung zur Entwurfszeit visuell ordentlich sichtbar wird. Andernfalls kann es passieren, dass bei einer späteren Änderung des Werts der Eigenschaft "StrokeThickness" die visuelle Darstellung zur Entwurfszeit verzerrt ist:

Dieses Verhalten tritt nur zur Entwurfszeit auf. Die Neuberechnung des Halbquadrats wird im Hintergrund zwar bei jeder Änderung einer Eigenschaft durchgeführt. Jedoch wird sie zur Entwurfszeit in der besagten Konstellation nicht sofort umgesetzt, sondern erst nach einer neuen Erstellung des Projekts:

Ich bin bemüht, diese Unannehmlichkeit in einer kommenden Version zu bereinigen. Zur Laufzeit tritt dieses Verhalten nicht auf.

Euer Feedback hilft mir bei der Weiterentwicklung des UserControls.

Was kommt als Nächstes?

Soweit ich Zeit finde, werde ich weitere Alternativen für ein wiederverwendbares HalfSquare Control entwickeln. Derzeit geplant sind eine Implementierung als CustomControl und als Subklasse, die von Path erbt.

Viel Spass vorerst mit dem HalfSquareUserControl.

Download: HalfSquareUserControl als .dll (ohne Quellcode) in der Expression Gallery.

VB.NET-Version von Beat Kiener's DependencyPropertyChangedListener für Silverlight

2011-03-08T19:50:00.003+01:00

Beat Kiener veröffentlichte in seinem Blog vor einiger Zeit einen sehr nützlichen Artikel, in dem er eine von ihm entwickelte DependencyPropertyChangedListener Klasse für Silverlight vorstellte.

Hier geht es zu dem lesenswerten Artikel von Beat Kiener, wo es auch den Quellcode der C#-Version gibt.

Der DependencyPropertyChangedListener ermöglicht es, nach Veränderungen des Werts einer Abhängigkeitseigenschaft zu lauschen und über ein Event hierüber benachrichtigt zu werden. Das ist in vielen Szenarien eine sehr nützliche Sache.

Ich habe den DependencyPropertyChangedListener von Beat Kiener übersetzt nach VB.NET. Denn ich konnte die Klasse in einem VB.NET-Projekt sehr gut brauchen. Beat Kiener war so freundlich und gab mir die Erlaubnis, die von mir übersetzte VB.NET-Version hier in meinem Blog zu veröffentlichen. Vielen Dank nochmal dafür!

Hier also ist der Quellcode der VB.NET-Version (die originalen Kommentare habe ich beibehalten):

DependencyPropertyChangedListener.vb:

Imports System.Windows.Data

Public Class DependencyPropertyChangedListener
#Region "Inner types"

  ' Helper element to make it possible to use the binding engine 
  'to get notified when the source element property changes.
  Protected Friend Class RelayObject
    Inherits DependencyObject

    Private Shared _listener As DependencyPropertyChangedListener

    Friend Sub New(ByVal listener As DependencyPropertyChangedListener)
      _listener = listener
    End Sub

    Public Shared ReadOnly ValueProperty As DependencyProperty =
      DependencyProperty.Register("Value",
                                  GetType(Object),
                                  GetType(RelayObject),
                                  New PropertyMetadata(New Object,
                                                       New PropertyChangedCallback(AddressOf OnValueChanged)))

    Public Property Value As Object
      Get
        Return GetValue(ValueProperty)
      End Get
      Set(ByVal value As Object)
        SetValue(ValueProperty, value)
      End Set
    End Property

    Public Shared Sub OnValueChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)

      Dim oldValue As Object = e.OldValue
      Dim newValue As Object = e.NewValue
      Dim source As RelayObject = CType(d, RelayObject)
      RelayObject.OnValueChanged(oldValue, newValue)

    End Sub

    Public Shared Sub OnValueChanged(ByVal oldValue As Object, ByVal newValue As Object)
      _listener.OnValueChanged(oldValue, newValue)
    End Sub

  End Class

#End Region


#Region " Events "

  ' Raises when the dependency property changes.
  Public Event ValueChanged As EventHandler(Of DependencyPropertyValueChangedEventArgs)

#End Region


  ' Holds a reference to the relay object in order that the GC does not collect it
  Private Property RelayInstance As RelayObject

  Public Shared Function Create(ByVal sourceElement As DependencyObject,
                                ByVal propertyPath As String) As DependencyPropertyChangedListener

    ' check input
    If sourceElement Is Nothing Then
      Throw New ArgumentException("sourceElement")
    End If

    If String.IsNullOrWhiteSpace(propertyPath) Then
      Throw New ArgumentException("propertyPath is empty")
    End If

    ' create listener
    Dim listener As DependencyPropertyChangedListener = New DependencyPropertyChangedListener

    ' setup binding
    Dim binding As Binding = New Binding
    binding.Source = sourceElement
    binding.Mode = BindingMode.OneWay

    binding.Path = New PropertyPath(propertyPath)

    ' create relay object
    Dim relay As RelayObject = New RelayObject(listener)

    ' ...the listener holds a reference to the relay object in order that the GC does not collect it
    listener.RelayInstance = relay

    ' set binding
    BindingOperations.SetBinding(relay, RelayObject.ValueProperty, binding)

    Return listener

  End Function


  Public Sub Detach()

    If Me.RelayInstance IsNot Nothing Then
      ' first: reset member to prevent further eventing of ValueChanged event.
      Dim temp As RelayObject = Me.RelayInstance
      Me.RelayInstance = Nothing

      ' second: clear the binding -> raises property changed event...
      temp.ClearValue(RelayObject.ValueProperty)

    End If

  End Sub

  Private Sub OnValueChanged(ByVal oldValue As Object, ByVal newValue As Object)

    ' raise event, but only if the listener is not detached.
    If Me.RelayInstance IsNot Nothing Then

      RaiseEvent ValueChanged(Me, New DependencyPropertyValueChangedEventArgs(oldValue, newValue))

    End If

  End Sub


End Class

DependencyPropertyValueChangedEventArgs.vb:

Public Class DependencyPropertyValueChangedEventArgs
  Inherits EventArgs


  Friend Sub New(ByVal oldValue As Object, ByVal newValue As Object)
    Me.OldValue = oldValue
    Me.NewValue = newValue
  End Sub

  '/// <summary>
  '///  Gets the value of the property before the change.
  '/// </summary>
  Public Property OldValue As Object

  '/// <summary>
  '/// Gets the value of the property after the change.
  '/// </summary>
  Public Property NewValue As Object

End Class

Verwendung in MainPage.xaml.vb:

Partial Public Class MainPage
  Inherits UserControl

  Private listener As DependencyPropertyChangedListener

  Public Sub New()
    InitializeComponent()

    listener = DependencyPropertyChangedListener.Create(Me.txTest, "Text")

    AddHandler listener.ValueChanged,
      New EventHandler(Of DependencyPropertyValueChangedEventArgs)(AddressOf listener_ValueChanged)

    AddHandler btDetach.Click, AddressOf DetachListener

  End Sub

  Private Sub listener_ValueChanged(ByVal sender As Object,
                                    ByVal e As DependencyPropertyValueChangedEventArgs)

    MessageBox.Show(e.NewValue.ToString)

  End Sub

  Private Sub DetachListener(ByVal sender As Object, ByVal e As RoutedEventArgs)

    If listener IsNot Nothing Then
      listener.Detach()
    End If

  End Sub

End Class

Viel Spass damit.

How To: Ein Halbquadrat aus einem RegularPolygon (Dreieck) erstellen

2011-03-06T17:01:00.002+01:00

Das ist ein Halbquadrat, auch bezeichnet als gleichschenklig-rechtwinkliges Dreieck:

Ein Halbquadrat wird als Halbquadrat bezeichnet, weil man es erzeugen kann, indem man ein Quadrat über seine Diagonale teilt. Dieser Artikel beschreibt, wie man ein solches Halbquadrat aus einem RegularPolygon erstellt. Dabei soll das Halbquadrat in einem quadratischen Canvas-Steuerelement platziert werden und zwar exakt so, dass es das Canvas über seine Diagonale teilt. Außerdem soll das Halbquadrat auch dann, wenn es einen Rand hat, also eine StrokeThickness mit einem Wert größer als "0", jeweils exakt positioniert bleiben. Das ist etwas trickreich. Schließlich soll das Halbquadrat so konfiguriert werden, dass es nur über eine einzige Eigenschaftsänderung ("Rotation") die Eck-Ausrichtung des rechten Winkels ändert.

Auf geht's.

Vorbemerkung
Ein RegularPolygon wird in "Expression Blend" als Triangle (Dreieck) bezeichnet. Im folgenden werde ich nur die Bezeichnung "Triangle" (Dreieck) verwenden, weil ein Triangle ein RegularPolygon ist, das über drei Punkte definiert wird.

Ein bißchen Geometrie
Gegeben ist ein Quadrat. Das Quadrat hat bekanntlich vier gleichlange Seiten. Die Seitenlänge des Quadrats wird mit "a" bezeichnet. Die Diagonale, die das Quadrat teilt, wird mit "d" bezeichnet. Die folgende Skizze visualisiert das:

Die Länge der Diagonalen "d" wird wie folgt berechnet:

d = √ 2 * a

Beispielrechnung:

a = 100
d = ?

d = 1.4142135623730950488016887242097 * 100

d = 141.42135623730950488016887242097

Die Höhe des Halbquadrats ist gleich der Hälfte der Diagonalen "d", also:

h = d * 0.5

Mehr Mathematik wird zunächst nicht benötigt, um zu verstehen, wie ein Halbquadrat geometrisch berechnet wird.

Trotzdem möchte ich an dieser Stelle bereits auf einen wichtigen Punkt hinweisen. Die Übertragung dieser geometrischen Berechnungsformel auf ein Dreieck, das in einer Silverlight-Anwendung verwendet werden soll, funktioniert nur eingeschränkt. Eingeschränkt insofern, als dass es zwar für ein Dreieck ohne Rand, nicht jedoch für ein Dreieck mit Rand funktioniert. Um das Problem zu verdeutlichen, verwende ich im folgenden Beispiel trotzdem zunächst diese reine geometrische Formel. Im weiteren Verlauf stelle ich dann die Formeln vor, die benötigt werden, um ein Dreieck mit Rand als Halbquadrat verwenden zu können.

Ein bißchen Blend
Um die Vorgehensweise zu verdeutlichen, wird ein Beispielprojekt erstellt. Der Oberfläche wird ein quadratisches Canvas hinzugefügt. Die Werte für Breite und Höhe betragen jeweils "150":

Mit einem Doppelklick auf die Form "Triangle" wird dem selektierten Canvas ein "Triangle"-Element hinzugefügt:

Der Wert für "StrokeThickness" wird zunächst auf "0" gesetzt. Ich gehe etwas später darauf ein, wie man die Berechnung der Größe des Halbquadrats modifizieren muss, um auch mit einer "StrokeThickness" > "0" das Halbquadrat so zu erzeugen, dass es exakt in das quadratische Canvas paßt.

Das Halbquadrat soll so im Canvas platziert werden, dass seine Breite der Länge der Diagonalen des Canvas entspricht. Deswegen wird anhand der oben genannten Formel die Breite des Halbquadrats berechnet. Die Seitenlänge des Canvas beträgt 150px. Also hat "a" den Wert 150. Die Berechnung lautet also:

d = 1.4142135623730950488016887242097 * 150

d = 212.132

Der Wert von "d" wird als Breite des Triangle eingetragen. Die Höhe des Triangle ist gleich der Hälfte der Länge der Diagonalen:

Danach sieht das Triangel so aus:

Wenn das Triangle jetzt um 45° gedreht wird, werden die gleichlangen Schenkel, die zueinander im rechten Winkel stehen, so ausgerichtet, dass sie parallel zu den Seiten des quadratischen Canvas verlaufen:

Das Triangle sieht dann so aus:

Das obige Bild zeigt, dass das Dreieck jetzt einen leichten Versatz hat. Es ist leicht nach links und nach unten versetzt. Diesen Versatz müssen wir beseitigen. Um diesen Versatz zu beseitigen, wird eine Translation über die X-Achse und über die Y-Achse benutzt. Für ein Triangle, das einen Wert für "StrokeThickness" = "0" hat, kann man folgende Formel benutzen, um die Werte für die Translations-Transformationen zu berechnen:

TranslateX = ((d - a) : 2) * -1

TranslateY = ((d - a) : 2) * -1

Damit diese Formel funktioniert, müssen die Werte für "RenderTransformOrigin" des "Triangle" folgendermaßen eingestellt werden:

Mit diesen Werten wird der Drehmittelpunkt des "Triangle" genau in der Mitte seines unteren Randes positioniert.

Jetzt wird die Formel angewendet ...

TranslateX = ((212.132 - 150) : 2) * -1

TranslateX = 31.066

TranslateY = ((212.132 - 150) : 2) * -1

TranslateY = 31.066

... und die Berechnungsergebnisse als X- bzw. Y-Translation des Triangle zugewiesen:

Jetzt sieht das Triangle innerhalb des Canvas folgendermaßen aus:

Aber halt. Nicht zu früh freuen! Denn bisher hat das Triangle eine "StrokeThickness" mit dem Wert "0". Was passiert, wenn wir dem "Triangle" jetzt eine "StrokeThickness" mit einem Wert > 0 zuweisen? Es passiert das hier, bei einer "StrokeThickness" mit einem Wert von beispielsweise "30":

Im obigen Bild hat der Stroke die Farbe blau. Man sieht, dass das Dreiecks offensichtlich seine exakte Positionierung verloren hat und das Dreieck ist auch kein gleichschenklig-rechtwinkliges Dreieck mehr. Um dieses ungewünschte Ergebnis zu bereinigen, müssen die Formeln zur Berechnung der Werte des Triangle folgendermaßen geändert werden, wobei "s" der Wert für die StrokeThickness ist:

a = 150
d = √ 2 * (a - s)

Triangle Width = d
d = √ 2 * (a - s)
d = √ 2 * (150 - 30)
=> Triangle Width = 169.7056

Triangle Height = h
h = (d : 2) + (s * 0.5)
h = (169.7056 : 2) + (30 * 0.5)
h = 99.8528
=> Triangle Height = 99.8528

TranslateX = ((d - a) * 0.5) * -1
TranslateX = ((169.7056 - 150) * 0.5) * -1
=> TranslateX = -9.8528

TranslateY = (((d - a) * 0.5) + (s * 0.5)) * -1
TranslateY = (((169.7056 - 150) * 0.5) + (30 * 0.5)) * -1
=> TranslateY = -24.8528

Zur Probe werden die obigen Berechnungsergebnisse als Eigenschaftswerte für das Triangle eingetragen:

Das Dreieck sieht nach diesen Änderungen so aus, wie es aussehen soll. Es fügt sich wieder exakt in das quadratische Canvas ein:

Änderung der Ausrichtung

Ich hatte weiter oben den Drehmittelpunkt des Dreiecks in der Mitte seines unteren Randes positioniert. Zur Erinnerung: Das erfolgte über die Einstellungen von RenderTransformOrigin. Der Vorteil des so definierten Drehmittelpunktes ist, dass das Dreieck jetzt sehr einfach in seiner Ausrichtung verändert werden kann. Und zwar über den Wert für die Rotation. Gegenwärtig beträgt der Drehwinkel 45°. Damit zeigt das Dreieck mit seinem rechten Winkel nach oben rechts. Über die Veränderung des Rotationswinkels kann die Ausrichtung verändert werden:

Rotation ----- Ausrichtung

-45° oben links

45 oben rechts

135 unten rechts

-135 unten links

Ein Berechnungsprogramm als Helfer
Ich habe ein kleines Berechnungsprogramm erstellt, das die erforderlichen Werte für ein Halbquadrat vornimmt. Hier ist es, die Bedienung sollte selbsterklärend sein:

Das Berechnungsprogramms kann einschließlich Quellcode in der Expression Gallery heruntergeladen werden.

Download: Quellcode des Berechnungsprogramms.

Viel Spaß also beim Design mit Halbquadraten.

How To: Eine Aktion erst mit der vollständigen Sichtbarkeit einer Anwendung im Browserfenster starten

2011-03-02T10:24:00.000+01:00

In meinem letzten Artikel habe ich beschrieben, wie man ein Storyboard erst dann startet, wenn die Anwendung im Browserfenster sichtbar wird. Die dort vorgestellte Lösung hat jedoch eine Beschränkung. Diese Beschränkung besteht darin, dass das Storyboard schon dann startet, wenn die Anwendung auch nur teilweise im Browserfenster sichtbar wird. Das liegt daran, dass das Ereignis "CompositionTarget.Rendering()" feuert, sobald auch nur ein Pixel der Anwendung sichtbar wird.

In diesem Artikel beschreibe ich eine Lösung, die es ermöglicht, eine Aktion erst dann zu starten, wenn die Anwendung vollständig im Browserfenster sichtbar ist. Diese Technik kann beispielsweise für das Erstellen einer Silverlight-Anwendung nützlich sein, mit der eine Werbung dargestellt werden soll.

Generelle Vorgehensweise
Die vorgestellte Lösung verwendet einen Trick. Dieser Trick besteht darin, dass oberhalb und unterhalb der eigentlichen Anwendung jeweils eine weitere Anwendung eingebettet wird. Es gibt also die Hauptanwendung, die den eigentlichen Inhalt darstellen soll. Unmittelbar oberhalb dieser Anwendung ist in der html-Seite eine weitere Anwendung eingebettet. Das ist die TopApp. Unmittelbar unterhalb der Hauptanwendung ist noch eine Anwendung in die html-Seite eingebettet. Das ist die BottomApp. Die beiden Anwendungen TopApp und BottomApp haben jeweils eine Breite, die der Breite der Hauptanwendung entspricht. Die Höhe von TopApp und BottomApp beträgt 1px.

Die drei Anwendungen kommunizieren über LocalMessaging miteinander. Wenn der Nutzer die html-Seite von oben nach unten scrollt, wird zunächst die TopApp sichtbar. Dann wird die Hauptanwendung sichtbar. Und zuletzt wird die BottomApp sichtbar. Sobald die TopApp sichtbar wird, beginnt das Ereignis "CompositionTarget.Rendering()" der TopApp zu feuern. Diesem Ereignis ist ein Delegat hinzugefügt. Die Methode, auf die dieser Delegat zeigt, hat die Aufgabe, an die Hauptanwendung eine Nachricht zu senden. Die Hauptanwendung notiert das in der Variablen "IsTopVisible" und setzt deren Wert auf "True". Damit die Methode, die im Sender für das Senden der Nachricht verantwortlich ist, entfernt wird, antwortet die Hauptanwendung dem Sender der TopApp mit einem TrueString. Damit der Sender von TopApp diese Antwort verarbeiten kann, ist dem Ereignis "SendCompleted()" des "LocalMessageSender" ein Delegat hinzugefügt. Die Methode, auf die dieser Delegat zeigt, hat die Aufgabe, die Anwort der Hauptanwendung zu verarbeiten. Das heisst, sie entfernt den Delegaten, der dem "CompositionTarget.Rendering()" von TopApp hinzugefügt worden war. Ebenso wie die TopApp, schickt auch die BottomApp an die Hauptanwendung eine Nachricht, sobald die BottomApp sichtbar ist. Die Hauptanwendung notiert das wiederum in einer Variablen. Das ist die Variable "IsBottomVisible", deren Wert auf "True" gesetzt wird. Wenn sowohl "IsTopVisible" als auch "IsBottomVisible" den Wert "True" haben, ist die Hauptanwendung vollständig sichtbar. Die Hauptanwendung kann dann die Aktion starten, die erfolgen soll, sobald sie vollständig sichtbar ist. Damit die Hauptanwendung reagieren kann, wird dem Ereignis "CompositionTarget.Rendering()" der Hauptanwendung ein Delegat hinzugefügt. Die Methode, auf die dieser Delegat zeigt, überprüft die beiden Variablen "IsTopVisible" und "IsBottomVisible" auf den Wert "True", führt dann die Aktion durch und entfernt schließlich den Delegaten wieder.

Quellcode
Nachfolgend ist der Quellcode der drei Anwendungen abgebildet.

1. "TopApp"

Imports System.Windows.Messaging

' ##############
' TOP SENDER App
' ##############

Partial Public Class MainPage
  Inherits UserControl

  Public Sub New()
    InitializeComponent()
    AddHandler CompositionTarget.Rendering, AddressOf SendMessages
    AddHandler TopSender.SendCompleted, AddressOf ListenToResponse
  End Sub

  Private TopSender As New LocalMessageSender("SilverLawTopReceiver")

  Private Sub SendMessages(ByVal sender As Object, ByVal e As EventArgs)
    TopSender.SendAsync(Boolean.TrueString)
  End Sub

  Private Sub ListenToResponse(ByVal sender As Object, ByVal e As SendCompletedEventArgs)
    If e.Response = Boolean.TrueString Then
      RemoveHandler CompositionTarget.Rendering, AddressOf SendMessages
      RemoveHandler TopSender.SendCompleted, AddressOf ListenToResponse
      MessageBox.Show("TopSender received True-Message as a response.")
    End If
  End Sub

End Class

2. "MainApp"

Imports System.Windows.Messaging

' ####################
' MAIN SILVERLIGHT APP
' ####################

Partial Public Class MainPage
  Inherits UserControl

  Public Sub New()
    InitializeComponent()
    AddHandler CompositionTarget.Rendering, AddressOf ListenToVisibility

    AddHandler MainTopReceiver.MessageReceived, AddressOf TopMessageReceived
    MainTopReceiver.Listen()
    AddHandler MainBottomReceiver.MessageReceived, AddressOf BottomMessageReceived
    MainBottomReceiver.Listen()
  End Sub


#Region " TOP VISIBILITY MESSAGING "

  Private IsTopVisible As Boolean

  Private MainTopReceiver As New LocalMessageReceiver("SilverLawTopReceiver")

  Private Sub TopMessageReceived(ByVal sender As Object, ByVal e As MessageReceivedEventArgs)
    If e.Message = Boolean.TrueString Then
      Me.IsTopVisible = True
      tbTopInfo.Text = "Top side visible."
      e.Response = Boolean.TrueString
    End If
  End Sub

#End Region


#Region " BOTTOM VISIBILITY MESSAGING "

  Private IsBottomVisible As Boolean

  Private MainBottomReceiver As New LocalMessageReceiver("SilverLawBottomReceiver")

  Private Sub BottomMessageReceived(ByVal sender As Object, ByVal e As MessageReceivedEventArgs)
    If e.Message = Boolean.TrueString Then
      Me.IsBottomVisible = True
      tbBottomInfo.Text = "Bottom side visible."
      e.Response = Boolean.TrueString
    End If
  End Sub

#End Region


#Region " LISTENING FOR FULL VISIBILITY OF THE APP "

  Private Sub ListenToVisibility(ByVal sender As Object, ByVal e As EventArgs)

    If Me.IsTopVisible = True And Me.IsBottomVisible = True Then
      LayoutRoot.Background = New SolidColorBrush(Colors.DarkGray)
      RemoveHandler CompositionTarget.Rendering, AddressOf ListenToVisibility
    End If

  End Sub

#End Region


End Class

3. "BottomApp"

Imports System.Windows.Messaging

' #################
' BOTTOM SENDER APP
' #################

Partial Public Class MainPage
  Inherits UserControl

  Public Sub New()
    InitializeComponent()
    AddHandler CompositionTarget.Rendering, AddressOf SendMessages
    AddHandler BottomSender.SendCompleted, AddressOf ListenToResponse
  End Sub

  Private BottomSender As New LocalMessageSender("SilverLawBottomReceiver")

  Private Sub SendMessages(ByVal sender As Object, ByVal e As EventArgs)
    BottomSender.SendAsync(Boolean.TrueString)
  End Sub

  Private Sub ListenToResponse(ByVal sender As Object, ByVal e As SendCompletedEventArgs)
    If e.Response = Boolean.TrueString Then
      RemoveHandler CompositionTarget.Rendering, AddressOf SendMessages
      RemoveHandler BottomSender.SendCompleted, AddressOf ListenToResponse
      MessageBox.Show("BottomSender received True-Message as a response.")
    End If
  End Sub

End Class

Beispielanwendung
Eine Beispielanwendung, mit der diese Technik demonstriert wird, findet man unter diesem Link. Sobald die Hauptanwendung vollständig sichtbar ist, wechselt die Hintergrundfarbe der Anwendung von Schwarz zu Dunkelgrau.

Viel Spass damit.

How To: Storyboard erst mit dem Sichtbarwerden der Anwendung im Browserfenster starten

2011-02-27T18:25:00.000+01:00

In zwei früheren Artikeln habe ich Techniken beschrieben, um ein Storyboard erst dann zu starten, wenn das Laden der Silverlight-Anwendung abgeschlossen ist. Diese Techniken helfen spätestens dann nicht mehr, wenn die Silverlight-Anwendung eine kleine Größe hat, Bestandteil einer größeren html-Seite ist und zunächst nicht sichtbar ist, wenn die html-Seite startet, z.B. weil sie am untersten Ende der html-Seite eingebettet ist.

Dieser Artikel schließt diese Lücke.

Am unteren Ende dieses Artikels findet Ihr eine Beispielanwendung, die die Technik demonstriert. Die Anwendung spielt ein Storyboard ab, sobald die Anwendung im Browserfenster sichtbar wird. Wer neugierig ist, scrollt diese Seite einfach runter und sobald die Beispielanwendung sichtbar wird, startet das Storyboard. (Das Storyboard bewegt einen Balken von links nach rechts und wechselt die Hintergrundfarbe von Dunkelgrau zu Grün. Es läuft nur einmal.) Nachfolgend findet Ihr zunächst den Quellcode.

Partial Public Class MainPage
    Inherits UserControl

  Public Sub New()

    InitializeComponent()

    AddHandler CompositionTarget.Rendering, AddressOf DoSomething

  End Sub

  Private Sub DoSomething(ByVal sender As Object, ByVal e As EventArgs)

    sbTest.Begin()

    RemoveHandler CompositionTarget.Rendering, AddressOf DoSomething

  End Sub

End Class

Und so funktioniert das Ganze. Im Ereignisbehandler des Konstruktors der Anwendung wird dem CompositionTarget.Rendering() Ereignis ein Delegat hinzugefügt. Dieser Delegat zeigt auf die Methode DoSomething(). Die Methode DoSomething() startet das Storyboard und entfernt dann den Delegaten.

Und warum funktioniert das Ganze? Ganz einfach: Das Ereignis "Rendering()" der Klasse CompositionTarget feuert nur dann, wenn das Silverliight-PlugIn im Browserfenster mindestens teilsweise sichtbar ist.

Diese Technik kann natürlich auch für anderes benutzt werden. Es kann beispielsweise ein Video abgespielt werden oder Inhalt dynamisch nachgeladen werden, sobald die Anwendung sichtbar wird.

Einfacher HyperlinkButton Style

2011-02-13T11:44:00.001+01:00

Ich habe einen neuen HyperlinkButton Style gestaltet, der in der Expression Gallery heruntergeladen werden kann. Er hat ein sehr schlichtes Design mit ein paar dezenten Animationen. Schaut es Euch einfach an.

Viel Spass damit.

Zweite Alternative: Storyboard soll nicht beginnen, bevor die Silverlight-Anwendung vollständig geladen ist

2011-02-04T16:39:00.002+01:00

Hierzu hatte ich vor einiger Zeit schon einmal einen kurzen Artikel geschrieben. Das Problem ist bekannt: Ein Storyboard soll nicht starten, bevor die Anwendung vollständig geladen und sichtbar ist. Dieser Artikel zeigt eine andere, alternative Lösung auf.

Diese alternative Lösung nutzt eine Eigenschaft des SilverlightHost. Das ist die Eigenschaft "IsLoaded". Diese Eigenschaft zeigt an, ob das gehostete "Silverlight-Plug-In" den Ladevorgang vollständig abgeschlossen hat.

Hier ist der betreffende Quellcode von MainPage.xaml.vb:

Public Sub New()

  InitializeComponent()

  pd = New DispatcherTimer With {.Interval = TimeSpan.FromMilliseconds(100)}

  AddHandler pd.Tick, AddressOf CheckLoadedStatus

  pd.Start()

End Sub

Private pd As DispatcherTimer

Private Sub CheckLoadedStatus(ByVal sender As Object, ByVal e As EventArgs)

  If App.Current.Host.IsLoaded = True Then

    pd.Stop()

    RemoveHandler pd.Tick, AddressOf CheckLoadedStatus

    sbMove.Begin()

  End If

Die Vorgehensweise ist total einfach. Im Konstruktor von MainPage wird ein DispatcherTimer mit einem Intervall von 100ms erzeugt. Die Routine "CheckLoadedStatus" hängt sich an das Tick-Ereignis des DispatcherTimers. Der DispatcherTimer wird gestartet. Die Methode "CheckLoadedStatus" überprüft alle 100ms den Wert von App.Current.Host.IsLoaded. Sobald der Wert auf "True" geht, wird der DispatcherTimer angehalten, der Delegat entfernt und das Storyboard gestartet.

Total simpel und es funktioniert garantiert.

SpriteAnimationBehavior

2011-02-03T19:38:00.005+01:00

Ich habe ein Behavior für ein Image Steuerelement entwickelt, mit dem man dem aus dem Image eine Szenerie für eine Spriteanimation machen kann. Das Behavior kann in der Expression Gallery heruntergeladen werden.

Eigenschaften
Das Behavior hat 4 Eigenschaften:

"FramesPerSecond" ist eine DependencyProperty und setzt die Anzahl der Einzelbilder pro Sekunde.
Über die Eigenschaft "ImageFormat" wird das Format der Bilder gesetzt.
"ImagesSource" ist der Pfad zu dem Dateiordner, in dem die Einzelbilder abgelegt sind.
Der Eigenschaft "TotalImageCount" wird die Anzahl der Einzelbilder zugewiesen.

Namenskonvention bei der Benennung der Bilddateien
Die einzelnen Bilddateien müssen einer bestimmten Namenskonvention folgen. Die Bilddateien müssen nach folgenden Muster benannt werden:

001[.jpg/.png], 002[.jpg/.png], 003[.jpg/.png], etc. bis zu 999[.jpg/.png].

Performance
Das Behavior kann mit bis zu 999 einzelnen Bilddateien arbeiten. Dabei muss natürlich unbedingt der Performance-Aspekt beachtet werden. Je weniger Einzelbilder verwendet werden, umso besser ist die Performance. Auch die Größe der Bilddateien beeinflußt die Performance. Je kleiner die Dateien sind, um besser ist die Performance. Außerdem empfiehlt sich aus Gründen der Performance eher die Verwendung von JPG-Dateien als PNG-Dateien. JPG-Dateien sollten zusätzlich komprimiert werden, um die Performance zu verbessern.

Starten einer Spriteanimation
Die Spriteanimation wird durch einen Klick auf das Image, dem das Behavior zugewiesen ist, gestartet.

Beispielanwendung
In der Expression Gallery findet Ihr ein Beispielprojekt. Schaut es Euch einfach mal an.

In der Beispielanwendung kann mit dem Slider die Eigenschaft "FramesPerSecond" zur Laufzeit geändert werden. Und zwar auch während die Spriteanimation läuft.

Dies ist die erste Version und ich plane, das Behavior weiterzuentwickeln.

Viel Spass damit.

How To: Freihandzeichnung mit Path-Erstellung synchronisieren

2011-02-01T19:05:00.001+01:00

Sharker Khaleed Mahmut beschreibt in einem Artikel, wie mithilfe eines InkPresenter zur Laufzeit auf ein Image gezeichnet werden kann. Wie das geht, könnt Ihr dort nachlesen. In diesem Artikel geht es darum, wie synchron mit einer Freihandzeichnung auf einen InkPresenter in einem Canvas-Steuerelement Path-Elemente erzeugt werden, die exakt dem entsprechen, was auf den InkPresenter gezeichnet wird. Ein Beispielprojekt mit Quellcode steht zum Download in der Expression Gallery.

Das ist ziemlich einfach und es funktioniert so.

Generelle Vorgehensweise
In den Eregnissen MouseLeftButtonDown, MouseLeftButtonUp und MouseMove werden, dem Beispiel von Sharker Khaleed Mahmut folgend, zunächst die Daten für das Erzeugen der Strokes auf dem InkPresnter erzeugt. Zusätzlich wird eine private Variable "pointList" erstellt, die vom Typ "List(Of StylusPointCollection)" ist. Dieser Variablen werden die gleichen Positionsdaten hinzugefügt, die in den Ereignisbehandlern MouseLeftButtonDown, MouseLeftButtonUp und MouseMove zum Erzeugen der Strokes auf dem InkPresenter verwendet werden. In "pointList" wird jeweils der Rückgabewert vom Typ StylusPointCollection gesammelt. Eine StylusPointCollection hat unter anderem einen X-Koordinatenwert und einen Y-Koordinatenwert. Diese in "pointList" gesammelten Positionsdaten einzelner Punkte werden dann verwendet, um einen Pfad zu erzeugen.

Und so funktioniert es Schritt für Schritt.

Schritt für Schritt
Schritt 1 - Vorbereitungen
Es wird ein neues Silverlight 4-Projekt erzeugt. Der Oberfläche wird ein Canvas (x:Name="cvElements") mit dem "Z-Index" "0" hinzugefügt. Dann wird ein InkPresenter ("inkTest") hinzugefügt mit einem Wert für den "Z-Index" von "1". Der InkPresenter wird mit der gleichen Größe und den gleichen Margin-Werten wie das Canvas-Steuerelement erzeugt.

Schritt 2 - Positionsdaten sammeln
Es wird die private Variable "pointList" erzeugt:

  Private pointList As New List(Of StylusPointCollection)

In den Ereignis-Behandlern von MouseLeftButtonDown (wenn der erste Punkte gezeichnet wird), MouseMove (wenn im Rythmus der MouseEventArgs fortwährend Punkte gezeichnet werden) von MouseLeftButtonUp (wenn der letzte Punkt gezeichnet wird), werden jeweils die einzelnen Punkte der "PointList" hinzugefügt.

Private Sub inkTest_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles inkTest.MouseLeftButtonDown

  inkTest.CaptureMouse()

  Dim points As StylusPointCollection = e.StylusDevice.GetStylusPoints(inkTest)

  currentStroke = New Stroke(points)

  currentStroke.DrawingAttributes.Color = Colors.Blue

  currentStroke.DrawingAttributes.Width = 10

  currentStroke.DrawingAttributes.Height = 10

  inkTest.Strokes.Add(currentStroke)

  ' Grab the position to fill the List(Of StylusPointCollection)
  pointList.Add(e.StylusDevice.GetStylusPoints(inkTest))
  '-------------------------------------------------------------

End Sub

Private Sub inkTest_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkTest.MouseMove

  If currentStroke IsNot Nothing Then

    pointList.Add(e.StylusDevice.GetStylusPoints(inkTest))

    currentStroke.StylusPoints.Add(points)

    ' Grab the position to fill the List(Of StylusPointCollection)
    Dim points As StylusPointCollection = e.StylusDevice.GetStylusPoints(inkTest)
    '-------------------------------------------------------------

  End If

End Sub

Private Sub inkTest_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles inkTest.MouseLeftButtonUp

  Dim points As StylusPointCollection = e.StylusDevice.GetStylusPoints(inkTest)
  currentStroke = New Stroke(points)

  inkTest.ReleaseMouseCapture()

  currentStroke = Nothing

  ' Grab the position to fill the List(Of StylusPointCollection)
  pointList.Add(e.StylusDevice.GetStylusPoints(inkTest))

  ' Create the path in the canvas
  If pointList.Count > 0 Then

    DrawPath()

  End If
  '---------------------------------------------------------

End Sub

Schritt 3 - Positionsdaten auswerten und den Pfad erzeugen
Im Ereignisbehandler des MouseLeftButtonUp events wird als letztes die Routine "DrawPath" aufgerufen. Hier ist der Quellcode dieser Routine:

Private Sub DrawPath()

  Dim pathToDraw As Path = New Path()

  Dim pathGeometry As PathGeometry = New PathGeometry()

  Dim pathFigure As PathFigure = New PathFigure()

  Dim pathSegments As PathSegmentCollection = New PathSegmentCollection()

  pathFigure.StartPoint = New Point(CreatePointFromStylusPointCollection(pointList.ElementAt(0)).X,
                                    CreatePointFromStylusPointCollection(pointList.ElementAt(0)).Y)

  For Each member As StylusPointCollection In pointList

    pathSegments.Add(CreateLineSegment(CreatePointFromStylusPointCollection(member)))

  Next

  pathFigure.Segments = pathSegments

  pathGeometry.Figures.Add(pathFigure)

  With pathToDraw

    .Data = pathGeometry

    .Stroke = New SolidColorBrush(Colors.Orange)

    .StrokeThickness = 10

    .StrokeLineJoin = PenLineJoin.Round

    .StrokeStartLineCap = PenLineCap.Round

    .StrokeEndLineCap = PenLineCap.Round

  End With

  Canvas.SetZIndex(pathToDraw, 0)

  cvElements.Children.Add(pathToDraw)

  pointList.Clear()

End Sub

Mit der Variablen "pathToDraw" wird ein neues Path-Element erzeugt. Außerdem wird die Variable "pathGeometry" vom Typ "PathGeometry" erzeugt. Diese wird später der Data-Eigenschaft des Pfads zugewiesen. Die Variable "pathFigure" vom Typ "PathFigure" wird später der "PathFigureCollection" von "pathGeometry" zugewiesen. Und der Eigenschaft "Segments" von "pathFigure" wird die "PathSegmentCollection", erzeugt in der Variablen "pathSegments", zugewiesen.

Das eigentliche Arbeitstier der Routine ist der folgende Quellcode-Ausschnitt:

  pathFigure.StartPoint =
    New Point(CreatePointFromStylusPointCollection(pointList.ElementAt(0)).X,
              CreatePointFromStylusPointCollection(pointList.ElementAt(0)).Y)

  For Each member As StylusPointCollection In pointList

    pathSegments.Add(CreateLineSegment(CreatePointFromStylusPointCollection(member)))

  Next

Es wird zunächst der Startpunkt des Pfads ermittelt und zugewiesen. Dazu wird die Funktion "CreatePointFromStylusPointCollection" verwendet. Der Quellcode dieser Funktion sieht so aus:

Private Function CreatePointFromStylusPointCollection(ByVal value As StylusPointCollection) As Point

  Return New Point With {.X = value.Item(0).X, .Y = value.Item(0).Y}

End Function

Die Funktion erhält als Parameter eine "StylusPointCollection" und gibt einen "Point" zurück. Um den Startpunkt des Pfads zu ermitteln, wird das erste Item aus der "List(Of SytlusPointCollection)", also von "pointList" genommen, und mit dem X-Wert sowie dem Y-Wert dieses Items der Rückgabewert der Funktion erzeugt.

In der "For Each"-Schleife wird dann mithilfe der Funktionen "CreateLineSegment" und "CreatePointFromStylusPointCollection" die einzelnen "LineSegments" erzeugt und der "PathSegmentsCollection" "pathSegments" hinzugefügt. Die Funktion "CreateLineSegment" sieht so aus:

Private Function CreateLineSegment(ByVal value As Point) As LineSegment

  Return New LineSegment With {.Point = value}

End Function

Um ein LineSegment zu definieren, benötigt man nur einen Punkt. Der eigentliche Pfad, der erzeugt wird, bewegt sich vom Startpunkt zum nächsten Punkt und von dort aus zum nächsten Punkt, usw. Jeder Punkt eines LineSegment steht für einen Punkt des Pfades. Das letzte LineSegment stellt den Endpunkt des Pfades dar. Und so hangelt sich die "For Each"-Schleife durch die "pointList" und erzeugt, nachdem der Startpunkt gesetzt wurde, die einzelnen Punkte (LineSegment.Point), die den endgültigen Pfad definieren.

Um die perfekte visuelle Übereinstimmung mit den Strokes, die auf den InkPresenter gezeichnet werden, zu bewirken, ist die der folgende Quellcode-Ausschnitt wichtig:

  With pathToDraw

    .Data = pathGeometry

    .Stroke = New SolidColorBrush(Colors.Orange)

    '!!!!!!!!!!!!!!!!!!!!!
    .StrokeThickness = 10

    .StrokeLineJoin = PenLineJoin.Round

    .StrokeStartLineCap = PenLineCap.Round

    .StrokeEndLineCap = PenLineCap.Round
    '!!!!!!!!!!!!!!!!!!!!!
  End With

Im obigen Quellcode-Ausschnitt werden alle Ecken sowie der Startpunkt und der Endpunkt des Pfads abgerundet. Das ist wichtig, weil auch die Strokes rund sind. Außerdem wird die "StrokeThickness" des Pfads auf den Wert "10" gesetzt. Das entspricht der Höhe und der Breite der Strokes:

Private Sub inkTest_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles inkTest.MouseLeftButtonDown

  inkTest.CaptureMouse()
  Dim points As StylusPointCollection = e.StylusDevice.GetStylusPoints(inkTest)
  currentStroke = New Stroke(points)
  currentStroke.DrawingAttributes.Color = Colors.Blue

  '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  currentStroke.DrawingAttributes.Width = 10

  currentStroke.DrawingAttributes.Height = 10
  '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  inkTest.Strokes.Add(currentStroke)
  ' Grab the position for the List(Of StylusPointCollection)
  pointList.Add(e.StylusDevice.GetStylusPoints(inkTest))
  '---------------------------------------------------------

End Sub

Abschließend wird der erzeugte Pfad dem Canvas hinzugefügt und mit pointList.Clear() die "pointList" geleert. Das ist wichtig, weil bei der nächsten Pfad-Zeichnung andernfalls auch die alten Werte noch verarbeitet werden würden.

Das war's!

Das Beispielprojekt, das hier heruntergeladen werden kann, enthält noch deutlich mehr Quellcode. Der dient aber nur dazu, die Anwendung einigermaßen ansehnlich zu gestalten. Die grundlegende Technik hat dieser Artikel aufgezeigt.

Viel Spass damit.

How To: Storyboard Completed Behaviors verwenden

2011-02-01T11:54:00.008+01:00

Kürzlich gab es eine sehr interessante Diskussion zu einer Frage, die im Expression Blend + SketchFlow Forum gestellt wurde. Die Frage war von jemandem gestellt worden, der "Expression Blend 4" als Designer nutzt. Die Frage war, wie man ein anderes Storyboard beginnen kann, unmittelbar nachdem ein Übergang in einen visuellen Zustand beendet ist oder nachdem ein Storyboard beendet ist.

Aus der Sicht eines Entwicklers ist diese Frage einfach zu beantworten. Für einen Designer, der nicht oder wenig programmieren kann, kann diese Anforderung problematisch sein. Die Diskussion erinnerte mich daran, dass Behavior eigentlich als ein Werkzeug für Designer gedacht sind.

Also machte ich mich daran, ein Behavior zu schreiben, dass diese einfachen Aufgaben erledigt. Das Ergebnis sind die StoryboardCompletedBehaviors.

Im Folgenden beschreibe ich, wie man diese Behaviors verwendet.

Der Artikel ist ganz bewußt sehr ausführlich und mit kleinen Schritten gestaltet. Fortgeschrittene Nutzer von Expression Blend können sich darauf beschränken, die "Übersicht (Overview)" und "Schritt 3" zu lesen.

Übersicht
Der Download, den Ihr in der Expression Gallery findet, enthält ein Beispiel-Projekt mit der Datei "SilverLawCompletedBehaviors.dll". Diese Bibliothek stellt eine Action und drei Trigger zur Verfügung. Das ist die "StoryboardCompletedAction" und der "StoryboardCompletedTrigger", der "StateStoryboardCompletedTrigger" sowie der "GoToStateOnStoryboardCompletedTrigger". Alle drei Trigger können der Action als Trigger zugewiesen werden.

Der "StoryboardCompletedTrigger" erledigt die Aufgabe, nach einem Storyboard ein anderes Storyboard zu starten.

Der "StateStoryboardCompletedTrigger" erledigt die Aufgabe, nach einem Storyboard, das zu einem bestimmten visuellen Zustand gehört, ein anderes Storyboard zu starten.

Update:
Der "GoToStateOnStoryboardCompletedTrigger" hat die Aufgabe, in einen bestimmten visuellen Zustand zu wechseln, nachdem ein bestimmtes Storyboard beendet ist.

Zum "StateStoryboardCompletedTrigger" kurz eine Erklärung (für Designer): Ein visueller Zustand kann ein Storyboard enthalten. Dieses Storyboard in einem visuellen Zustand ist dann dafür verantwortlich den Wechsel von einem visuellen Zustand zu diesem visuellen Zustand, in dem das Storyboard enthalten ist, mit einer Animation ablaufen zu lassen. Wenn also zum Beispiel für den visuellen Zustand "VS_2" ein Storyboard definiert ist, dann läuft dieses Storyboard ab, wenn von einem anderen visuellen Zustand, also zum Beispiel "VS_1" zum visuellen Zustand "VS_1" gewechselt wird.

Jeder dieser drei Trigger kann der "StoryboardCompletedAction" als Trigger hinzugefügt werden. Nachfolgend beschreibe ich, wie das geht.

Schrit für Schritt

Schritt 1 - Verweisen auf die SilverLawCompletedBehaviors.dll
In einem neuen Silverlight 4 Projekt wird in der Registerkarte "Projekte" im Projektexplorer mit einem Rechtsklick auf "Verweise" -> "Verweis hinzufügen ..." zum Speicherplatz der Datei "SilverLawCompletedBehaviors.dll" navigiert, diese wird selektiert und mit "Öffnen" zu den Verweisen hinzugefügt.

Hiernach erscheint in der Registerkarte "Objekte" unter "Verhalten" die "StoryboardCompletedAction".

Um diese Action zu vewenden, brauchen wir ein paar Storyboards und ein Element mit zwei visuellen Zuständen.

Schritt 2 - Erstellen der Storyboards und der visuellen Zustände
Auf die Oberfläche wird ein neues Ellipse-Steuerelement gezeichnet:

Mit "F6" wird in den Animationsarbeitsbereich gewechselt, damit wir zwei Storyboards erstellen können. In der Registerkarte "Objekte und Zeitachsen" wird auf das Plus-Zeichen geklickt.

In dem Dialg, der erscheint, erhält das neue Storyboard den Namen "sbMoveRight". Klick "Ok".

Dann werden zwei KeyFrames hinzugefügt. Einer bei Position 0:00,000 ein weiterer bei Position 0:01,000.

Bei der Position des zweiten KeyFrame soll das Ellipse-Steuerelement nach rechts verschoben sein. Dazu wird das Ellipse-Steuerelement selektiert, und in den Eigenschaften unter "Transformation" eine "Translation" von 200 auf der X-Achse erzeugt:

Dann wird ein zweites Storyboard erstellt, das das Ellipse-Steuerelement wieder von Rechts nach Links zurückbewegt. Dieses Storyboard erhält den Namen "sbMoveLeft". Dazu wird das erste Steuerelement kopiert ...

umgekehrt ...

und umbenannt ...

Als nächstes erzeugen wir für das Ellipse-Steuerelement noch zwei visuelle Zustände. Dazu wird das Storyboard "sbMoveLeft" geschlossen, mit "F6" wieder in den Design-Arbeitsbereich gewechselt und die Registerkarte "Zustände" selektiert. Die folgenden Schritte zeigen den Ablauf.

Es wird eine neue StatusGruppe hinzugefügt ...

und mit "E1_States" benannt ...

Dann wird ein neuer visueller Status hinzugefügt ...

Dieser Zustand erhält den Namen "normal".

Ein weiterer Zustand wird hinzugefügt. Dieser erhält den Namen "pulse".

Dann wird das Ellipse-Steuerelement selektiert.

In diesem visuellen Zustand soll das Ellipse-Steuerelement pulsieren. Das wird mit Hilfe eines Storyboard erledigt, das wir für diesen visuellen Zustand erzeugen. Dazu wird als erstes durch einen Klick auf diese Schaltfläche ...

... die Zeitachse angezeigt:

Es werden drei KeyFrames hinzugefügt ...

Bei der Position des ersten KeyFrame wird keine Eigenschaft verändert. Bei der Position des zweiten KeyFrame ...

... werden die Farbe des Stroke und die Farbe des Fill von dem Ellipse-Steuerelement ausgetauscht ...

Und bei der Position des dritten KeyFrame behalten Stroke und Fill ihre ursprünglichen Farben (es wird also nichts verändert) ...

Jetzt sind alle Vorbereitungen getroffen, um mit der Hilfe von Behavior folgendes zu erreichen: Bei einem Klick mit der Maus auf die Ellipse soll es in den visuellen Zustand "pulse" wechseln. Sobald der Übergang in diesen visuellen Zustand abgeschlossen ist, soll das Storyboard "sbMoveRight" beginnen. Und sobald das Storyboard "sbMoveRight" beendet ist, soll das Storyboard "sbMoveLeft" begínnen.

Schritt 3 - Hinzufügen und Einstellen der Behavior
Um den Übergang in den visuellen Zustand "pulse" bei einem Klick auf das Ellipse-Steuerelement zu bewirken, wird dem Ellipse-Steuerelement per Drag & Drop eine "GoToStateAction" hinzugefügt.

Die "GoToStateAction" wird selektiert und in den Eigenschaft wird als "StateName" der "pulse" Zustand ausgewählt.

Als nächstes werden nacheinander zwei "StoryboardCompletedAction" per Drag & Drop auf das UserControl gezogen. Wir beginnen mit der ersten "StoryboardCompletedAction".

Diese "StoryboardCompletedAction" übernimmt die Aufgabe, das Storyboard "sbMoveRight" zu starten, sobald der Übergang zum visuellen Zustand "pulse" beendet ist. Um das zu erreichen, muss dieser Action in den Eigenschaften ein "StateStoryboardCompletedTrigger" hinzugefügt werden.

Die Eigenschaften der "StoryboardCompletedAction" sehen danach so aus:

Der Eigenschaft "FirstState" wird der Name des visuellen Zustand zugewiesen, an dessen Übergangsende ein anderes Storyboard gestartet werden soll. Das Storyboard, das gestartet werden soll, wird der Eigenschaft "NextStoryboard" zugewiesen ...

Dann wird dem UserControl per Drag & Drop eine weitere "StoryboardCompletedAction" hinzugefügt. Diese Action übernimmt die Aufgabe, nach dem Ende des Storyboard "sbMoveRight" das Storyboard "sbMoveLeft" zu starten. Um das zu erreichen, wird dieser "StoryboardCompletedAction" ein "StoryboardCompletedTrigger" hinzugefügt.

Wichtiger Hinweis: Es gibt einen anderen "StoryboardCompletedTrigger", der aber aus dem Namespace "Microsoft.Expression.Interactivity.Media" stammt. Dieser andere "StoryboardCompletedTrigger" funktioniert nicht mit der von mir entworfenen "StoryboardCompletedAction". Deswegen muss darauf geachtet werden, dass der "StoryboardCompletedAction" unbedingt der "StoryboardCompletedTrigger" aus dem Namespace "SilverLaw" zugewiesen wird.

Jetzt müssen die Eigenschaften für die zweite "StoryboardCompletedAction" eingestellt werden. In der Auswahl für die Eigenschaft "FirstStoryboard" wird das Storyboard ausgewählt, nach dessen Ende ein anderes Storyboard gestartet werden soll. In der Auswahl der Eigenschaft "NextStoryboard" wird das Storyboard ausgewählt, das nach dem ersten Storyboard gestartet werden soll. Im Ergebnis sieht das dann so aus:

Das war's!

"F5" drücken, um das Projekt auszuführen. Ein Klick auf das Ellipse-Steuerelement startet als erstes den Übergang zum visuellen Zustand "pulse". Nachdem dieser Übergang abgeschlossen ist, startet das Storyboard "sbMoveRight". Und nachdem "sbMoveRight" abgeschlossen ist, startet das Storyboard "sbMoveLeft".

~~Es gibt noch einen Hinweis auf eine derzeit noch bestehende Beschränkung. Der Name für LayoutRoot muss "LayoutRoot" bleiben. Andernfalls wirft das Behavior einen Fehler.~~ Update: Die Beschränkung aus der ersten Version (1.0.0.0) ist beseitigt. Das LayoutRoot-Element kann jetzt (in der Version 1.1.0.0) nach Belieben umbenannt werden. Unverändert kann der Steuerelement-Typ von LayoutRoot beliebig geändert werden. LayoutRoot kann also ein Grid, ein Canvas, ein Border, eine ViewBox, ein StackPanel oder ein ScrollViewer sein.

Viel Spass mit den "StoryboardCompletedBehaviors".

Download: Beispiel-Projekt mit den "StoryboardCompletedBehaviors"

Synchronisieren einer Freihandzeichnung mit einer realen Path-Erstellung

2011-01-31T19:56:00.002+01:00

In der Expression Gallery findet Ihr eine neue Beispielanwendung. Das Beispiel demonstriert, wie man eine Freihandzeichnung, die zur Laufzeit mit der Maus in einem InkPresenter erzeugt wird, mit dem Erstellen von realen Pfad-Elementen in einem Canvas synchronisieren kann. In einem Canvas werden also WYSIWYG Path-Elemente erzeugt, die dem entsprechen, was auf einen InkPresenter gezeichnet wird.

Hier sind ein paar Screenshot:

Bild 1: Die leere Zeichenfläche

Bild 2: Eine Freihandzeichnung auf den InkPresenter

Bild 3: Die entsprechenden Path-Elemente in einem Canvas

Der Download beinhaltet den vollständigen Quellcode.

Einen Artikel, der Schritt für Schritt beschreibt, wie das funktioniert, findet Ihr hier in meinem Blog.

Viel Spass für's erste mit dem Beispiel.

Ein Bildbetrachter mit Lupe

2011-01-25T21:05:00.000+01:00

In der Expression Gallery findet Ihr ein neues Beispielprojekt. Es ist ein Bildbetrachter mit Lupe. Einige coole features sind dabei. Schaut es Euch einfach an und spielt damit. Der Quellcode ist wie immer dabei.

Hier sind ein paar Screenshots:

Viel Spass damit!

Echte bewegliche Lupe - Silverlight 4

2011-01-24T15:05:00.000+01:00

Ich habe ein Beispielprojekt für eine alternative Vorgehensweise zum Erstellen einer Bilder-Lupe entwickelt. Meine Lösung implementiert einen echten MagnifyEffect, der mit einem dynamischen Beschneidungspfad kombiniert ist.

Nachfolgend seht Ihr ein Beispiel, das diese Technik nutzt.

In dem obigen Beispiel aktiviert ein Klick auf das Image die Lupe. Wenn die Lupe aktiviert ist, kann mit der Bewegung des Mausrads ergänzend der Zoom verändert werden. Die Lupe folgt der Bewegung des Mauszeigers. Ein erneuter Klick läßt die Lupe wieder verschwinden.

Der Quellcode, der die grundlegende Technik verdeutlicht, steht zum Download in der Expression Gallery. Ergänzend kann der Quellcode für das obige Beispiel hier heruntergeladen werden.

Die von mir gewählte Lösung arbeitet etwas anders, als bereits vorhandene Lösungsansätze. Sobald ich Zeit habe, werde ich über die von mir gewählte Lösung einen Artikel in meinem Blog veröffentlichen.

How To: Sanfte Animation eines Magnify-Effekt

2011-01-14T09:13:00.001+01:00

Kürzlich habe ich das Beispiel-Projekt "Just Fun" in der Expression Gallery veröffentlicht. Bestandteil dieses Projekts ist ein animierter Magnify-Effekt. Dieser Effekt wirkt in dem Beispiel - wie ich finde - deswegen ziemlich cool, weil das visuelle Element, auf das der Effekt angewendet wird, ein Linsenglas ist.

Dieser Artikel hier beschreibt kurz, wie man einen Magnify-Effekt sanft animiert. Er ist sehr einfach nachzuvollziehen. Das Beispielprojekt kann in der Expression Gallery angeschaut werden. Dort steht auch der Quellcode zum Download bereit.

Generelle Vorgehensweise

Ein Magnify-Effekt wird zu einem visuellen Element hinzugefügt. Die Eigenschaften des Magnify-Effekts werden zunächst so eingestellt, dass der Effekt visuell keine Auswirkung hat. Der Effekt soll sanft erscheinen, wenn die Maus über das Element bewegt wird und ebenso sanft verschwinden, wenn die Maus sich nicht länger über dem Element befindet. Hierfür werden zwei Storyboards erzeugt, die aktiviert werden, wenn die Ereignisse MouseEnter bzw. MouseLeave feuern. Außerdem soll der Magnify-Effekt dem Mauszeiger folgen, wenn sich die Maus über dem Element befindet. Dazu wird einfach im Ereignis MouseMove zur Laufzeit die Position des Mauszeigers abgefangen und die berechnete Position der Center-Eigenschaft des Magnify-Effekts zugewiesen.

Schritt für Schritt

Schritt 1 - Hinzufügen des Magnify-Effekt
Das visuelle Element, auf das der Effekt angewendet werden soll, befindet sich im Objektbaum innerhalb eines Grid-Steuerelements. Ich benutze Expression Blend 4. Aus der Registerkarte "Objekte" wird aus "Effekte" der Magnify-Effekt selektiert und per Drag&Drop auf dieses Grid-Steuerelement gezogen. Das bewirkt, dass sich der Effekt visuell nicht nur auf das Grid-Steuerelement, sondern auf alle Kind-Elemente auswirkt, die sich in diesem Grid befinden.

Da später zur Laufzeit die Eigenschaften des Effekts manipuliert werden sollen, muss der Effekt einen Namen erhalten. Im Beispiel ist dies der Name "myMag".

Schritt 2 - Anfängliche Einstellung der Eigenschaften des Effekts
Die Eigenschaften des Magnify-Effekt werden wie folgt eingestellt:

Amount: "25%"
Center: "0,5" und "0,5"
InnerRadius: "0"
OuterRadius: "0"

Die Wertzuweisungen von jeweils "0" für die Eigenschaften InnerRadius und OuterRadius bewirken, dass sich der Effekt zunächst visuell nicht auswirkt.

Schritt 3 - Erstellen der Storyboards für das MouseEnter-Ereignis und für das MouseLeave-Ereignis
Es werden zwei Storyboards erstellt. Das Storyboard "sbMakeMag" läßt den Magnify-Effekt beim Eintreten des Mauszeigers in das Element langsam erscheinen. Das Storyboard "sbReleaseMag" läßt den Magnify-Effekt beim Austreten der Maus aus dem Element langsam wieder verschwinden.

sbMakeMag
In Expression Blend 4 wird mit F6 in den Arbeitsbereich "Animation" gewechselt. In der Registerkarte "Objekte und Zeitachsen" wird der Magnify-Effekt selektiert. Dann wird bei der Timeline-Position "0:00,000" ein neuer Keyframe hinzugefügt. Bei der Timeline-Position 0:00,400 wird ein zweiter Keyframe hinzugefügt. Für diesen Keyframe werden die Eigenschaften des Magnify-Effekts wie folgt eingestellt:

Amount: "25%"

Center: "0,5" und "0,5"
InnerRadius: "0,25"
OuterRadius: "0,41"

Damit der Lupeneffekt mit einer realistischen Bewegung eintritt, wird dem zweiten Keyframe eine EasingFunction hinzugefügt. Dazu wird der Keyframe mit einem einfachen Mausklick selektiert und in der Registerkarte "Eigenschaften" eine "SineOut"-EasingFunction ausgewählt.

sbReleaseMag
Das zweite Storyboard wird erstellt, indem einfach das erste Storyboard dupliziert und umgekehrt wird. Das Umbenennen nicht vergessen.

Schritt 4 - Aktivieren der Storyboards bei MouseEnter bzw. MouseLeave
Das Storyboard sbMakeMag wird im MouseEnter-Ereignisbehandler gestartet und das Storyboard sbReleaseMag wird im MouseLeave-Ereignisbehandler gestartet:

  Private Sub Overlay_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseEnter

    If IsMagActive = True Then

      sbMakeMag.Begin()

    End If

  End Sub

  Private Sub Overlay_MouseLeave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseLeave

    If IsMagActive = True Then

      sbReleaseMag.Begin()

    End If

  End Sub

Im konkreten Beispiel habe ich dem sichtbaren Bereich ein Ellipse-Steuerelement als Overlay hinzugefügt, um den Quellcode verständlicher zu gestalten. Dieses Overlay-Element ist entsprechend benannt.
Schritt 5 - Magnify-Effekt soll dem Mauszeiger folgen
Als letztes wird der Code erstellt, damit der Magnify-Effekt dem Mauszeiger folgt. Hier ist der betreffende Quellcode:

  Private Sub Overlay_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseMove

    If IsMagActive = True Then

      Dim CP As Point = e.GetPosition(Overlay)

      CP.X /= Overlay.ActualWidth

      CP.Y /= Overlay.ActualHeight

      myMag.Center = CP

    End If

  End Sub

Der Variablen "CP" wird im MouseMove-Ereignis die Position des Mauszeigers innerhalb des Overlay-Elements zugewiesen. Diese Variable ist vom Typ "Point". Dann werden der X-Wert und der Y-Wert für die Eigenschaft "Center" des Magnify-Effekts ermittelt, indem der X-Wert der Mauszeigerposition durch die aktuelle Breite des Overlay-Elements geteilt wird. Entsprechend wird Y-Wert der Mauszeigerposition durch die aktuelle Höhe des Overlay-Elements geteilt. Schließlich wird dieser Wert der "Center"-Eigenschaft des Magnify-Effekts zugewiesen. Jedesmal, wenn das MouseMove-Ereignis feuert, wird jetzt die "Center"-Position des Magnify-Effekts aktualisiert.

Das war's.

Einfach nur Spass

2011-01-12T14:20:00.000+01:00

Dieses Beispielprojekt ist einfach nur Spass. Mit aktivierter Lupe erzeugt man ein unterschiedliche Gesichter, je nachdem, wo auf die Blende geklickt wird.

Also ... viel Spass damit ;-)

Bildbetrachter mithilfe eines GridSplitter-Steuerelements

2011-01-11T14:12:00.002+01:00

Ich weiß nicht, welche Erfahrungen Ihr gemacht habt. Ich habe jedenfalls den Eindruck, dass das GridSplitter-Steuerelement eher eine Außenseiterrolle einnimmt. Also habe ich mir eine vielleicht sinnvolle Verwendung für ein GridSplitter-Steuerelement überlegt. Das Ergebnis ist der "GridSplitter Picture Viewer".

Der "GridSplitter Picture Viewer" ist kein UserControl und auch kein CustomControl. Er verdeutlicht nur, wie man ein GridSplitter-Steuerelement einsetzen kann, um einen einfachen Bildbetrachter zu erstellen.

Das Beispielprojekt mit dem vollständigen Quellcode findet Ihr in der Expression Gallery.

Viel Spaß damit.

ChildWindowResizeBehavior Silverlight 4 - Quellcode

2011-01-03T10:19:00.002+01:00

Vor einiger Zeit veröffentlichte ich in der Expression Gallery ein ChildWindowResizeBehavior für Silverlight 4. Das Behavior ermöglicht es, einem Silverlight 4 ChildWindow die Funktionalität hinzuzufügen, es durch das Drehen des Mausrads in seiner Größe zu verändern. Ergänzend ist ein Ereignis implementiert, mit dessen Hilfe zur Laufzeit die aktuelle Größe des ChildWindow abgefragt werden kann. Das ist das OnSizeChangedEvent.

Der ursprüngliche Download in der Expression Gallery enthielt das Behavior nur als kompilierte .dll-Datei. Für dieses Behavior findet Ihr jetzt am Ende dieses Artikels den Download-Link für den vollständigen Quellcode des Projekts (VB.NET).

Aus der Community kam seinerzeit der Einwand, dass die Größenveränderung eines ChildWindow mithilfe des Mausrads wenig intuitiv ist. Dieser Einwand ist berechtigt. Vielleicht ist es in spezifischen Szenarien trotzdem eine interessante Variante. Und für alle, die sich etwas näher mit der Funktionsweise eines Silverlight 4 ChildWindow befassen wollen, ist der Quellcode des Behaviors sicherlich hilfreich.

Download: Vollständiger Quellcode des ChildWindowResizeBehavior (Silverlight 4).

Out Of Browser Experience UserControl - Quellcode

2011-01-03T09:37:00.001+01:00

Vor ziemlich genau einem Jahr habe ich in der Expression Gallery das OOBControl Version 1.1 veröffentlicht. Dieses für Silverlight 3 entwickelte Benutzersteuerelement kapselt die Out Of Browser Funktionalität für eine Anwendung und ermöglicht es, eine Silverlight 3-Anwendung durch einfaches Einfügen des OOBControl auf die Benutzeroberfläche Out Of Browser-fähig zu machen. Bis heute haben 6.141 Designer oder Entwickler das OOBControl heruntergeladen. Vielen Dank an alle für diese tolle Resonanz. Der Download beinhaltet das UserControl allerdings nur als kompilierte .dll-Datei.

Ich habe mich entschieden, die weitere Entwicklung des für Silverlight 3 entwickelten OOBControl der Community zu überlassen und deswegen den Quellcode zu veröffentlichen. Der folgende Download-Link beinhaltet den Quellcode in VB.NET.

Download: Quellcode des OOBControl Version 1.1.

Fröhliche Weihnachten!

2010-12-24T10:32:00.001+01:00

Ich wünsche allen ein fröhliches, besinnliches und friedliches Weihnachten 2010!

rudolf from michiel van iperen on Vimeo.

Ho-Ho-Ho ...

Größenveränderung eines Grid mithilfe von Thumb Steuerelementen

2010-12-22T11:33:00.000+01:00

In der Expression Gallery findet Ihr ein neues Beispielprojekt für ein Grid, das durch Klicken, Halten und Ziehen in seiner Größe verändert werden kann. Zum Einsatz kommen dabei Thumb-Steuerelemente. Hier erstmal das lebendige Beispiel:

Das Prinzip ist einfach. Das Grid, das in seiner Größe veränderbar gestaltet werden soll, erhält jeweils drei Zeilendefinitionen und drei Spaltendefinitionen. Die beiden äußeren Spalten und Zeilen erhalten jeweils eine fixe Breite bzw. Höhe von 2px. Es werden insgesamt 8 Thumb-Steuerelemente im Grid platziert, jeweils ein Thumb-Steuerelement in jede der äußeren Spalten bzw. Zeilen sowie in jede der vier Ecken. Im DragDelta-Ereignisbehandler eines jeden Thumb-Steuerelements findet dann die Logik für die Größenveränderung des Grid statt. Alles weitere sollte eigentlich der Quellcode erklären, den ihr im Download des Beispielprojekts in der Expression Gallery findet.

Download: Quellcode des vollständigen Beispielprojekts in der Expression Gallery.

Viel Spass damit.

VB.NET: Teilermenge einer positiven ganzen Zahl berechnen

2010-12-21T20:03:00.000+01:00

Am Wochenende habe ich für ein kleines Tool, an dem ich gerade arbeite, eine Funktion geschrieben, die die Teilermenge einer positiven ganzen Zahl berechnet. Also z.B. alle Teiler der Zahl 465289 sind die Zahlen 1, 11, 42299 und 465289. Für alle, die das mal brauchen gibt es hier die Funktion:

  Private Function GibAlleTeiler(ByVal zahl As Integer) As Integer()

    Dim result As New List(Of Integer)

    result.Add(1)

    Dim n As Integer = 2

    Do Until result.Min * result.Max = zahl

      result.Sort()

      If zahl Mod n = 0 Then

        result.Add(n)

      End If

      If n < zahl / 2 Then

        n += 1

      Else

        result.Add(zahl)

        Exit Do

      End If

    Loop

    Return result.ToArray

  End Function

End Class

Vorschläge zur Verbesserung sind als Kommentar natürlich sehr willkommen.

WP7: Den Text-Cursor bei der Eingabe von Text exakt positionieren

2010-12-09T20:45:00.002+01:00

Dies ist ein kurzer Tipp für alle, die schon immer wissen wollten, wie man den Text-Cursor bei der Eingabe von Text in einer Windows Phone-Anwendung exakt positionieren kann.

Der Finger wird leicht auf den Bildschirm gedrückt und gehalten. Nach einer halben Sekunde erscheint mit einer kleinen Animation ein virtuelles Cursor-Symbol. Weiter den Finger auf dem Bildschirm halten und über den Text (den Bildschirm) bewegen. Das virtuelle Cursor-Symbol folgt der Bewegung des Fingers und bewegt sich durch den Text. Dann einfach den Finger vom Bildschirm nehmen, sobald das Cursor-Symbol an der gewünschten Position ist.

WP7: Text-Cursor im Text exakt positionieren from LawBot on Vimeo.

Das war's. Wie einfach die Welt doch sein kann ...

VB.NET: Sortieren einer Dictionary(Of TKey, TValue)-Auflistung

2010-12-09T11:13:00.002+01:00

Dies ist ein kurzer, aber vielleicht recht nützlicher Artikel über das Sortieren eines Dictionary(Of TKey, TValue). Als Teil eines kleineren Projekts war es erforderlich, ein Dictionary mit Schlüssel- und Wert-Paaren zu sortieren und abhängig von der Auswertung des Werts nur den Schlüssel (vom Typ String) zurückzugeben.

Der folgende Quellcode-Ausschnitt zeigt beispielhaft, wie es funktioniert:

  Private Function GetKeyOfGreatestOrSmallestKeyValuePair(ByVal indicator As String) As String

    Dim ListOfKeyValuePairs As New Dictionary(Of String, Double)

    With ListOfKeyValuePairs
      .Add("Key 1", 20.35)
      .Add("Key 2", 10.25)
      .Add("Key 3", 45.95)
      .Add("Key 4", 900.22)
      .Add("Key 5", 1.07)
    End With

    Dim listedItems As IOrderedEnumerable(
       Of KeyValuePair(Of String, Double)) = ListOfKeyValuePairs.OrderBy(Function(v) v.Value)

    Select Case indicator

      Case Is = "Greatest"

        Return listedItems.Last.Key.ToString

      Case Is = "Smallest"

        Return listedItems.First.Key.ToString

    End Select

  End Function

Die Function "GetKeyOfGreatestOrSmallestKeyValuePair" gibt, je nach dem welcher Parameter übergeben wird, entweder den Schlüssel des größten oder den Schlüssel des kleinsten aller Werte eines Dictionary mit Schlüssel- und Wert-Paaren zurück. Das Dictionary wird mit der Variablen "ListOfKeyValuePairs" erzeugt. Dann wird eine weitere Variable erzeugt. Das ist die Variable "listedItems" vom Typ "IOrderedEnumerable(Of KeyValuePair(Of String, Double))". Dieser Variablen wird die Auswertung der Methode "OrderBy()" übergeben, die auf das Dictionary angewendet wird. Der Clou besteht darin, dass der Methode "OrderBy()" eine Lambda-Funktion übergeben wird, die die Werte jedes Schlüssel-/Wert-Paares zurückgibt. Die Methode "OrderBy()" sortiert die von der Lambda-Funktion übergebenen Werte in aufsteigender Reihenfolge. Im Ergebnis enthält die Variable "listedItems" eine neue Auflistung vom Typ "IOrderedEnumerable(Of KeyValuePair(Of String, Double)), deren Schlüssel-/Wert-Paare in aufsteigender Reihenfolge sortiert sind. Diese sortierte Auflistung kann dann ausgewertet werden.

Anstatt der Methode "OrderBy()" kann man z.B. auch die Methode "OrderByDescending()" anwenden. Als Ergebnis erhält man dann ein neues Dictionary, das in absteigender Reihenfolge sortiert ist.

Die Methoden "OrderBy()" und "OrderByDescending()" zählen zu den sogenannten Erweiterungsmethoden der "Dictionary(Of TKey, TValue)"-Klasse. Es gibt eine Vielzahl weiterer Erweiterungsmethoden, die auf ein Dictionary angewendet werden können. Mit deren Hilfe sind weitere, umfangreiche Abfrage- und Filter-Aktionen möglich.

WP7: Glossy TextBlock Custom Control

2010-12-03T13:23:00.003+01:00

Ich habe ein GlossyTextBlock Custom Control für Windows Phone einschließlich Quellcode in der Expression Gallery zum Download bereitgestellt. Dieses Steuerelement ermöglicht die Darstellung von Text mit einem Schatten. So kann beispielsweise Text mit einem visuellen Glanzeffekt dargestellt werden.

Nachfolgend seht Ihr einen Screenshot von einer Beispielanwendung, der beispielhaft zeigt, was mit dem Steuerelement u.a. visuell erreicht werden kann:

Das obige Beispiel zeigt nur einige von vielen visuellen Möglichkeiten. Das Steuerelement ermöglicht eine Vielzahl von weiteren visuellen Gestaltungsmöglichkeiten. Ermöglicht wird dies dadurch, dass die maßgeblichen Eigenschaften des Steuerelements in der Vorlage entsprechend gebunden sind. Im Einzelnen:

Über die Foreground-Eigenschaft wird die Vordergrundfarbe des Textes gesetzt. Über die Background-Eigenschaft wird die Schattenfarbe des Steuerelements festgelegt. Die Eigenschaften "FontFamily", "FontSize", "FontWeight" und "FontStyle" sind ebenfalls gebunden.

Der Text des Steuerelements kann über die Eigenschaft "Text" festgelegt werden. In Expression Blend findet man die "Text"-Eigenschaft in der Registerkarte "SilverLaw GlossyTextBlock":

Die Eigenschaft "Text" ist als Abhängigkeitseigenschaft implementiert. Das ermöglicht eine Datenbindung dieser Eigenschaft, z.B. an ein TextBox-Steurelement als Quelle:

Das GlossyTextBlock Custom Control bietet Entwurfszeit-Unterstützung in Expression Blend 4 und Visual Studio 2010.

Viel Spass damit!

Download: Quellcode-Projekt (VB) und ein Beispiel-Projekt (C#).

How To: Neupositionieren von TextBlock- und TextBox-Steuerelementen beim Wechsel zwischen Portrait- und Landscape-Orientierung (WP7)

2010-11-30T17:24:00.000+01:00

Dieser Artikel beschreibt Schritt-für-Schritt, wie man in einer Windows Phone 7-Anwendung mit TextBlock- und TextBox-Steuerelementen ein einigermaßen konsitentes Layout beibehält, wenn ein Wechsel von der Portrait- zur Landscape-Orientierung erfolgt.

Weil es in Expression Blend 4 noch keine VB-Projektvorlagen für die Windows Phone-Anwendungsentwicklung gibt, stelle ich nachfolgend die Vorgehensweise für ein C#-Projekt dar. VB-Programmierer können Expression Blend 4 für das Design der Benutzeroberfläche, einschließlich der VisualStates, auch nutzen. Sie müssen aber zwei Projekte erstellen: Ein C#-Projekt, für das in Expression Blend die Benutzeroberfläche gestaltet wird. Und ein VB-Projekt in Visual Studio 2010, in das später der Xaml-Quellcode aus dem C#-Projekt eingefügt wird.

Generelle Vorgehensweise
Das Prinzip ist einfach. Jeweils ein TextBlock- und ein TextBox-Steuerelement werden in einem Grid gruppiert. Das Grid hat Spalten- und Zeilendefinitionen. Für jede Ansicht (Portrait / Landscape) wird jeweils ein visueller Zustand erzeugt, in dem die TextBlock- und TextBox-Steuerelemente jeweils verschiedene Spalten- und Zeilenzuweisungen erhalten.

Schritt 1
Ein neues Windows Phone 7-Projekt wird in Expression Blend 4 erstellt. Projektvorlage ist eine einfache Windows Phone 7-Anwendung. Der Wert der Eigenschaft "SupportedPageOrientation" in der PhoneApplicationPage wird auf "PortraitOrLandscape" gesetzt.

Schritt 2
Für das ContentPanel-Element werden vier Zeilendefinitionen erstellt.

Schritt 3
In die ersten drei Zeilen wird jeweils ein Grid eingefügt. Die Werte für HorizontalAllignment und für VerticalAllignment werden jeweils auf "1" "Star" gesetzt.

Schritt 4
Jedes der eingefügten Grid-Steuerelemente erhält zwei Zeilendefinitionen und zwei Spaltendefinitionen. Der Wert für Width der ersten Spalte wird auf "1" "Auto" gesetzt.

Schritt 5
Jedem Grid wird ein TextBlock- und eine TextBox-Steuerelement hinzugefügt. Die Anwendung befindet sich standardmäßig zunächst in der Portrait-Orientierung. Also erstellen wir zunächst das Layout für diese Ansicht.

Dies sind die maßgeblichen Eigenschaftswerte für jedes TextBlock-Element, mit denen die Zuordnung zu den einzelnen Spalten- und Zeilen erfolgt:

Und dies sind die maßgeblichen Eigenschaftswerte für jedes TextBox-Steuerelement, mit denen die Zuordnung zu den einzelnen Spalten- und Zeilen erfolgt:

Danach sieht die Anwendung in der Design-Ansicht so aus:

Schritt 6
Jetzt wechseln wir zur Registerkarte "Zustände" und erzeugen eine neue VisualStateGroup. In dieser VisualStateGroup werden zwei neue visuelle Zustände erzeugt. Der visuelle Zustand "POP" enthält den Zustand der Benutzeroberfläche in der Portrait-Ansicht (PageOrientationPortrait). Der visuelle Zustand "POL" enthält den Zustand der Benutzeroberfläche in der Landscape-Ansicht (PageOrientationLandscape).

Der visuelle Zustand POP muss nicht verändert werden, weil die anfänglich entworfene Benutzeroberfläche bereits für die Portrait-Ansicht erstellt wurde.

Für den visuellen Zustand POL müssen folgende Eigenschaften modifiziert werden. Für ein TextBlock-Steuerelement muss nur der Wert für RowSpan auf "2" gesetzt werden:

Für ein TextBox-Steuerelement müssen die Zeilen- und Spaltenzuweisungen sowie der Wert für VerticalAllignment wie folgt geändert werden:

Die übrigen TextBlock- und TextBox-Steuerelemente in den anderen Grid-Elementen werden im visuellen Zustand POL entsprechend geändert.

Schritt 7
In der CodeBehind-Datei wird schließlich der folgende Quellcode hinzugefügt. Dieser Quellcode reagiert auf das OrientationChanged-Ereignis von MainPage und wechselt den visuellen Zustand abhängig davon, in welche Ansicht gewechselt wurde.

VB:

Partial Public Class MainPage
  Inherits PhoneApplicationPage

  ' Konstruktor
  Public Sub New()

    InitializeComponent()

    SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape

  End Sub

  Private Sub MainPage_OrientationChanged(
      ByVal sender As Object,
      ByVal e As Microsoft.Phone.Controls.OrientationChangedEventArgs) _
    Handles MyBase.OrientationChanged

    If (e.Orientation And PageOrientation.Landscape) <> 0 Then

      VisualStateManager.GoToState(Me, "POL", True)

    Else

      VisualStateManager.GoToState(Me, "POP", True)

    End If

  End Sub

End Class

C#:

namespace TextDesignPortraitLanscapeLab
{
  public partial class MainPage : PhoneApplicationPage
  {
    public MainPage()
    {
      InitializeComponent();

      SupportedOrientations = 
        SupportedPageOrientation.PortraitOrLandscape;

    }

    private void PhoneApplicationPage_OrientationChanged(
      object sender, OrientationChangedEventArgs e)
    {
      if ((e.Orientation & PageOrientation.Landscape) != 0)
      {

        VisualStateManager.GoToState(this, "POL", true);

      }
      else
      {

        VisualStateManager.GoToState(this, "POP", true);

      }
    }
  }
}

F5! Und in der Landscape-Ansicht sieht die Benutzeroberfläche nun so aus:

Das war's.

Download: Quellcode des Beispiel-Projekts.

WP7: Wechsel von Portrait- zu Landscape-Orientierung bei Layout mit größeren TextBlock- und TextBox-Steuerelementen

2010-11-30T12:00:00.001+01:00

Das Layout einer Windows Phone 7-Anwendung kann darauf reagieren, je nach dem wie der Benutzer das Gerät in der Hand hält. Wenn das Gerät senkrecht gehalten wird, befindet es sich in der Portrait-Orientierung. Wenn das Gerät waagerecht gehalten wird, befindet es sich in der Landscape-Orientierung. Bei einem Layout mit mehreren TextBlock- und TextBox-Steuerelementen braucht man für beide Situationen eine möglichst konsistente Design-Lösung.

Das ist einfach, wenn die TextBlock- und TextBox-Steuerelemente jeweils nur wenige Zeichen beinhalten. Wenn die TextBlock- und TextBox-Steuerelemente aber viele Zeichen beinhalten sollen, muss die Anordnung der Steuerelemente verändert werden.

In der Expression Gallery findet Ihr eine WP7-Beispiel-Anwendung, die eine mögliche Design-Lösung hierfür vorstellt.

Ich einem Tutorial hier im Blog beschreibe ich Schritt-für-Schritt, wie das Beispiel erstellt wird.

Die Beispiel-Anwendung wurde mit den Visual Basic Developer Tools für Windows Phone 7 erstellt. Die CodeBehind-Sprache ist aber zweitrangig. Die Lösung baut im wesentlichen auf Xaml auf.

Visual Basic für Windows Phone Developer Tools - RTW erschienen

2010-11-29T16:08:00.002+01:00

Gute Nachricht für alle VB-Programmierer, die für Windows Phone 7 programmieren wollen. Visual Basic für Windows Phone Developer Tools - RTW steht zum Download bereit.

Die Visual Basic Quellcode Beispiele für Windows Phone gibt es hier.

Es gibt zwar noch keine VB-Integration in Expression Blend 4 für Windows Phone. Visual Basic Windows Phone-Anwendungen werden in Expression Blend für Windows Phone leider noch nicht unterstützt. Das ist immernoch ein stattlicher Nachteil, aber immerhin kann jetzt schonmal in Visual Studio 2010 (>= Professional) losgelegt werden.

Eine Unterstützung für XNA Projekte ist ebenfalls noch unterentwickelt. Mit dem Release können zwar Visual Basic Silverlight Anwendungen für Windows Phone 7 erstellt werden, es gibt aber noch keine Projektvorlagen für XNA.

Für die Installation muss die CTP Version vorher deinstaliiert werden.

Seitenaufrufanalyse für eine reine Silverlight 4-Navigationsanwendung mit dem Microsoft Silverlight Analytics Framework und Google Analytics

2010-11-19T19:38:00.003+01:00

Vor etwas längerer Zeit hatte ich einen Thread im Deutschen MSDN Silverlight-Forum mit der Frage nach einem Seitenzähler für eine reine Silverlight-Anwendung eingestellt. Oliver Michalski gab zu dieser Frage den entscheidenden Hinweis auf das Microsoft Silverlight Analytics Framework (MSAF) und damit die Antwort auf meine Frage.

Ich habe mich also eingelesen und schließlich mit Hilfe des MSAF und Google Analytics als Service-Anbieter eine Seitenaufruf-Analyse in eine reine Silverlight 4 Navigationsanwendung implementiert. Für alle, die auch eine Lösung für diese Anforderung suchen, beschreibe ich hier kurz, wie das geht. Es ist wirklich total einfach.

Das MSAF stellt eine Reihe von Behaviors, also Behaviors, Actions und Trigger, zur Verfügung. Das macht die Implementierung sehr anwenderfreundlich und mit Expression Blend 4 zu einem Kinderspiel. Ich beschränke mich hier auf die Darstellung, eir eine Seitenaufruf-Analyse mit dem MSAF für Google Analytics implementiert wird. Das MSAF bietet noch viel mehr als das. Außerdem werden neben Google Analytics viele weitere Anbieter von Analytics Services unterstützt. Es ist sogar möglich, mehrere Analytics-Services Anbieter parallel anzusprechen. Mehr Informationen gibt es auf der Codeplex-Seite des MSAF.

Das MSAF ist kostenlos erhältlich und wird unter Microsoft Public License (Ms-PL) zur Verfügung gestellt.

Vorbemerkung

Im Folgenden wird vorausgesetzt, dass ein aktiver Account bei Google Analytics besteht. Außerdem sollte natürlich eine Silverlight-Navigationsanwendung mit mehreren Pages vorhanden sein, die bereits veröffentlicht ist. Die Domain, unter der die Silverlight-Anwendung erreichbar ist, muss bei Google Analytics als Analytics-Konto eingerichtet sein. Weitere Informationen bietet die Google Analytics Hilfe und die recht intuitive Benutzerführung in der Account-Verwaltung.

Wesentlicher Bestandteil für das Implementieren von Google Analytics für eine Silverlight-Anwendung ist der Einbau des Tracking-Scripts in der Seite, welche die Silverlight-Anwendung hostet. Ich setze voraus, dass dieses Script in die Startseite implementiert ist. Bestandteil dieses Scripts ist der UA-Schlüssel für das Analytics Konto. Für jede Internetseite muss ein eigenes Analytics-Konto eingerichtet werden und existiert ein spezieller UA-Schlüssel. Dieser UA-Schlüssel ist die einzige Information, die wir im Folgenden benötigen. Der UA-Schlüssel kann dem Tracking-Script entnommen werden. Er wird dort im Format "UA-xxxxxxx-y" angezeigt.

Schritt für Schritt

Und so funktioniert die Implementierung einer Seitenaufruf-Analyse mit dem MSAF im Fall von Google Analytics:

1. Das Microsoft Silverlight Analytics Framework herunterladen und installieren.

2. Dem Silverlight-Projekt in Visual Studio 2010 einen Verweis auf die Microsoft.WebAnalytics.Navigation.dll hinzufügen.

3. Wechseln zu Expression Blend 4. Dort die Registerkarte "Objekte" selektieren. Auf "Verhalten" klicken und "TrackAction" auswählen.

Diese TrackAction wird dann per Drag&Drop auf das Frame-Steuerelement gezogen. Die hinzugefügte TrackAction wird selektiert. In der Registerkarte Eigenschaften wird für diese TrackAction die EventName-Eigenschaft auf den Wert "Navigated" gesetzt.

Das bewirkt, dass jedesmal, wenn das Navigated-Ereignis feuert, dieses Ereignis an den Analytics-Anbieter, hier also an Google Analytics, gesendet wird. In der Account-Verwaltung können dadurch später die einzelnen Seitenaufrufe nachverfolgt werden.

4. Damit die Daten zum Analytics Service Anbieter gesendet werden können, muss dem LayoutRoot der entsprechende Analytics Service Anbieter per Drag&Drop hinzugefügt werden. Das Beispiel hier benutzt Google Analytics. Also: GoogleAnalytics auswählen ...

... und per Drag&Drop dem LayoutRoot hinzufügen:

Jetzt das soeben hinzugefügte GoogleAnalytics-Behavior selektieren. In der Registerkarte Eigenschaften wird dann der UA-Schlüssel aus dem Tracking-Script als Wert für die Eigenschaft "Web Property ID" eingetragen:

Mehr braucht man nicht, damit die Silverlight-Anwendung nun mit dem konkreten Google Analytics Account kommuniziert!

5. Schließlich das Projekt neu erstellen und veröffentlichen. Das war's!

Extrem schlank. Extrem einfach. Und das Beste ist, man kann sofort nach dem Veröffentlichen ausprobieren, ob die Seitenaufruf-Analyse funktioniert. Denn die Analyse beginnt bereits unmittelbar nach der Veröffentlichung der modfizierten Silverlight-Anwendung quasi in Echtzeit. Probiert es selbst aus. Ruft die betreffende Seite auf, navigiert einige Male durch die Pages der Anwendung und wechselt dann zu dem Google Analytics Konto. Der Traffic wird sofort sichtbar:

Abschließend möchte ich noch empfehlen, einen Blick auf die weiteren Features des MSAF zu werfen. Seitenaufruf-Analyse ist wie gesagt nur ein kleiner Teil. Daneben können mit dem MSAF u.a. Ereignisse von Steuerelementen analysiert werden und ein A/B-Testing wird unterstützt. So kann das Benutzungsverhalten in verschiedenen Zuständen der UI analysiert und ausgewertet werden. Ein wirklich mächtiges Framework.

Wichtige Resource: Blog von Michael S. Scherotter; Tag: Web Analytics.

Viel Spass! Und viel Erfolg.

How To: Erstellen eines nicht rechteckigen ChildWindow - Teil 2

2010-11-16T19:06:00.008+01:00

Dies ist der zweite Teil über das Erstellen eines nicht rechteckigen ChildWindow. In Teil 1 habe ich die grundsätzliche Vorgehensweise beschrieben, also welche Veränderungen an der Vorlage des ChildWindow vorgenommen werden müssen.

In diesem Teil 2 beschreibe ich, wie man in einem kreisförmigen ChildWindow mit Hilfe eines PathListBox-Steuerelements Inhalt platzieren kann, der zu der runden Form paßt.

Anmerkung

Ich habe das Design der Beispielanwendung in der Zwischenzeit etwas verändert. Die räumliche Anordnung und die Farbgestaltung des CloseButton sind anders. Außerdem habe ich einige DropShadow-Effekte hinzugefügt. Schaut Euch dafür bitte den Quellcode an. So sieht unser Ausgangsbeispiel mittlerweile aus:

Und jetzt weiter mit dem Tutorial.

Schritt 3 - Gestaltung des Inhalts

Glücklicherweise steht seit Silverlight 4 das PathListBox-Steuerelement zur Verfügung. Mit diesem Steuerelement ist die Anordnung beliebigen Inhalts in freier Form ein Kinderspiel.

Als erstes müssen wir noch einmal kurz in die Vorlage des ChildWindow. Dort wird das Border-Steuerelement selektiert, in dem sich der ContentPresenter befindet. Für dieses Border-Steuerelement wird der Wert für "Row" auf 0 und der Wert für "RowSpan" auf 2 gesetzt.

Dadurch ist sichergestellt, dass der Inhalt nun auf der gesamten Oberfläche des ChildWindow dargestellt wird.

Jetzt wechseln wir aus der Vorlagen-Ansicht zurück zum ChildWindow selbst.

Wir wollen ein PathListBox-Steuerelement verwenden und fügen dazu in einem ersten Schritt zu dem LayoutRoot des ChildWindow ein Ellipse-Steuerelement hinzu. Die Werte für die Eigenschaften Breite und Höhe werden beide auf "Auto" gesetzt. Die Werte für die Eigenschaften Fill und Stroke werden jeweils zurückgesetzt. HorizontalAlignment und VerticalAlignment werden beide auf "Stretch" gesetzt. Der Wert für "Margin" wird einheitlich angepaßt, so dass der äußere Rand des Kreises in der Mitte des "Donut" liegt. Das Ganze sieht dann so aus:

Dann wird das Ellipse-Steuerelement selektiert -> Rechtklick -> Pfad -> In Pfad konvertieren. Dann das LayoutRoot selektieren und ein PathListBox-Steuerelement hinzufügen. Die Werte für "Height" und "Width" des PathListBox-Steuerelements werden auf "Auto" gesetzt. HorizontalAlignment und VerticalAlignment werden beide auf "Stretch" gesetzt.

Dann wird dem Layoutroot noch ein TextBlock-Steuerelement hinzugefügt. Der Text dieses TextBlocks soll später auf dem Pfad dargestellt werden. Der Wert für die Foreground-Eigenschaft des TextBlocks wird zurückgesetzt.

In der Registerkarte "Eigenschaften" des PathListBox-Steuerelements wird in der Rubrik "Layoutpfade" mit dem Mauszeiger der kleine runde Pinökel oben rechts per Klick selektiert.

Der Mauszeiger verändert sich und mit dem veränderten Mauszeiger wird auf das Path-Steuerelement geklickt.

Jetzt in den Eigenschaften des PathListBox-Steuerelements die erweiterten Optionen für die Eigenschaft "ItemsSource" öffnen und "Elementeigenschaftsbindung ..." auswählen:

Der Mauszeiger verändert sich und mit dem veränderten Mauszeiger klicken wir auf das TextBlock-Steuerelement. Es erscheint der folgende Dialog:

... der mit "Ok" bestätigt wird. Damit haben wir den Text des TextBlock als ItemsSource an die PathListBox gebunden. Wenn diese Elementeigenschaftsbindung funktioniert hat, sollte der auf dem Pfad jetzt der Schriftzug "TextBlock" erscheinen:

Jetzt brauchen wir nur die Darstellung des Textes anzupassen. Das erfolgt über die PathListBox. Der Wert für "Orientation" wird aus "Orient To Path" gesetzt. Die Schriftart und Größe werden wie üblich verändert. Über die Foreground-Eigenschaft erhält der Text eine etwas hellere Schriftfarbe. Und die "Start"-Eigenschaft der PathListBox verändern wir so, dass der Text oben links anfängt. Im Ergebnis sollte der Text, hier "I like round shaped ChildWindows", im ChildWindow folgendermaßen dargestellt sein:

F5 drücken, das ChildWindow aufrufen und fertig ist das vollständige ChildWindow.

Das war's. Viel Spass damit.

Download: Vollständiger Quellcode für das hier entwickelte Beispielprojekt.

How to: Erstellen eines nicht rechteckigen ChildWindow - Teil 1

2010-11-16T14:17:00.005+01:00

Dieser Artikel beschreibt Schritt-für-Schritt, wie man ein nicht rechteckiges ChildWindow erstellt. Erstellt wird ein ringförmiges ChildWindow.

Als Vorgeschmack auf das, was wir in diesem Tutorial zusammenbauen wollen, gibt es hier schonmal einen Blick auf die fertige Beispiel-Anwendung:

Ziemlich cool, oder?! Den Link für den Download des obigen Beispiel-Projekts findet Ihr am Ende von Teil 2 dieses Tutorials.

Schritt 1 - Vorbereitungen
In Expression Blend 4 wird ein neues Silverlight 4 Projekt erstellt. Der Oberfläche von MainPage.xaml wird ein Button hinzugefügt. Dieser Button dient später dazu, das ChildWindow aufzurufen.

Dann wird dem Silverlight-Projekt durch Rechtklick auf das Projekt -> Neues Element hinzufügen ... -> ChildWindow ein ChildWindow hinzugefügt. Dieses ChildWindow erhält den Namen "RingChildWindow.xaml". Ein Klick auf Ok fügt dem Projekt das neue ChildWindow hinzu. Das ChildWindow erhält eine Größe von 400px x 400px.

Schritt 2 - Styling der Vorlage
In Expression Blend 4 wird jetzt das RingChildWindow zur Bearbeitung angezeigt. Im Objektbaum der Registerkarte "Objekte und Zeitachsen" wird mit einem Linksklick das ChildWindow selektiert.

Mit einem Rechtklick auf das ChildWindow-Element im Objektbaum -> Vorlage bearbeiten -> Kopie bearbeiten ...

gelangt man in das Dialogfenster "Resource "Style" erstellen. Der neue Style wird "RingChildWindowStyle" genannt. Der Style wird definiert in der Anwendung, also in der Datei App.xaml.

Ein Klick auf Ok und man gelangt sofort in der Vorlage des ChildWindow. Wir werfen einen Blick in den Objektbaum der Vorlage in der Registerkarte "Objekte und Zeitachsen". Dort werden die folgenden Elemente selektiert und gelöscht:

Dann wird das Element ContentRoot selektiert. In der Registerkarte "Objekte" -> Formen wird "Ring" selektiert und dem ContentRoot-Element mit einem Doppelklick auf "Ring" hinzugefügt.

Per Drag&Drop wird das neue Arc-Element direkt unter das ContentRoot platziert.

Die Fill-Eigenschaft des Arc-Elements wird an die Background-Eigenschaft der Vorlage gebunden:

Damit kann der Brush für den Fill später einfach über den Background des ChildWindow festgelegt werden.

Die Eigenschaften HorizontalAlignment und VerticalAlignment des Arc-Elements werden jeweils auf Stretch gesetzt. Die Eigenschaften Width und Height werden beide auf "Automatisch" gesetzt. Der Eigenschaft "ArcThickness" wird auf den Wert 80 gesetzt.

Im Moment ist der Ring noch nicht sichtbar. Um das zu ändern, wird die Background-Eigenschaft für das erste und für das zweite Border-Element der Vorlage zurückgesetzt.

Außerdem wird für das Border-Steuerelement, das den ContentPresenter enthält, die Vorlagenbindung der Background-Eigenschaft zurückgesetzt.

Wir wechseln kurz mit einem Klick auf das Pfeilsymbol im Objektbaum der Vorlage zurück in das ChildWindow.

Dort erzeugen wir einen ansehnlichen Background für das Ring-Element.

Für das weitere Vorgehen ist es sinnvoll, die beiden Button-Steuerelemente "Ok" und "Cancel" zu löschen. Die EventHandler für die beiden Buttons werden ebenfalls gelöscht. Dann wechseln wir wieder in die Vorlage.

Jetzt soll der Chrome gestaltet werden. Der Chrome definiert bei einem rechteckigen ChildWindow die Fensterleiste. Standardmäßig ist der Chrome rechteckig. Da wir ein ringförmiges ChildWindow gestalten, soll auch der Chrome ringförmig sein.

Der Chrome ist ein einfaches Border-Steuerelement. Es befindet sich in einem Grid-Steuerelement.

Für dieses Grid-Steuerelement sind zwei Zeilen definiert. Ein Klick auf "RowDefinitions" zeigt, dass der Wert für die erste Zeile auf "1" und "Auto" gesetzt ist.

Der Wert für die zweite Zeile ist auf "1" und "Star" gesetzt:

Der Chrome hat die Zuweisung zur ersten Zeile, Row 0. Das bewirkt, dass die Zeile 1 (Row 0) automatisch ihre Größe entsprechend der Größe des Chrome anpaßt.

Das Chrome ist wie gesagt ein einfaches Border-Steuerelement. Deswegen können wir dem Chrome ein anderes Steuerelement hinzufügen, das visuell unsere Fensterleiste darstellen wird. Wir selektieren das Chrome und fügen mit einem Doppelklick ein Ring-Element hinzu.

Damit das soeben hinzugefügte Ring-Element ordentlich sichtbar wird, wird die Größe auf 80px x 80px gesetzt. Die Vorlage sieht jetzt so aus:

Die weiße Hintergrundfarbe kommt vom Chrome. Um das zu ändern, wird sowohl die Background-Eigenschaft als auch die BorderBrush-Eigenschaft des Chrome zurückgesetzt.

Dann wird die HorizontalAlignment-Eigenschaft des Arc-Elements auf "Rechts" gesetzt. Als Background-Eigenschaft für das Arc-Element verwenden wir den Brush, den auch wir für den Hauptring verwendet haben. Jetzt sieht unsere Vorlage so aus:

Schon ziemlich gut.

Jetzt wollen wir, dass der Chrome einen anderen VisualState bekommt, wenn der Mauszeiger darüberbewegt wird. Dazu müssen wir ein paar VisualState für das Arc-Element erzeugen. Damit keine Konflikte zu den Zuständen des ChildWindow entstehen, verwenden wir einen kleinen Trick. Wir erzeugen aus dem Arc-Element, das im Chrome ist, ein UserControl. Dazu wird das Arc-Element selektiert. Dann erzeugen wir mit einem Rechtklick -> Benutzersteuerelement erstellen ... ein UserControl.

Dieses UserControl erhält den Namen "ChromeHeaderRingUserControl".

Ein Klick auf "ok" und das neue UserControl kann bearbeitet werden. In ChromeHeaderRingUserControl.xaml wechseln wir zur Registerkarte "Zustände". Wir selektieren das Arc-Element und kopieren es mit Strg+C, Strg+V. Das neue Arc-Element erhält den Namen "MouseOverVisual". Der Z-Index wird auf "1" gesetzt. Den Brush der Fill-Eigenschaft wird so verändert, dass er insgesamt etwas heller leuchtet.

Der Wert für die Opacity wird auf "0" gesetzt.

Jetzt werden insgesamt 2 VisualState hinzugefügt. Diese werden "normal" und "mouseOver" genannt. Die Übergangsdauer wird auf "0,4" gesetzt. Wir selektieren den VisualState "mouseOver" und setzen den Wert der Opacity auf "100".

Jetzt muss das Projekt neu erstellt werden, damit die Änderungen am UserControl in der Vorlage des ChildWindow sichtbar sind.

Damit der Chrome, bzw. unser UserControl, einen anderen VisualState einnimmt, wenn man den Mauszeiger darüberbewegt, müssen wir kurz zu VisualStudio 2010 wechseln. Dort fügen wir in die CodeBehind-Datei des UserControl zwei EventHandler hinzu. Einen für MouseEnter und einen weiteren für MouseLeave.

Partial Public Class ChromeHeaderRingUserControl 
    Inherits UserControl

    Public Sub New()
        ' Für das Initialisieren der Variablen erforderlich
        InitializeComponent()
    End Sub

  Private Sub ChromeHeaderRingUserControl_MouseEnter(ByVal sender As Object,
        ByVal e As System.Windows.Input.MouseEventArgs) Handles Me.MouseEnter

    VisualStateManager.GoToState(Me, "mouseOver", True)

  End Sub

  Private Sub ChromeHeaderRingUserControl_MouseLeave(ByVal sender As Object,
        ByVal e As System.Windows.Input.MouseEventArgs) Handles Me.MouseLeave

    VisualStateManager.GoToState(Me, "normal", True)

  End Sub

End Class

Unsere Vorlage für das ChildWindow ist jetzt soweit hergerichtet, dass das ChildWindow durch Darg&Drop auf den Chrome bewegt werden kann. Der Aufruf des ChildWindow erfolgt über den Button in MainPage.xaml. Wie das geht, brauche ich nicht zu beschreiben. Bevor wir das ChildWindow das erste mal aufrufen, wird der Wert für den BorderBrush des ChildWindow (nicht der Wert in der Vorlage) zurückgesetzt. Andernfalls wäre das visuelle Bild gestört.

F5 drücken und dann den Button klicken und das ChildWindow erscheint. Es kann durch Drag&Drop auf den Chrome bewegt werden. Aber hey, es ist kein Button für das Schließen vorhanden ...

Um einen Button für das Schließen hinzuzufügen, gehen wir erneut zurück in die Vorlage unseres ChildWindow. Im Objektbaum der Vorlage selektieren wir das Grid-Element.

Dann fügen wir mit einem Doppelklick dem selektierten Grid einen Button hinzu. Der Wert für das HorizontalAlignment wird auf "Rechts" gesetzt. Der Wert für das VerticalAlignment wird auf "Top" gesetzt. Der Button muss jetzt natürlich einen Style erhalten, der ebenfalls rund ist. Wie man das macht, beschreibe ich hier nicht. Ich nehme als Resource für einen runden Button-Style einen Style, den ich vorher entworfen habe. Das ist der RoundButtonStyle. Den Quellcode findet Ihr als Resource im Download. Die Farben passen zwar nicht zum Beispiel, aber er ist halt rund.

Der RoundButtonStyle wird dem Button hinzugefügt. Als Wert für die Content-Eigenschaft des Button wird ein kleines "x" eingegeben. Die Foreground-Eigenschaft erhält den selben Farbwert, wie der Background des Button. Der RoundButtonStyle ist so gestaltet, dass erst beim MouseOver VisualState die Farbe des kleinen "x" zu "Weiß" wechselt.

Etwas vergrößert sieht unsere ChildWindow-Vorlage jetzt so aus:

Damit die Vorlage des ChildWindow den hinzugefügten Button als Teil der Vorlage erkennt, muss der Button als Teil der Vorlage erstellt werden. Dafür wird der Button selektiert, Rechtklick -> Teil von ChildWindow erstellen -> CloseButton selektieren:

F5 Drücken, und die Gestaltung des ChildWindow mit einer Ringform ist fertiggestellt.

In Teil 2 beschreibe ich, wie man diesen Style um eine ringförmige Anordnung des Content ergänzt.

Download: Beispiel-Projekt mit vollständigem Quellcode. (Dies ist ein weiteres Beispiel, das in der Expression Gallery veröffentlicht ist.)

Viel Spass!

Nicht rechteckiges ChildWindow Styling

2010-11-16T09:48:00.005+01:00

Gestern abend überlegte ich, wie man die Form eines ChildWindow etwas interessanter und individueller gestalten kann. Es wäre doch schön, ein ChildWindow zu gestalten das nicht rechteckig ist, sondern rund, dreieckig oder eine Herzform hat. Herausgekommen sind zwei neue Beispiele für die Expression Gallery. Das erste Beispiel ist ein dreieckiges ChildWindow. Es war noch etwas experimentell. Beim zweiten Beispiel, einem ringförmigen ChildWindow, wußte ich dann, wie man ein nicht rechteckiges ChildWindow herstellt. Es war extrem einfach und ging sehr schnell, es zu gestalten.

Hier sind zwei ScreenShot von den beiden Beispielen, die jeweils in der Expression Gallery zum Download zur Verfügung stehen.

Dreieckiges ChildWindow

Ringförmiges ChildWindow

Ich werde in den nächsten Tagen hier im Blog einen Artikel schreiben, in dem ich darstelle, wie man Schritt-für-Schritt vorgehen muss, um ein nicht rechteckiges ChildWindow zu erstellen. Ihr werdet erstaunt sein, wie einfach es ist. Das ringförmige ChildWindow war in 1 Stunde fertig ...

Viel Spaß vorerst mit den beiden Beispielen für nicht rechteckige ChildWindows.

RichTextBox.Xaml Builder Add-In Version 1.0.0.3 für Expression Blend 4 - Neu mit automatischer Schriftgrößenerkennung

2010-11-12T19:14:00.010+01:00

Eine neue Version des RichTextBox.Xaml Builder Add-In für Expression Blend 4 steht zum Download in der Expression Gallery bereit. Dies ist Version 1.0.0.3.

Die neue Version bietet eine automatische Schriftgrößenerkennung bei der Konvertierung von Rich Text für die Darstellung in einer Silverlight 4-Anwendung.

Visuell: Vom MS Word Dokument zur Darstellung in der Silverlight 4 RichTextBox

Die unten dargestellten Screenshots verdeutlichen die Konvertierung visuell vom Ursprung bis zum Ergebnis. Also vom ursprünglichen Inhalt eines Microsoft Word Dokuments, über die Konvertierungsansicht im Add-In in Expression Blend 4 bis zum Ergebnis in einer Silverlight 4-Anwendung:

Screenshot von dem ursprünglichen Microsoft Word Document

Screenshot des Ergebnisses der Konvertierung im Add-In

Und so sieht das Ergebnis in einer Silverlight 4-Anwendung aus:

Warum sollte man das Add-In verwenden?

Das Add-In liefert im Ergebnis der Konvertierung eine .xml-Datei mit den Text- und Formatinformationen des konvertierten Textes. Dabei hat die .xml-Datei ein Format, das von der Xaml-Eigenschaft einer regulären Silverlight 4 RichTextBox als Xaml verstanden wird. Um den in der .xml-Datei enthaltenen Text einer RichTextBox zuzuweisen braucht man nur eine einzige Zeile Quellcode:

rbDemo.Xaml = XElement.Load("richsource.xml").ToString(SaveOptions.DisableFormatting)

Eine Zuweisung des Inhalts für eine RichTextBox über die Xaml-Eigenschaft des Steuerelements bietet den Vorteil, dass der Text einer einzelnen RichTextBox zur Laufzeit dynamisch verändert werden kann. Der Vorteil einer Zuweisung mithilfe einer .xml-Datei besteht darin, dass der Text nicht erst umständlich im Quellcode erzeugt werden muss. Der Programmierungsaufwand ist dadurch extrem reduziert.

Der Workflow in einer Line Of Business-Anwendung

Mit dem RichTextBox.Xaml Builder Add-In ist der Workflow für die Konvertierung von existierendem Rich Text, beispielsweise aus einem Word Dokument, zur Darstellung in einer Silverlight 4 RichTextBox extrem schlank.

Beispielhaft sei folgendes Szenario angenommen: Es soll eine Line Of Business-Anwendung in Silverlight 4 realisiert werden. Bestandteil der Anwendung sollen u.a. 50 unterschiedliche Textinhalte sein, die alle in RichTextBox-Steuerelementen dargestellt werden sollen. Die Textinhalte liegen bereits als Microsoft Word Dokumente vor. Jedes Word Dokument ist konvertiert mit unterschiedlichen Schriftgrößen, Schriftschnitten, Schriftfarben etc. Und jedes Word Dokument hat mindestens 10000 Zeichen.

Mit dem Add-In wird jedes Word Dokument in eine .xml-Datei umgewandelt. Dabei reduziert sich die Konvertierung auf den folgenden Ablauf:

1. Word Dokument öffnen und den Text mit Strg+A, Strg+C in die Zwischenablage kopieren.

2. Wechseln zu Expression Blend 4 und im Add-In auf „Convert“ klicken.

3. Dann auf „Save“ klicken und die Datei lokal in einem Ordner speichern.

Diesen Vorgang für alle Word Dokumente wiederholen.

4. Wechseln zu Visual Studio 2010 und im Silverlight-Projekt einen neuen Ordner „documents“ einrichten. Dann mit Rechtklick auf den Ordner -> Hinzufügen -> Vorhandenes Element hinzufügen zum lokalen Ordner mit den .xml-Dateien navigieren. Strg+A, um alle .xml-Dateien zu selektieren und hinzufügen.

5. In Visual Studio 2010 im Projekt-Explorer den Ordner „documents“ öffnen und alle vorhandenen .xml-Dateien markieren.

6. Um die Dateien beispielsweise vollständig in die .xap-Datei aufzunehmen wählt man als build-Vorgang für alle markierten .xml-Dateien „Kopieren wenn neuer“.

Fertig. Alle Word Dokumente liegen nun in Gestalt der .xml-Dateien mit den Formatinformationen vor und können der Xaml-Eigenschaft einer RichTextBox mit minimalem Programmieraufwand dynamisch zugewiesen werden.

Das ist richtig cool.

Den Download der Version 1.0.0.3 gibt in der Expression Gallery.

Viel Spass mit der neuen Version.

Quick Tipp: Text in der Zwischenablage vor dem Einfügen mit Strg+V modifizieren

2010-11-10T17:25:00.005+01:00

Dieser Quick Tipp beschreibt, wie Text aus der Zwischenablage modifiziert werden kann, bevor der Nutzer den Text mit Strg+V in eine TextBox einfügt.

Quellcode

Erläuterungen

Im KeyDown-Ereignis einer TextBox wird geprüft, ob der Nutzer die Tastenkombination Strg+V gedrückt hat. Wenn das der Fall ist, wird der Text aus der Zwischenablage mit der Methode Clipboard.GetText() einer privaten Variablen zugewiesen. Es folgt eine Überprüfung, ob der Text in der Zwischenablage ein leerer String ist. Wenn das nicht der Fall ist, dann erfolgt eine Modifizierung des aus der Zwischenablage abgefangenen Textes. Im obigen Beispiel wird eine Teilzeichenfolge gebildet. Schließlich wird der modifizierte Text mit der Methode SetText() der Zwischenablage zugewiesen.

Wenn der Nutzer die Tastenkombination losläßt, besteht der Text in der Zwischenablage nun aus dem modifizierten Text und dieser Text wird eingefügt.

Im KeyUp-Ereignis wird nochmal geprüft, ob die Tastenkombination Strg+V gedrückt wurde. Gegebenenfalls wird die Zwischenablage durch Zuweisung von Clipboard.SetText(String.Empty) geleert.
Das war's.

Quick Tipp: MouseOver VisualState für die gesamte Oberfläche eines ListBoxItem

2010-11-04T09:53:00.003+01:00

Das Template eines ListBoxItems kennt den VisualState MouseOver. Wenn man den Mauszeiger über ein ListBoxItem bewegt, wird der VisualState MouseOver aber standardmäßig nur dann aktiviert, wenn der Mauszeiger über den sichtbaren Inhalt bewegt wird. Der sichtbare Inhalt wird durch den ContentPresenter des Templates definiert. Das ListBoxItem selbst ist aber in der Regel breiter, als der ContentPresenter bzw. als der Inhalt des ListBoxItems. Dieses Verhalten kann unerwünscht sein.

Nachfolgend beschreibe ich, was man machen muss, damit der VisualState MouseOver immer aktiviert wird, wenn der Mauszeiger über irgendeinen Punkt des ListBoxItems bewegt wird.

Es wird vorausgesetzt, dass irgendwo auf der Oberfläche eines Silverlight 4-Projekts eine ListBox mit mindestens einem ListBoxItem vorhanden ist. Dieses ListBoxItem wird mit einem Linksklick aktiviert. Als nächstes: Rechtsklick -> Vorlage bearbeiten -> Kopie bearbeiten, im Dialogfenster dem neuen Style einen Namen geben, bestätigen und man landet in der Vorlage des ListBoxItems.

Dann wird die Registerkarte "Zustände" selektiert. Für das weitere Vorgehen bitte darauf achten, dass "Basis" aktiviert ist:

Im Objektbaum der Vorlage das Element "fillColor" selektieren:

Dieses Element ist bewirkt visuell die Veränderung im VisualState MouseOver.

Wenn man jetzt im Eigenschaftenpanel einen Blick auf die Eigenschaft "IsHitTestVisible" dieses Elements wirft, so ist diese Eigenschaft standardmäßig nicht aktiviert:

Um den MouseOver VisualState für das gesamte ListBoxItem einzurichten, wird die Eigenschaft "IsHitTestVisible" aktiviert:

... und zack ... fertig ist diese Lösung.

Viel Spass damit.

Neuer Accordion Style mit einem passenden ListBoxItem Style

2010-11-04T09:14:00.001+01:00

Ich habe einen weiteren Accordion Style (Silverlight 4) in der Expression Gallery veröffentlicht. Bestandteil des Downloads ist auch ein ListBoxItem Style, der sich in das Design des Accordion Style einfügt.

Den Download, der den vollständigen Quellcode enthält, findet Ihr in der Expression Gallery.

Beim ListBoxItem ist es übrigens standardmäßig so, dass der VisualState MouseOver nur dann aktiviert wird, wenn der Mauszeiger über den Content bewegt wird. Das ist nicht immer erwünscht. Ein weiterer Artikel hier im Blog beschreibt, wie man die Vorlage eines ListBoxItems anpassen muss, damit der VisualState MouseOver immer aktiviert wird, unabhängig davon, wo der Mauszeiger über das ListBoxItem bewegt wird.

Viel Spass damit!

Quick-Tipp: Einfache direkte Storyboard-Verkettung mit extrem reduziertem Quellcode

2010-11-03T10:19:00.005+01:00

Bei der Arbeit an meinem aktuellen Projekt hatte ich eine Idee, wie man mehrere Storyboard mit weniger Quellcode miteinander verketten kann. Die vorgestellte Technik reduziert den xaml-Quellcode im vorgestellten Beispiel um fast 50%!

Angenommen, es gibt mehrere Storyboards, die in einer bestimmten Reihenfolge nacheinander gestartet werden sollen. Die übliche Herangehensweise ist, eine gesonderte Methode zu schreiben, in dem das zweite Storyboard gestartet wird, wobei an das Completed()-Ereignis des ersten Storyboard ein Delegat geknüpft wird, der auf die Methode zeigt, die das zweite Storyboard startet, usw.:

Bei einer großen Anzahl an Storyboards führt das schnell zu ziemlich viel Quellcode, der das Projekt aufbläht.

Man kann den Quellcode aber reduzieren, indem man als Delegaten für das Completed()-Ereignis einfach unmittelbar die Methode Storyboard.Begin() anhängt:

Nun mag man sich fragen, wozu soll das gut sein? Wenn ohnehin kein separater Quellcode beim Beenden eines Storyboard aufgerufen wird, ist es doch viel sinnvoller, die beiden Storyboards gleich als ein einziges Storyboard zu definieren und als einziges Storyboard zu starten. Stimmt, aber nicht ganz. Denn sinnvoll ist die hier vorgestellte einfache Verkettung mehrerer Storyboards z.B. in der folgenden Situation:

Das erste Storyboard soll zwei oder drei mal wiederholt werden bevor das zweite aufgerufen wird. Das zweite Storyboard soll auch zwei mal wiederholt werden, usw. Der Sinn der einfachen Verkettung wird deutlich: Die Animation jedes der Storyboards muss nur einmal im xaml definiert werden, wobei im xaml über den Wert des Attributs RepeatBehavior die Anzahl der Wiederholungen gesetzt wird. Wenn man demgegenüber ein einziges Storyboard definieren würde, müßte man die selbe Animation mit der Anzahl der benötigten Wiederholungen mehrfach im xaml definieren. Das würde viel unnötigen Quellcode produzieren. Bei der einfachen direkten Verkettung der Storyboards reduziert sich also der xaml-Quellcode und zugleich der Codebehind. Das gilt vor allem dann, wenn zu den Animationen aufwändige Easing-Funktionen hinzukommen.

Der folgende Quellcode verdeutlicht den Vorteil und die Reduzierung des xaml-Quellcodes. Die Variante mit nur einem Storyboard (sbSingle) hat insgesamt 106 Zeilen xaml-Quellcode. Die Variante mit der direkten und einfachen Verkettung von hier drei Storyboards braucht demgegenüber nur 58 Zeilen xaml-Quellcode. Das ist eine Reduzierung des xaml-Quellcodes um fast 50%!

Den Download des obigen Beispielprojekt findet Ihr in der Expression Gallery.

Schon gewußt? MSDN Magazin Inhalte mit Silverlight PivotViewer finden

2010-10-28T10:04:00.002+02:00

Das MSDN Magazin ist eine ergiebige Wissensquelle für Entwickler. Das Auffinden von speziellen Inhalten wird seit einiger Zeit dadurch erleichtert, dass die Inhalte aller Artikel mithilfe eines Silverlight PivotViewers gefiltert werden können. Ein Klick auf "Launch Pivot" und alle Ausgaben des MSDN Magazins können mithilfe eines Silverlight PivotViewers gezielt nach dem gesuchten Inhalten gefiltert werden.

Klick das Bild, um zum englischsprachigen MSDN Magain zu gelangen

Leider gibt es dieses hilfreiche Feature bislang nur auf der englischen Seite des MSDN Magazins.

Untersuchung über das Hinzufügen einer ResourceDictionary.xaml Datei zu einem Silverlight 4 Projekt in einem Expression Blend 4 Add-In

2010-10-22T16:48:00.003+02:00

Die in diesem Artikel vorgestellte Lösung zeigt, dass es grundsätzlich möglich ist, eine ResourceDictionary.xaml-Datei durch ein Add-In für Expression Blend 4 einem Silverlight 4-Entwicklungsprojekt hinzuzufügen.

Timmy Kokke hat kürzlich ein neues interessantes Add-In für Expression Blend 4 veröffentlicht. Das ist der Gradient Importer For Expresson Blend. In dem begleitenden Blog-Artikel stellt er die Frage in den Raum, ob es überhaupt möglich ist, in einer Expression Blend 4-Erweiterung für ein Projekt, das in Expression Blend bearbeitet wird, einen neuen Resourceneintrag durch den Quellcode des Add-Ins hinzuzufügen. Timmy Kokke löst das Problem in seinem Add-In durch eine Übergangslösung. Sein Add-In erzeugt das Xaml einer Resource und stellt es dem Nutzer in einer RichTextBox zur Verfügung. Der Nutzer kann den xaml-Quellcode dann durch copy and paste an die gewünschte Stelle in eine Projekt-Datei einfügen.

Die Frage, die Timmy Kokke aufgeworfen hat, ist sehr interessant. Ich habe mir überlegt, dass es schon ein gewisser Fortschritt wäre, wenn man Resourcen, die durch ein Add-In erzeugt werden, einem Entwicklungsprojekt über eine neue ResourceDictionary.xaml-Datei, die dem Entwicklungsprojekt hinzugefügt wird, bereitstellen könnte. Denn Aufgabe eines Resourcenverzeichnisses ist die zentrale Verwaltung von anwendungsweiten Resourcen. Der vielleicht größte Vorteil dieses zentralen Lösungsansatzes besteht darin, dass der Entwickler einer Blend-Erweiterung nicht alle denkbaren Varianten des Einbettens von Resourcen abdecken muss.

Ich habe ein paar Untersuchungen darüber angestellt, ob sowas möglich ist und wie das gehen könnte. Das positive Zwischenergebnis meiner Untersuchungen möchte ich hier kurz vorstellen. Die Lösung ist noch nicht endgültig. Sie löst auch nicht das von Timmy Kokke angesprochene Problem. Aber sie zeigt, dass es grundsätzlich möglich ist, eine ResourceDictionary.xaml-Datei durch ein Add-In einem geöffneten Entwicklungsprojekt hinzuzufügen.

Beispiel-Add-In
Das hier vorgestellte Beispiel-Add-In fügt einem neuen Silverlight 4-Projekt direkt beim Erzeugen in Expression Blend 4 eine neue ResourceDictionary.xaml-Datei hinzu. Das ist die Projekt-Datei TestResourceDictionary.xaml.

Bitte beachtet, dass es sich nur um ein Demonstration des Möglichen handelt. Der Quellcode ist deswegen nicht optimal.

Grundsätzliche Vorgehensweise
Über die Schnittstelle IProjectManager hängen wir uns an das ProjectOpened()-Ereignis heran. Dieses Ereignis feuert, wenn ein neues Projekt geöffnet wird. In einem anderen Artikel habe ich beschrieben, wie man in einer Expression Blend-Erweiterung den Projekttyp feststellen kann. Um den Quellcode auf das Wesentliche zu beschränken, geht das Beispiel-Add-In einfach davon aus, dass ein Silverlight-basiertes Projekt geöffnet wird. Dem ProjectOpened()-Ereignis wird also ein Delegat hinzugefügt, der auf die Routine ASilverlightProjectOpened() zeigt. Das Ereignis ProjectOpened() kennt zwei Parameter. Einer dieser Parameter ist vom Typ Microsoft.Expression.Project.ProjectEventArgs. Über diesen Parameter wird auf das neu erzeugte Silverlight 4-Projekt zugegriffen und das Projekt wird der Variablen "cp" zugewiesen. Die Variable cp ist vom Typ IProject. Die Schnittstelle IProject kennt die öffentliche Methode AddItem(). Diese Methode wird genutzt, um dem Projekt die Datei TestResourceDictionary.xaml als ProjetItem hinzuzufügen.

Die Methode IProject.AddItem() erwartet einen Parameter vom Typ Microsoft.Expression.Project.DocumentCreationInfo. Eine Variable diesen Typs wird erzeugt und schließlich der Methode IProject.AddItem() übergeben.

Quellcode im Detail
Nachfolgend findet Ihr den Quellcode der Routine ASilverlightProjectOpened() und der Routine CreateResourceDictionaryFile(). Der vollständige Quellcode kann über den Link am Ende dieses Artikels heruntergeladen werden.

    Private Sub ASilverlightProjectOpened(ByVal sender As Object, ByVal e As ProjectEventArgs)

      Dim cp As IProject = e.Project

      Dim resourceDictionaryCreationInfo As Microsoft.Expression.Project.DocumentCreationInfo

      resourceDictionaryCreationInfo.CreationOptions = CreationOptions.AlwaysUseDefaultBuildTask

      resourceDictionaryCreationInfo.DocumentType =
        CType(servicesPresenter.GetService(GetType(IDocumentTypeManager)), IDocumentTypeManager).DocumentTypes.ElementAt(20)

      Dim tmpPath As String = cp.DocumentReference.Path

      tmpPath = tmpPath.Replace("SilverlightApplication1.vbproj", "")

      resourceDictionaryCreationInfo.TargetFolder = tmpPath

      resourceDictionaryCreationInfo.TargetPath = tmpPath + "TestResourceDictionary.xaml"

      CreateResourceDictionaryFile(tmpPath, "TestResourceDictionary.xaml")

      resourceDictionaryCreationInfo.SourcePath = tmpPath + "TestResourceDictionary.xaml"

      cp.AddItem(resourceDictionaryCreationInfo)

    End Sub

    Private Sub CreateResourceDictionaryFile(ByVal TargetFolder As String, ByVal ResourceFile As String)

      Dim xamlDoc As XElement = <ResourceDictionary
                                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"></ResourceDictionary>

      xamlDoc.Save(TargetFolder + "TestResourceDictionary.xaml")

    End Sub

Zunächst wird eine private Variable vom Typ DocumentCreationInfo erzeugt. Das ist die Variable resourceDictionaryCreationInfo.

Über die Eigenschaft CreationOptions wird der BuildTask, ohne den das Resourcenverzeichnis nicht als Resource in den Build einbezogen wird, auf den DefaultBuildTask gesetzt.

Über die Eigenschaft DocumentType wird der Typ der Projektdatei festgelegt. Dazu wird auf die in der Schnittstelle IDocumentTypeManager vorgehaltene DocumentTypeCollection zugegriffen. Diese null-basierte Collection enthält insgesamt 36 Items. Eines davon ist der ResourceDictionaryDocumentType, der als Item an der Position 20 abgegriffen und der DocumentType-Eigenschaft der Variablen resourceDictionaryCreationInfo zugewiesen wird.

Der weitere Quellcode weist den Eigenschaften TargetFolder, TargetPath und SourcePath Werte zu. Dazu wird der Pfad des aktuellen Projekts ausgelesen und so modifiziert, dass man den Projekt Ordner erhält. Denn darin soll die Datei TestResourceDictionary.xaml gespeichert werden. Bevor der Eigenschaft SourcePath der Wert der Datei TestResourceDictionary.xaml zugewiesen wird, muss die Datei erzeugt werden. Das geschieht in der Routine CreateResourceDictionaryFile(). Diese Routine erzeugt den Xaml-Quellcode, der in einem neu erzeugten Resourcenverzeichnis standardmäßig enthalten ist. Das Xaml wird als xml erzeugt und als TestResourceDictionary.xaml-Datei gespeichert. Das Speichern der Datei über die Methode XElement.Save() hat den Nachteil, dass eine xml ProcessingInstruction am Anfang der Datei steht, die manuell entfernt werden muss. Dafür gibt es elegantere Lösungen. Eine davon findet sich garantiert in den Assemblies von Microsoft.Expression. Mir geht es mit diesem Beispiel aber nur darum, die Frage zu klären, ob es eine grundsätzliche Lösung für das eigentliche Problem gibt. Und die gibt es.

Nachdem den o.g. Eigenschaften der Variablen resourceDictionaryCreationInfo die Werte zugewiesen wurden, erfolgt schließlich die Übergabe dieser Variablen an die Methode AddItem().

Wenn das neue Silverlight 4-Projekt in Expression Blend 4 vollständig geladen ist, erscheint nun die Datei TestResourceDictionary.xaml im Projektbaum des Projektexplorers.

Einschränkungen
Diese Lösung hat gegenwärtig zwei Einschränkungen.

Die erste Einschränkung habe ich bereits erwähnt. Sie besteht darin, dass die xml-ProcessingInstruction aus dem Quellcode von TestResourceDictionary.xaml manuell entfernt werden muss.

Die zweite Einschränkung besteht darin, dass die Datei TestResourceDictionary.xaml manuell in der Datei App.xaml als Resourcenverzeichnis aufgenommen werden muss. Andernfalls wird sie nicht als Resourcenverzeichnis erkannt. Dazu muss der folgende Quellcode in App.xaml manuell eingefügt werden.

Damit landen wir im Prinzip mit der vorgestellten Lösung erneut bei der von Timmy Kokke aufgeworfenen Frage. Ich werde meine Untersuchungen fortsetzen und vielleicht auch eine Lösung dafür finden, das Resourcenverzeichnis im Quellcode von App.xaml aufzunehmen. Vielleicht gibt es aber irgendwo in der Community jemanden, der gerade genau an diesem Problem arbeitet und für den dieser Artikel eine Hilfe darstellt.

Sobald die besagten Einschränkungen manuell beseitigt worden sind steht das Resourcenverzeichnis der Datei TestResourceDictionary.xaml anwendungsweit in Expression Blend 4 zur Verfügung.

Download: Vollständiger Quellcode des Beispiel-Projects.

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

2010-10-21T12:37:00.002+02:00

Es gibt eine neue Version des RichTextBox.Xaml Builder Add-In für Expression Blend 4. Es ist die Version 1.0.0.2. Mit dieser Version gibt es ein paar ergänzende Funktionen, die im wesentlichen das Verhalten des Add-In in der Entwicklungsumgebung von Expression Blend 4 betreffen. Daneben wurde ein kleines Fehlverhalten der UI behoben.

Zusammenfassung der Neuerungen

A. Funktionen

1. Sichtbarkeit nur für Silverlight 4-basierte Projekttypen

Das Add-In erkennt beim Öffnen einer neuen Solution oder eines neuen Projekts selbständig den Projekttyp. Weil das Add-In eine Unterstützung ausschließlich für die Entwicklung von Silverlight 4-Projekten ist, ist es nur sichtbar, wenn mindestens ein Projekt in einer Solution ein Silverlight 4-basiertes Projekt ist. In WPF-Anwendungsprojekten ist das Add-In nun nicht mehr sichtbar. Das gilt unabhängig davon, um welchen Typ von WPF-Projekt es sich handelt (WPF-Anwendung, WPF-Steuerelementbibliothek, etc.). In allen Silverlight 4-basierten Projekttypen, einschließlich Datengebundenen Silverlight-Anwendungen und SketchFlow-Anwendungen, steht es hingegen zur Verfügung.

2. Vollständiges Löschen einer Konvertierung beim Schließen eines Projekts

Beim Schließen eines Projekts wird eine etwaige Konvertierung gelöscht, so dass sie beim Öffnen eines neuen Projekts nicht mehr sichtbar ist. In Version 1.0.0.0 blieb der Inhalt einer Konvertierung sichtbar, was unerwünscht ist.

3. Sicherungsabfrage für ungespeicherte Konvertierungen

Beim Schließen eines Projekts überprüft das Add-In jetzt, ob eine nicht gespeicherte Konvertierung aktiv ist. Dadurch wird vermieden, dass Konvertierungen ungewollt verloren gehen bzw. später neu erstellt werden müssen.

B. Bug-Fix: Überlappen in der XML-Ansicht behoben

In Version 1.0.0.0 war es so, dass bei einer Veränderung der Breite des Add-In-Fensters bei aktiver XML-Ansicht die XML-Ansicht nicht schmaler als eine bestimmte Breite verkleinert wurde. Das führte dazu, dass in der XML-Ansicht ein Teil des Add-In-Fensters das Registerkartenpanel überlappte. Dieses Fehlverhalten ist in Version 1.0.0.2 behoben.

Download der Version 1.0.0.2

Das RichTextBox.Xaml Builder Add-In für Expression Blend 4 kann in der Expression Gallery heruntergeladen werden. Die vorherige Version bleibt vorerst als eigenständiger Download in der Expression Gallery erhalten. Ich empfehle aber, die neueste Version zu verwenden.

Viel Spass mit der neuen Version.

FunWithArcs UserControl - Designstudie für ein Navigationssteuerelement

2010-10-20T08:56:00.003+02:00

Mit Silverlight 4 wurden Formen eingeführt. Es gibt Stern, Ring, Hexagon, Dreieck etc. Und es gibt die Kreisform, englisch: Arc. In der Entwicklungsumgebung von Expression Blend 4 wird das Steuerelement vom Typ Arc als Pie bezeichnet. Tatsächlich ist der Typ jedoch Arc.

Nun habe ich ein bißchen damit experimentiert und herausgekommen ist ein UserControl, das FunWithArcs UserControl. Eine Funktionalität hat es (noch) nicht. Also, was soll das? Nun, es ist wie gesagt ein Experiment. Und als solches betrachtet es bitte als Zwischenergebnis für das, was noch kommt. Ziel wird es sein, das UserControl zu einem Navigationssteuerelement weiterzuentwickeln. Mit dieser Idee im Hinterkopf, erschließt sich der gegenwärtige Stand der Entwicklung.

Das ist das UserControl im derzeitigen Entwicklungsstand:

Es ist Kreisrund und beim Eintritt des Mouszeigers erscheinen, je nach Position des Mauszeigers, vier Unterelemente. Diese Unterelemente sehen aus wie Kuchenstücke. Am Ende der Entwicklung werden diese Unterelemente jeweils für die Unterseiten einer Website stehen. Bewegt man den Mauszeiger über das kreisförmige Element in der Mitte, dann erscheinen alle vier Unterelemente im Überblick. In der späteren Verwendung als Navigationssteuerelement erhält der Nutzer damit einen Überblick über alle Unterseiten einer Webpräsenz. Das UserControl kann außerdem per Drag & Drop auf den Zentrumpunkt frei an eine neue Position verschoben werden. Bei der späteren Verwendung als Navigationssteuerelement bietet das den Vorteil, dass der Nutzer sich die Benutzeroberfläche individueller gestalten kann. Die UI der Webprasenz verliert ihre Starrheit. Dazu trägt auch die Möglichkeit bei, die Größe des (späteren) Navigationssteuerelements zu verändern. Das geschieht derzeit durch Benutzen des Mausrads über dem Zentrumspunkt. (Bitte beachtet, dass die Mausrad-Zoom-Funktion bei einer Einbettung in eine HTML-Seite derzeit noch im Konflikt steht mit der Scrollbar der HTML-Seite.)

Für die weitere Entwicklung habe ich derzeit folgende Ideen:

1. Die Größenveränderung über das Mausrad ist wenig intuitiv. Sinnvoller wäre es z.B., ein Steuerelement an den Rand des UserControl zu platzieren, über das die Größenveränderung erfolgt. Ein gescinntes Slider-Steuerelement bietet sich an.

2. Das UserControl sollte zu einem CustomControl weiterentwickelt werden. Das ermöglicht dem Designer eine größere individuelle Gestaltung des Steuerelements.

3. Die Unterelemente sollten ihrerseits ebenfalls CustomControls sein. Bestandteil des Templates muss vor allem ein Content-Steuerelement sein, in das dann ein HyperlinkButton für die Navigation platziert wird.

4. Das Hauptsteuerelement soll eine individuell bestimmbare Vielzahl von Unterelementen aufnehmen können.

5. Der Zentrumpunkt sollte ebenfalls ein eigenes CustomControl werden. Das ist sinnvoll, damit die Funktionsweise des Zentrumpunkts verallgemeinert und z.B. auch auf Unterelemente angewendet werden kann. Der Zentrumpunkt verschafft wie erwähnt einen Überblick über alle Unterelemente. Übertragen auf eine Platzierung in einem Unterelement können im Ergebnis die Unterelemente eines Unterelements angezeigt werden.

Das war' für heute zu dieser Designstudie für ein Navigationssteuerelement. Wer Interesse hat, sich in die weitere Entwicklung mit Ideen, Fragen oder Kritik einzubringen ist herzlich willkommen.

Den Quellcode des UserControls gibt es als Download in der Expresson Gallery. Sobald ich Zeit habe werde ich den Quellcode etwas näher erläutern.

Sichtbarkeit von einer Expression Blend Erweiterung (Add-In) abhängig vom Projekttyp

2010-10-14T15:49:00.010+02:00

Die Funktionalität einer Expression Blend-Erweiterung zielt meistens auf einen bestimmten Projekttyp ab. Deswegen ist es nützlich zu wissen, wie man die Sichtbarkeit der Expression Blend-Erweiterung abhängig davon steuern kann, welcher Projekttyp geöfnet ist bzw. geöffnet wird. Dieser Artikel beschreibt, wie man die Sichtbarkeit von einer Expression Blend-Erweiterung in Abhängigkeit vom Projekttyp steuern kann.

Die vorgestellte Lösung funktioniert mit allen Solutiontypen von Expression Blend 4, einschließlich SketchFlow-Solutions.

Beispielprojekt

Es wird eine einfache Beispiel-Erweiterung erstellt, um zu demonstrieren, wie der Quellcode funktioniert. Die Benutzeroberfläche besteht nur aus einem Fenster mit einem Textblock-Steuerelement.

Generelle Vorgehensweise

Die Assembly Microsoft.Expression.Project stellt die Schnittstelle IProjectManager zur Verfügung. Über die Verwendung dieser Schnittstelle kann auf das Ereignis SolutionOpened() reagiert werden. Dieses Ereignis tritt auf, wenn eine Solution geöffnet wird. Eine Solution kann gegebenenfalls aus mehreren Projekten mit unterschiedlichen Projekttypen bestehen. Dem Ereignis SolutionOpened() wird ein Delegate hinzugefügt. Innerhalb der Routine, auf die der Delegat zeigt, wird der aktuelle Projekttyp ermittelt, indem der Parameter e ausgewertet wird. Der Parameter e hat den Typ SolutionEventArgs. Mithilfe der Klasse SolutionEventArgs() kann der Projekttyp jedes Projekts identifiziert werden, das Teil der Solution ist. Die Projekte einer Solution können über SolutionEventArgs.Solution.Projects abgefragt werden. Der Rückgabewert von SolutionEventArgs.Solution.Projects ist vom Typ IEnumerable(Of IProject). Aber es ist nicht erforderlich, IProject selbst zu verwenden. Für das Identifizieren eines Silverlight-basierten Projekts innerhalb einer Solution, reicht es außer bei einem bestimmten Solutiontyp vielmehr aus, wenn nur der Projekttyp des Projekts ausgewertet wird, der in der Collection von SolutionEventArgs.Solution.Projects zuoberst gelistet ist.

Der einzige Solutiontyp, bei dem das nicht ausreicht, ist eine Silverlight-Anwendung mit ASP-Website. Für diesen Fall, kann über die Verwendung der Schnittstelle IProjectManager ergänzend auf das Ereignis ProjectOpened() reagiert werden. Dieses Ereignis tritt auf, wenn ein Projekt geöffnet wird. Wenn eine Solution mehrere Projekte enthält, dann feuert das Ereignis ProjektOpened() für jedes Projekt, das in der Solution enthalten ist. Es ist nach den von mir durchgeführten Tests nur für diesen Solutiontyp erforderlich, zusätzlich dem Ereignis ProjectOpened() einen Delegaten hinzuzufügen, der auf eine Routine zeigt, die sicherstellt, dass die Expression Blend-Erweiterung auch für das in dieser Solution enthaltene Silverlight-basierte Projekt zuverlässig bereitgestellt wird.

Schritt-für-Schritt

Schritt 1 - Konfigurieren des Entwicklungsprojekts

Für diesen Schritt verweise ich auf Schritt 1 in einem Artikel, den ich früher veröffentlicht habe.

Schritt 2 - Assemblyverweise

Auf die folgenden Assemblies müssen im Beispielprojekt durch Verweise einbezogen werden (in alphabetischer Reihenfolge):

Microsoft.Expression.Extensibility
Microsoft.Expression.Framework
Microsoft.Expression.Project
System.ComponentModel.Composition

Zu beachten ist, dass der Verweis auf Microsoft.Expression.Project nur funktioniert, wenn das Ziel-Framework in den Projekt-Eigenschaften in der Registerkarte "Kompilieren" unter "Erweiterte Kompilierungsoptionen ..." auf das .Net Framework 4 gesetzt wird.

Schritt 3 - Die Klasse ProjectManagerLabExtension.vb

Diese Klasse stellt die Expression Blend-Erweiterung bereit. Hier ist der vollständige Quellcode der Klasse:

Und so funktioniert sie im Detail:

Es werden drei private Variablen benötigt:

1. Die Variable windowService. Diese Variable ist vom Typ IWindowService. Die Methode IWindowService.RegisterPalette() fügt der Entwicklungsumgebung von Expression Blend eine neue RegisterPalette hinzu. Diese RegisterPallete enthält die Benutzeroberfläche der Expression Blend-Erweiterung in Gestalt des WPF-UserControls des Beispielprojekts.

2. Die Variable DemoUI. Diese Variable ist ein Object vom Typ des WPF-UserControls und liefert wie gesagt die Benutzeroberfläche.

3. Die Variable projectManager. Diese Variable ist vom Typ IProjectManager. Mit ihrer Hilfe prüfen wir den Solutiontyp sowie erforderlichenfalls den Projekttyp.

Im Load()-Ereignisbehandler werden den Variablen windowService und projectManager die jeweiligen Schnittstellen-Typen zugewiesen. Es wird die Routine BuildExtensionUI() aufgerufen. Diese Routine erstellt die Benutzeroberfläche der Expression Blend-Erweiterung und registriert eine neue RegisterPalette. Schließlich wird dem Ereignis SolutionOpened() eine Delegat hinzugefügt, der auf die Routine ASolutionOpened() zeigt.

Die Routine ASolutionOpened() ruft die Routine CheckProjectType() auf. Nachfolgend stelle ich zwei alternative Vorgehensweisen vor, um ein Silverlight-basiertes Projekt zu identifizieren.

Variante 1

Diese Variante ist nicht zu bevorzugen. Wer gleich die bessere Variante lesen will überspringt diesen Abschnitt und liest weiter bei "Variante 2".

Hier der Quellcode-Ausschnitt für Variante 1:

In dieser Variante hat die Routine CheckProjectType() zwei Parameter. Der erste Parameter (ProjectIdentifier) ist vom Typ String. Der zweite Parameter (eESA) ist vom Typ SolutionEventArgs. Dem ersten Parameter wird der Wert des ausgewerteten Projekttyps zugewiesen. Es wird der Projekttyp des Projekts ausgewertet, das in der Collection von IEnumerable(Of IProject) zuoberst gelistet ist. Mit dem zweiten Parameter wird der Wert von e weitergereicht.

In der Routine CheckProjectType wird dann der Projektidentifzierer (ProjectIdentifier) ausgewertet. Zu diesem Zweck werden vier mögliche Werte geprüft. Der Wert "Application Executable" weist auf eine WPF-Solution hin. Erfaßt werden alle Arten von WPF-Solutiontypen. Die Werte "Silverlight-based Project" und "Web Application Project" weisen auf eine Solution hin, die ein Silverlight-basiertes Project enthält. Der Wert "Web Site" weist auf ein ASP-Website-Project hin, das Teil einer Silverlight-Solution mit einer neuen ASP-Website ist. Dieser Wert wird beim Erstellen einer neuen Silverlight-Solution mit einer neuen ASP-Website übergeben. Nur in diesem Fall muss ergänzend der Projekttyp des Silverlight-Projekts abgefragt werden. Das Silverlight-Projekt in einer Silverlight-Solution mit neuer ASP-Website ist in der nullbasierten Collection IEnumerable(Of IProject) an zweiter Stelle gelistet.

Jeder der vier möglichen Werte wird als Fall ausgewertet. Es wird jeweils die Routine ControlDemoUIVisibility() aufgerufen. Je nach dem, welcher ProjectIdentifier übergeben wurde, wird der Parameter ExtensionVisibility auf True oder auf False gesetzt.

Variante 2 (empfohlen):

In dieser Variante wird die Collection IEnumerable(Of IProject) unmittelbar ausgewertet. Die Routine CheckProjectType() hat in dieser Variante nur einen Parameter. Dieser Parameter ist vom Typ SolutionEventArgs. Die Routine ASolutionOpened() ruft die Routine CheckProjectType() auf und reicht einfach den Parameter e weiter.

Hier ist der Quellcode für die Variante 2:

Die Auswertung erfolgt über eine LINQ-Abfrage. Die LINQ-Abfrage wertet für jedes Projekt in der Collection den Projekt-Identifizierer aus. Die Anzahl der in der Variablen silverlightMatches enthaltenen Elemente ist nur dann größer 0 wenn mindestens ein Silverlight-basiertes Project gefunden wurde. Wenn das der Fall ist, wird die Routine ControlDemoUIVisibility() mit dem Parameterwert True aufgerufen. Andernfalls mit dem Parameterwert False.

Hinweis: Wenn die Abfrage darauf gerichtet sein soll, ob ein WPF-Projekt geöffnet wird, braucht man einfach nur den Projekt-Identifizierer nach dem Wert "Application Extecutable" suchen zu lassen.

Die Routine ControlDemoUIVisibility() macht dann folgendes, vorausgesetzt ExtensionVisibility ist auf True gesetzt. Die Sichtbarkeit des WPF-UserControls wird auf sichtbar gesetzt. Falls die RegisterPalette noch nicht registriert ist, wird sie registriert. Die Sichtbarkeit von der RegisterPalette wird auf sichtbar gesetzt. Schließlich wird dem Ereignis IProjectManager.SolutionClosed() ein Delegat hinzugefügt, der auf die Routine ASolutionClosed() zeigt. Die Routine ASolutionClosed() entfernt die Expression Blend-Erweiterung, wenn die Silverlight-Solution geschlossen wird.

Das war's im Prinzip.

Es gibt eine Einschränkung, auf die ich hinweisen möchte. Wenn Expression Blend neu gestartet wird und der Benutzer im Willkommensbildschirm auf "Schließen" klickt, ohne ein Projekt zu öffnen oder ohne ein neues Projekt zu erstellen, wird gleichwohl die Expression Blend-Erweiterung im Menü unter "Fenster" angezeigt. Ich habe noch nicht herausgefunden wie man das verhindern kann. Weil das so ist, verarbeitet die Routine ControlDemoUIVisibility() ergänzend den Fall, dass der Parameter ExtensionVisibility den Wert False hat. Damit wird die Situation abgedeckt, dass Expression Blend geöffnet wird, der Willkommensbildschirm geschlossen und danach eine (neue) WPF-Solution geöffnet wird. Für diesen Fall wird ausnahmsweise die Routine ASolutionClosed() aufgerufen, damit die Expression Blend-Erweiterung entfernt wird, die in der Benutzeroberfläche bereits vorhanden ist.

Download: Der vollständige Quellcode des Beispielprojekts.