12.2.2012 von JMS.

Im Rahmen meiner Einarbeitung in Silverlight / WPF bin ich auf eine Idee gestossen, die ich einmal an einem rudimentären Beispiel als Anschauungsmaterial implementiert habe. Die Aufgabenstellung an sich ist eigentlich sehr einfach: aus einer begrenzten Liste von Auswahlelementen soll eines vom Anwender ausgewählt werden. Ganz klar die Aufgabe einer ComboBox. Die Auswahl soll zudem graphisch und nicht in Textform präsentiert werden - auch keinerlei Herausforderung für Silverlight / WPF. Wie das Beispiel zeigt, kann man sich das auch optisch ein wenig anders vorstellen - zu den einzelnen Elementen der Testseite gleich mehr.

Im initialen Zustand wird die Auswahlliste als ListBox dargestellt - ohne die typische Sondervisualisierung der ComboBox mit dem Auswahlfeld zum Aufklappen. Verändert sich die Auswahl, so übernimmt die Listbox die Anzeige - auf Aspekte des ausgewählten Eintrags kann im XAML wie gewohnt referenziert werden, wie das Bild links oben und der relative Pfad des Bildes daneben zeigt. Das ist nun wirklich nichts Besonderes bis hierhin.

Die Besonderheit zeigt sich aber, wenn man die Auswahl bestätigt. Die ListBox klappt dann scheinbar zu und zeigt nun nur noch den ausgewählten Eintrag.

Das Beispiel kann man sich selbst einmal hier anschauen, die Quellen gibt es hier. Es handelt sich wirklich nur um eine sehr elementare Implementierung, sicher nicht um ein vollwertiges Control. Was tut das Beispiel jetzt schon:

• Beim Starten ist einer der drei Alternativen ausgewählt - sieht im Beispiel etwas häßlich aus, da meine Beispielbilder einen teilweise transparenten Hintergrund haben und die Auswahleinfärbung der Listbox auch im zugeklappten Modus erscheint: einfach vorstellen, dass der Hintergrund der Visualisierungselemente nicht transparent ist (man kann irgendein FrameworkElement verwenden).
• In der oberen Zeile wird die Auswahl zur Demonstration als Bild und Pfad zusätzlich angezeigt.
• Ein einfacher Klick auf die gewählte Alternative (großes Bild) öffnet die Auswahlliste.
• Die Navigation in der Liste mit Maus oder Tastatur verändert die Auswahl, insbesondere kann diese wie gewohnt mit Strg-Click aufgehoben werden.
• Ein Doppelklick oder die Taste ENTER beendet die Auswahl und schließt die Liste, es wird nun die letzte Auswahl angezeigt.
• Die Eingabe des Pfades in der oberen Zeile kann zur Änderung der Auswahl verwendet werden - uh, Injection Attack möglich, schert hier aber nicht.
• Hat die zugeklappte Liste den Fokus, so kann die Auswahl weiterhin mit der Maus verändert werden - die Liste klappt dazu automatisch auf.
• Im XAML der Seite sieht man, dass die Auswahl vorbelegt werden kann, was natürlich optional ist.

Happy Coding

Jochen

Geschrieben in Silverlight | Keine Kommentare »

13.10.2010 von JMS.

Bei meiner weiteren Einarbeitung in Silverlight 4 habe ich ein kleines Spielzeug gebastelt, mit dem man sich die Funktionalitäten von Logikgattern anschauen kann. Etwas wirklich Sinnvolles macht das Progrämmchen nicht und schon bei getackteten FlipFlops würde es gnadenlos scheitern. Aber es simuliert zumindest einfache statische Schaltungen - wenn man auf allzuviele Tricks verzichtet.

Man kann es sich natürlich auch Online abschauen (na gut: eine Bedienungsanleitung gibt es nicht und ohne wird es schwer) und den Quellcode gibt es selbstverständlich auch. Meine Lerneffekte waren so in etwa:

* Darstellen der Bausteine auf Basis eines einzigen Controls über verschiedene Styles.
* Arbeiten mit ContentTemplates und dynamischen Elementen darin.
* Lokalisieren von Elementen über TransformToVisual / TransformBounds.
* Einsatz der Viewbox zur sauberen Skalierung von freien Zeichnungen (der Gattern) in die gewünschten Bereiche.
* Drucken und dabei Skalieren mit der Viewbox sowie das Kennenlernen einiger UpdateLayout Fallstricke.
* Speichern in und Laden aus Dateien im lokalen Dateisystem und mehr UpdateLayout Fallstricke.
* Speichern in und Laden aus dem IsolatedStorage sowie Zugriff auf diesen inkl. Löschen - ok, das ist nun wirklich nichts Wildes.
* Einsatz eines Canvas als Overlay zur Annotationen - hier die Verbindungen von Aus- und Eingängen.
* Ein bißchen über Styles und was sie nicht können.

Viel Spaß

Jochen

Geschrieben in Silverlight | Keine Kommentare »

29.9.2010 von JMS.

In einer Lösung werden auf eine Benutzereingabe hin ca. 10.000 (eher weniger) Zeichenketten (einige kurz, einige länger, aber im Mittel sicher nicht mehr als 200 Zeichen) darauf untersucht, ob sie eine andere Zeichenkette (im Beispiel 7 Zeichen) enthalten. Dazu wird String.IndexOf verwendet. Unter Vista geht das so schnell, dass man praktisch keine Verzögerung zwischen Beginn der Suche und dem Ergebnis sieht - daher hatte ich für den einfachen Test auch nicht nach eleganteren Möglichkeiten der Suche Ausschau gehalten. Bei gleicher Hardware unter XP dauert die Operation insgesamt aber etwa 30 (!!!) Sekunden - ich schätze mal, mindestens ein Faktor 100 langsamer.

Um auszuschliessen, dass es an den Daten liegt, habe ich das IndexOf naiv über ToCharArray() und einen wirklich primitiven Suchlauf gemacht - einfacher geht es nicht: erstes Zeichen des Suchbegriffs suchen und schauen, ob die Folgezeichen stimmen und wenn nicht ein Zeichen weiter neu suchen etc. Schlechter kann die Silverlight Implementierung eigentlich nicht sein - ist sie aber: hier gibt es nun auch unter XP keine Verzögerung mehr!

Dies als kleine Warnung: selbst auf Microsoft Plattformen scheint Silverlight nicht so furchtbar plattformunabhängig zu sein und hier geht es um eine primitive Laufzeitmethode!

Jochen

PS: Habe ich wohl nicht ausreichend respektive falsch recherchiert, ist ja schon länger bekannt. Sorry!

Geschrieben in Silverlight | Keine Kommentare »

29.9.2010 von JMS.

Nein, nicht wirklich. Aber da ich mich in Silverlight 4 einarbeiten wollte, um einige Konzepte zu verstehen, habe ich mir als lebendes Beispiel VCR.NET ausgesucht. Nutzbar ist das Ergebnis wohl nur in einem sehr engen Rahmen, da es wirklich nur eine technische Studie vor dem Hintergrund eines knappen Zeitbudgets ist. Aber wer mal reinschauen möchte, kann sich die beiden Dateien von hier in sein VCR.NET Installationsverzeichnis kopieren, der Aufruf erfolgt mittels http://localhost/VCR.NET/Silverlight.html - Silverlight 4 muss natürlich lokal installiert sein. Die Quellen sind wie gewohnt öffentlich verfügbar. Die Nutzung erfolgt ohne Gewähr, ich hatte keine Zeit, alle technischen VCR.NET Aspekte bis auf’s Letzte zu prüfen - ich werde den Client jetzt mal für das nutzen, was er kann und evtl. einen Update nachschieben. Die Studie versteht sich als solche und wird nicht Teil der nächsten VCR.NET Version sein.

Hier einfach so ein paar Aspekte des Clients in bunt gewürfelter Reihenfolge - Silverlight, VCR.NET, Technik, …

• * Ein definiertes Ziel war es, im Oberflächenbereich soviel wie möglich auf XAML zu setzen und so wenig wie möglich Code zu schreiben. Das ist nur zum Teil gelungen, da vor allem die Programmzeitschrift doch einiges an Logik erfordert.
• * Als nützlich hat sich die gemischte Nutzung von vordefinierten (App.xaml) und programmatischen (App.Resources) Ressourcen erwiesen. Es scheint allerdings etwas kniffeliger zu sein, letztere in der Startphase zur Nutzung in XAML zur Verfügung zu stellen
• * Bei den Einstellungen habe ich ein wenig mit den Formularmöglichkeiten herumgespielt, etwa mit der Validierungsinfrastruktur oder dem praktischen Label Control.
• * Grundsätzlich sollte alles für eine einfache Übersetzung in andere Sprachen (Lokalisierung) vorbereitet sein.
• * Auf Deployment Techniken wie Bibliotheken bin ich bewußt nicht eingegangen.
• * Einer der zwei wichtigen Aspekte der Studie ist die Programmzeitschrift mit ihren Filtermöglichkeiten. Hier gab es einige Ärgernisse von Silverlight vs. WPF zu ignorieren (in einer ComboBox kann man ohne weiteren Code nicht über Tasteneingaben auswählen) oder zu umgehen (die Gruppierung der Ergebnisliste nach Tag und Stunde - Gruppierungen kennt in Silverlight erst einmal nur das DataGrid). Ganz nett war es zu sehen, wie einfach man aus einem ItemsControl eine Art ListBox machen kann, die ein Auswahlfeedback bietet.
• * Die Liste der geplanten Aufzeichnungen ist eher langweilig, hier habe ich ein bißchen mit dem DataGrid experimentiert. Ganz interessant ist die Detailanzeige von Mehrkanalaufzeichnungen, die sich auf die Ausawhl einer Aufzeichnung öffnet. Hier sind man genau, welche anderen Aufzeichnungen verhindert oder parallel aufgezeichnet werden.
• * Meine erste Aktion war der Navigationsknopf zum Blättern, der optisch ein wenig (nicht mehr) hermachen sollte. Er blendet sich auch fast vollständig aus, wenn die Maus nicht gerade auf ihm steht.
• * Die Animation beim Blättern ist ein reiner Test - vermutlich in der Praxis eher nervig.
• * Es werden auch die laufenden Aufzeichnungen angezeigt. Hier war aber die Zeit zu Ende und außer genau der Anzeige kann man nicht viel machen.
• * Im XAML wird an vielen Stellen mit Konvertern (IValueConverter) gearbeitet, vor allem zur Anzeige von Uhrzeiten (VCR.NET verwendet grundsätzlich GMT / UTC und nicht die lokale Zeitzone) oder der Auswahl von Symbolen. Richtig eingesetzt sind Konverter trotz einfachster Codierung offenbar eine starke Waffe zur Unterstützung der Dynamik - man siehe auch diesen Artikel.
• * Die Trennung zwischen Layout und Inhalt ist sicher noch unzureichend. Zwar habe ich viel auf Styles gesetzt, aber enthalten diese dann doch zum Teil wieder Bezüge zu ihrer Umgebung - unschön, das geht sicher auch professioneller.
• * Beim Anbindung des SOAP Web Services vom VCR.NET hat es sich als nützlich erwiesen, dass alle generierten Klassen partial sind. So konnte etwa das EPGEvent so erweitert werden, dass neu hinzugefügte Eigenschaften direkt in XAML Bindings referenzierbar sind.

Ok, das war sicher nicht alles, muss aber für jetzt reichen!

Viel Spaß

Jochen

Geschrieben in Silverlight, VCR.NET | Keine Kommentare »

25.9.2010 von JMS.

In einer ListBox von Silverlight 4 sollen .NET Objekte dargestellt werden, die zwar einer gemeinsamen Basisklasse angehören, individuell aber unterschiedliche Ausprägungen haben - im Beispiel habe ich mal eine abstrakte Basisklasse Animal (Tier) genommen und davon Insect (Insekten), Mammal (Säugetiere) und Bird (Vögel) abgeleitet. Im realen Leben soll die ListBox für die unterschiedlichen konkreten Klassen völlig unterschiedliche Darstellungen verwenden. Im Beispiel habe ich hier einfach mal einen Präfix und eine Farbunterlegung verwendet.

Links sieht man die normale Darstellung und rechts so, wie ich mir das vorstelle. Den gesamten Quellcode für das Beispiel habe ich hier bereitgestellt, hier nur kurz die wesentlichen Tricks (wenn es einfacher geht, wäre ich durchaus an einem Hinweis interessiert).

Die rechte ListBox verwendet ein ItemTemplate / DataTemplate, in dem eine dynamische Bindung des Styles an ein ContentControl vorgenommen wird.

<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl Style="{Binding Converter={StaticResource style}}" />
</DataTemplate>
</ListBox.ItemTemplate>


Bei der statischen Ressource handelt es sich um einen IValueConverter, der nach einer Namenskonvention beliebigen Instanzen von .NET Objekten eine statische XAML Ressource zuordnet.

<app:StyleChooser x:Key="style" />

object IValueConverter.Convert( object value, Type targetType, object parameter, CultureInfo culture )
{
if (value == null)
return null;
else if (targetType == typeof( Style ))
return App.Current.Resources[value.GetType().Name + "ClassStyle"];
else
return null;
}


Nun muss nur noch für jede Klasse ein Style in der verwendete Namenskonvention bereitgestellt werden. Da hier ein ContentControl verwendet wird, hat man im ControlTemplate alle Möglichkeiten, die auch ein DataTemplate bietet.

<Style x:Key="MammalClassStyle" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel Background="Gray" Orientation="Horizontal">
<TextBlock Text="Das ist ein Säugetier: " />
<TextBlock Text="{Binding}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


Happy Coding

Jochen

Geschrieben in Silverlight | Keine Kommentare »