Aktuell bin ich wieder mal in einer Silverlight Schulung. Obwohl ich das Thema wirklich von A-Z kenne, entdecke ich immer wieder Neues. Dieses mal im ausgezeichneten Silverlight 4 Buch von Thomas Claudius Huber (erschienen bei Galileo). Thomas macht auf Seite 833 etwas, was ich so nicht tun würde. Er nimmt einen DataContractJsonSerializer um einen JSon Rückgabe eines REST Services nach POCO zu wandeln. Interessante Idee, aber nicht im Sinne des Erfinders. Dafür waren wohl eher die Klassen JSoneArray oder JSonObject gedacht. Nicht desto trotz – einen Blick wert. Aber ich möchte erst mal die Basics aufgreifen. Ein Objekt, hier z.B. Person muss serialsiert werden um z.B. im Isolated Storage dauerhaft gespeichert zu werden.

Zunächst einmal ein Prototyp der einfach das Objekt serialisiert und im UI ausgibt. Es müssen drei Namensräume eingebunden werden

System.IO
System.Runtime.Serialization
System.Text

Dann wird der klassische DataContractSerializer angeworfen der XML erzeugen wird. Am Ende wird das erzeugte Byte Array in UTF Encodiert um die Anzeige zu realisieren.

Dim p As New person
Dim ms As New MemoryStream()
Dim ser As New DataContractSerializer(GetType(person))
ser.WriteObject(ms, p)
Dim array() As Byte = ms.ToArray()
ms.Close()
TextBlock1.Text = Encoding.UTF8.GetString(array, 0, array.Length)

Alternativ gibt es auch noch ein Klasse XMLSerializer mit den Methoden Serialize und Deserialize auf die ich hier aktuell nicht eingehen möchte. Will man Json erzeugen muss man einen anderen Serialisierer nehmen. Der wiederum findet sich im Namensraum System.Runtime.Serialization.Json. Dann muss nur eine Zeile getauscht werden.

Dim ser As New DataContractJsonSerializer(GetType(person))

Deutlich zu erkennen ist, das die Datenmenge bei Json im Vergleich zu XML deutlich geringer ist. Aus diesem Grund sehe ich auch SOAP als noch viel schwer gewichtigeres XML Format sehr kritisch und sehe die Zukunft eher in REST basierten Ansätzen wie das moderne ODATA.

Wie kommen nun die Daten wieder zurück? Der sehr gut verkürzte Code.

Dim p As New person
Dim ser As New DataContractJsonSerializer(GetType(person))
Dim ms As New MemoryStream(Encoding.UTF8.GetBytes(TextBlock1.Text))
p = ser.ReadObject(ms)
ms.Close()
    

Manchmal ist die Wahl wirklich die Qual. In Silverlight 4 gibt es mindestens vier mir bekannte Möglichkeiten in Dialogen Eingaben des Benutzers zu prüfen.

• per Exception (von Anbegin)
• per Eigenschaftsattribut (mit RIA Services eingeführt)
• IDataErrorInfo
• INotifyDataErrorInfo (neu in SL4)

Mit dem letzteren werden wir uns hier nun beschäftigen. Wenn eine Datenklasse das Interface INotifyDataerrorInfo implementiert kann von andere Stelle im Code ein Fehler Event aufgerufen werden. Im Unterschied zu IDataErrorInfo kann dann ein Property auch mehrere Fehler besitzen (ob es sich darüber freuen wird?) was den Code nicht einfacher macht.

Darüber hinaus kann man direkt das ErrorsChanged Event aufrufen und so auch asynchron validieren.

Mein folgendes Silverlight Beispiel ist Teil einer kleinen APP die die UST ID auf Gültigkeit beim zuständigen Finanzamt prüft. Das heißt es werden Daten an einen Webservice geschickt und dieser antwortet für jedes Feld ob dies gültig oder ungültig ist. Der Benutzer muss dann die Eingabe korrigieren oder seinem Geschäftspartner mitteilen das eine UST freie Lieferung nicht möglich ist.

Dazu erstellte ich mir einen Datenklasse die später dann auch an das UI per Binding gebunden wird. Die Attribute dienen ebenfalls der Eingabe validierung bzw dem Layout des Dialoges. Dort kommen Label Steuerelemente zum Einsatz die dann z.B. Display Name verwenden.

Public Class ustidFirma
    Implements INotifyDataErrorInfo
    <Required()>
    <Display(Name:="Ustid")>
    Public Property ustid As String
    <Required()>
    <Display(Name:="Firma")>
    Public Property firma As String

Wesentlicher ist aber die Logik. Eine exemplarische Implementierung nachdem das Interface InotifyDataErrorInfo implementiert wird. Es werden zwei Methoden benötigt. Die Eigenschaft HasErrors definiert ob grundlegend Fehler vorhanden sind. Die Funktion GetErrors gibt eine Liste der Fehler zurück die für einen bestimmte Eigenschaft, z.B. ustid, vorliegen. Das ErrorsChanged Event dient dazu die UI über Änderungen zu informieren.

Imports System.ComponentModel
Public Class test1
    Implements INotifyDataErrorInfo
    Public Event ErrorsChanged(ByVal sender As Object, 
ByVal e As System.ComponentModel.DataErrorsChangedEventArgs) 
Implements System.ComponentModel.INotifyDataErrorInfo.ErrorsChanged
    Public Function GetErrors(ByVal propertyName As String) 
As System.Collections.IEnumerable 
Implements System.ComponentModel.INotifyDataErrorInfo.GetErrors
    End Function
    Public ReadOnly Property HasErrors As Boolean 
Implements System.ComponentModel.INotifyDataErrorInfo.HasErrors
        Get
        End Get
    End Property
End Class

Zurück zu meinem Beispiel UST Prüfung. Um die Fehler zu verwalten erstelle ich mir eine Liste für die Attribute und deren Fehler.

 Private errors As New Dictionary(Of String, List(Of String))

HasErrors liefert dann zurück ob in der Liste was drin steht.

Public ReadOnly Property HasErrors As Boolean Implements System.ComponentModel.INotifyDataErrorInfo.HasErrors
 Get
     Return errors.Count > 0
 End Get
End Property

Die Funktion GetErrors, liefert die Fehlerliste für das ausgewählte Property.

Public Function GetErrors(ByVal propertyName As String) 
As System.Collections.IEnumerable 
Implements System.ComponentModel.INotifyDataErrorInfo.GetErrors
  If errors.ContainsKey(propertyName) Then
    Return errors(propertyName)
  Else
    Return Nothing
  End If
End Function

Eine manuell von mir erstellte Hilfsfunktion RaisErrorsChanged füllt die Fehlerliste und wirft dann das Event um im  Userinterface die Bindung zu aktualisieren.

Public Sub RaiseErrorsChanged(ByVal propertyName As String, ByVal Fehler As String)
 If Not errors.ContainsKey(propertyName) Then errors(propertyName) = New List(Of String)()
   errors(propertyName).Add(Fehler)
   RaiseEvent ErrorsChanged(Me,
   New DataErrorsChangedEventArgs(propertyName))
End Sub

Diese Sub wird von mir sozusagen per Hand aufgerufen. Die dazu gehörige Logik blende ich hier aus. Stellen Sie sich einfach einen Button vor der folgenden Code enthält.

 Dim ui As ustidFirma = LayoutRoot.DataContext
 ui.RaiseErrorsChanged("ustid", "USTID falsch")

Da es sich um eine gebundenes Objekt handelt kann ich jederzeit dieses Objekt zurückholen und darauf dann die Methode RaiseErrorsChanged aufrufen. Im XAML Code sind dafür mehrere Dinge nötig. Der Namensraum (hier willkürlich local genannt) um auf die Projektklassen zugreifen zu können. Die deklarative Instanz mit dem frei gewählten Namen uf1.  Das Grid mit dem Namen Layoutroot ( Silverligth Default) bekommt dann dieses Objekt uf1 per Binding in seinem DataContext zugewiesen. Beachten Sie das dies notwendig ist, um im vorigen Codeblock damit agieren zu können und das Label und die Textbox zu Binden. Dabei ist noch wesentlich das in der Bindung der Text Eigenschaft der Textbox das Binding Attribut ValidatesOnNotifyDataErrors gesetzt wird. Der folgende XAML Code ist stark gekürzt.

xmlns:local="clr-namespace:KoelnSL"
             >
    <UserControl.Resources>
        <local:ustidFirma x:Key="uf1"/>
.....
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource uf1}}">
    .....     <sdk:Label  Target="{Binding ElementName=txtmyID}"/>
        <sdk:Label Target="{Binding ElementName=txtID}"/>
 ..
        <TextBox  x:Name="txtmyID"  />
        <TextBox  x:Name="txtID" 
Text="{Binding ustid,Mode=TwoWay,ValidatesOnExceptions=true, 
NotifyOnValidationError=true,ValidatesOnNotifyDataErrors=True}" />
      ..   </Grid>

Der Vollständigkeit halber noch der fertige Dialog.

Man muss das Rad nicht immer neu erfinden. Im heutigen Beispiel kommt deshalb die Library Imagetools zum Einsatz. Diese verwendet wiederum eine Zip Bibliothek und die wiederum … Und am Ende wird meine Silverlight Anwendung davon profitieren. Der “Use Case” ist eine Webcam im Browser. Der Benutzer kann ein Foto Schießen und dieses dauerhaft speichern.

Den Part mit der Webcam halte ich hier sehr kurz. Zur Darstellung wird ein einfaches Rechteck (Rectangle1) verwendet.

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices(0)
  Dim wb As New VideoBrush
  wb.SetSource(cs)
  Rectangle1.Fill = wb
  If CaptureDeviceConfiguration.AllowedDeviceAccess Or CaptureDeviceConfiguration.RequestDeviceAccess Then
     cs.Start()
  End If
End Sub

Wenn der Benutzer auf den Button drückt läuft das aktuelle Bild als Video. Ein zweiter Button dient dazu den Snapshot zu erstellen und das Bild zu speichern. Dazu müssen die DLL’s ImageTools, ImageTools.IO.Png und ImageTools.Utils als Referenz eingebunden werden.

Frage Nummer eins ist, wie kommt man ans Bild? Und in welchem Format? Wer in den Dokus nachschlägt wird immer das Event CaptureImageAsync finden. Allerdings kann man auch direkt die Writeablebitmap Klasse verwenden um einen Screenshot eines beliebigen UIElements zu erstellen. Auch bei CaptureImageAsync erhält man ein Obekt vom Typ WriteableBitmap. Braucht nur ein bisschen mehr Code. Ein weiterer Unterschied ist, das Writeablebitmap erst nach vollständigen Rendering den “Screenshot” erstellt. Mit CaptureImageasync  bekommt man den Screenshot schneller aber ohne Effekte ala Pixelshader. Für das Capturen von laufenden Videos braucht es aber noch ein wenig mehr. Dazu dient dann Videosink. Mehr dazu im Blog von Rene Schulte.

Im Silverlight Isolated Storage kann dann das Bild serialisiert gespeichert werden. Dazu wird aus dem WriteableBitmap zunächst ein Bild vom Typ PNG erzeugt. Ein netter Trick ist die Extension Methode ToImage, die der WriteableBitmap Klasse zugewiesen wird. (enthalten in Utils). Der PngEncoder erzeugt das korrekte PNG Format. Es liegen auch noch Encoder für BMP, GIF und JPG bei.

Private Sub speichern_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles speichern.Click
 Dim wb As New WriteableBitmap(Rectangle1, Nothing)
 Image1.Source = wb
 Dim iso As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
 Using sr As IsolatedStorageFileStream = iso.OpenFile("bild" + Date.Now.ToString("YYYMMDDHHmmss") + ".png", FileMode.OpenOrCreate)
   Using bw As BinaryWriter = New BinaryWriter(sr)
     Dim enc As PngEncoder = New PngEncoder()
     Dim bytesImage As Byte()
     Using ms As MemoryStream = New MemoryStream()
       Dim itImage = wb.ToImage()
       enc.Encode(itImage, ms)
       bytesImage = ms.ToArray()
       bw.Write(bytesImage)
     End Using
  End Using
 End Using
End Sub

Ziemlich cool ist, das die Bilder dann auch wirklich physikalisch auf der Festplatte rum liegen.

“Nur kein Code ist guter Code”. Ein Zitat aus meinem Munde [Hannes Preishuber]. Entsprechend versuche ich immer mit minimalen Code mein Ziel zu erreichen. Vielleicht auch ein Grund warum ich mit Layern und MVxx recht sparsam umgehe.

Deshalb bin ich auch ganz stolz auf mein Silverlight Bilder Drag & Drop Beispiel. Fünf Zeilen Code. Weniger geht kaum.

Drag& Drop ist eine Funktion in Silverlight 4 die sowohl für OOB als auch in Browser Anwendungen funktioniert. Der Benutzer kann eine oder mehrere Dateien auf ein UIElement ziehen und dort fallen lassen. Dafür muss im UIElement das Attribut Allowdrop auf true gesetzt werden. Dann werden vier mögliche Events gefeuert.

• DragEnter
• DragOver
• DragLeaver
• Drop

Wirklich wichtig ist nur das letzte Ereignis Drop. Die anderen Events könnten verwendet werden um den Benutzer durch z.B. Farbänderungen sichtbar zu machen wohin er gerade dropped. In Meinem Beispiel möchte ich auf ein Image Element ein Bild ziehen können. Da das Image ohne Bild nicht sichtbar ist, reagiert es auch auf keine Events und ist nicht abschätzbar wo die Grenzen sind. Ähnliches passiert meinen Silverlight Kurs Teilnehmer recht häufig mit einem Rechteck. Das ist auch nur clickbar wenn es mit einer Brush gefüllt ist.

Um also den Rahmen zu zeichnen und das Drop Event zu bekommen, packe ich einfach das Image in ein Border der gefüllt ist.

<Border HorizontalAlignment="Left" 
Height="211" Margin="75,0,0,0" Drop="Image1_Drop"
   AllowDrop="True" VerticalAlignment="Top" 
Width="202">
<Border.Background>
 <LinearGradientBrush EndPoint="0.5,1" 
StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Image 
MouseLeftButtonDown="Image1_MouseLeftButtonDown"
x:Name="Image1" Stretch="Fill" />
</Border>

Im Drop  Event bekommt man per e.Data die Liste der gedroppten Dateien. In meinem Fall nehme ich einfach die erste Datei im Index und gehe davon aus das es ein JPG oder PNG ist. Dann wird die Datei per Filestream geöffnet und einem BitmapImage zugewiesen. Dieses wiederum ist die perfekte Quelle für das Image Element.

Private Sub Image1_Drop(ByVal sender As System.Object, 
ByVal e As System.Windows.DragEventArgs)
  Dim fi As FileInfo = 
     e.Data.GetData(DataFormats.FileDrop)(0)
  Using fs As FileStream = fi.OpenRead
     Dim bi As New BitmapImage
     bi.SetSource(fs)
     Image1.Source = bi
  End Using
End Sub

wie gesagt alles Beispiele aus meiner Silverlight Schulung. Der nächste Termin ist in Leipzig.

Ein weiteres (sehr kleines) Beispiel aus meiner Silverlight Trickkiste. Irgendwann muss ich das mal strukturieren und ein Silverlight Tutorial draus machen. Da irgendwann in weiter Zukunft liegt zunächst mal was kleines. Die Zwischenablage des Betriebssystems kann in Silverlight 4 gelesen und geschrieben werden. Leider kann der Benutzer aber nur reine Texte kopieren.

Es gibt drei Methoden auf dem statischen Clipboard Objekt.

• ContainsText
• GetText
• SetText

Name ist Programm.

Da der User den Zugriff auf die Zwischenablage (ähnlich der Webcam) explizit erlauben muss, gibt es eigentlich drei Fälle. Folgender Silverlight Code mit VB.NET zeigt die Szenarien.

Try
    If Clipboard.ContainsText() Then
       TextBox1.Text = Clipboard.GetText()
    Else
       MessageBox.Show("Zwischenablage leer")
    End If
Catch ex As SecurityException
    MessageBox.Show("Bitte Zugriff auf Zwischenablage erlauben")
End Try

Das funktioniert OOB ( out of browser) und auch für Browser Anwendungen.

Manchmal kommen mir so Ideen und ich probiere rum bis es geht ohne eine Idee zu haben wofür eigentlich. Meine heutige Abendbeschäftigung sind entschärfte Commands um dynamisch ein Formular zu erzeugen. Meist sieht man den Einsatz von Commands im Zusammenhang mit MVVM. Ich will es aber einfacher. Zunächst die Ausgangsituation. Silverlight 4 besitzt ein Command Attribut mit denen man Commands deklarativ zuweisen kann. Weiters kann man mit dem XAMLReader ein UI Element aus einem String erzeugen lassen. Wenn man Events per Attribut zuweisen möchte meckert der XAML Parser.

Also wie sieht normalerweise ein Button Event aus

 <Button Content="fester Button"  
Height="37" Click="Button1_Click" 
HorizontalAlignment="Left" Margin="42,35,0,0" 
Name="Button1" VerticalAlignment="Top" Width="102" />

Im VB.NET Code dann im Ansatz so

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Alternativ kann man auch im Command Attribut ein Command angeben. Dazu benötigt man aber eine Klasse die das Interface ICommand implementiert. In der minimal Ausstattung wie folgt mit einer simplen MessageBox.

Public Class HannesCommand1
    Implements ICommand
    Public Sub HannesCommand1()
    End Sub
    Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute
        Return True
    End Function

    Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged

    Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute
        MessageBox.Show("hannescommand1")
    End Sub
End Class

Das Command kann aber nicht direkt verwendet werden. Der Umweg muss über die Ressourcen. In jedem Fall benötig man den Namensraum auf das aktuelle Silverlight Projekt das den Namen KoelnSL heißt. Der Namensraum wird willkürlich local genannt.

 xmlns:local="clr-namespace:KoelnSL"
  

Das Command wird dann als Unterelement deklariert über den Namesraum local und den Klassennamen.

<Button Content="Button" Height="38" 
    HorizontalAlignment="Left" Margin="121,227,0,0" 
Name="Button1" VerticalAlignment="Top" Width="105" >
   <Button.Command>
<local:HannesCommand1></local:HannesCommand1>
   </Button.Command>
</Button>

Alternativ besteht auch die Möglichkeit über eine Statische Ressource zu gehen. Die Instanz wird per x:Key willkürlich hCommand benannt.

<UserControl.Resources>
        <local:HannesCommand1 x:Key="hCommand"></local:HannesCommand1>
</UserControl.Resources>

Im XAML des Button Elements kann man dann mit kurzer Syntax direkt per Command Attribut die Bindung deklarieren auf hCommand.

<Button Content="Button" Height="38" Command="{StaticResource hCommand}"
                 HorizontalAlignment="Left" Margin="121,227,0,0" 
Name="Button1" VerticalAlignment="Top" Width="105" >
        

Soweit die Theorie zum Teil Commands. Als nächstes gehts um das dynamsiche laden von XAML. Die passende Klasse ist XAMLReader zu finden im Namenraum System.Windows.Markup. Damit kann aus einem String ein UIElement erstellt werden, das man an den XAML Tree anhängen kann. Der Parser benötigt allerdings den XAML presentation Namensraum im String.

 Private Sub Button1_Click(ByVal sender As System.Object, 
ByVal e As System.Windows.RoutedEventArgs)
Dim s As String =
   "<Button xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" " +
  " Content=""dynamischer Button"" Command=""{StaticResource hCommand}"" 
Height=""37"" HorizontalAlignment=""Left"" " +
  " Margin=""42,107,0,0"" Name=""Button2"" VerticalAlignment=""Top"" Width=""189"" >" +
  "</Button>"
  Dim xaml As UIElement = XamlReader.Load(s)
  LayoutRoot.Children.Add(xaml)
End Sub

Das Problem war bei mir das der XAML Parser von Silverlight zur Laufzeit einen Fehler wirft, weil er hCommand nicht findet. Es scheint ein Problem in der Hierarchie geben, dem ich später auf den Grund gehen werde. Aber ich weis das wenn eine Resource nicht gefunden wird, der Parser in den Ressourcen von APP.XAML nachschlägt. Deshalb also einfach dort deklariert.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:d=http://schemas.microsoft.com/expression/blend/2008
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             x:Class="KoelnSL.App"
             xmlns:local="clr-namespace:KoelnSL">
   <Application.Resources>
   <local:HannesCommand1 x:Key="hCommand1">
</local:HannesCommand1>
   </Application.Resources>
</Application>

Demnächst auch ein echtes MVVM Beispiel mit Binding.

In meiner letzten Silverlight Schulung hat ein Teilnehmer ziemlich pentrant nachgefragt in welcher Reihenfolge Transformationen ausgeführt werden. Ich habe geantwortet gleichzeitig. Damit hatte ich recht und unrecht zugleich.

Seit Silverlight 4 erzeugt Expression Blend Transformationen per Attribute in einem CompositeTransform Element

<Button Content="Button" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="5">
    <Button.RenderTransform>
    	<CompositeTransform TranslateY="-13" Rotation="19.549"/>
    </Button.RenderTransform>
</Button>

Wenn nun mehrere Buttons in einem Stackpanel platziert werden sieht man in Blend zwei Effekte

Die Ursprüngliche Position des Buttons wird hellblau dargestellt. Das liegt daran das das Reendering zunächst durchgeführt wird als ob das UIElement ganz normal vorhanden wäre. Hier eben drei Buttons in einem Stackpanel. Das macht auch sicher Sinn. Wohin sollten die Buttons auch rutschen? Danach wird die Transformation angewandt. In diesem Beispiel eine Drehung und eine Positionsänderung auf der Y Achse.

Vor Silverlight 4 hat Expression Blend (als 3 oder kleiner) eine Transformgroup erzeugt. Diese enthielt dann die Transformationen als Unterelemente. Eine Menge XAML Code und vor allem teuflisch da Animationen die Elemtente per Index angesteuert haben. Ein entferntes Transformation Element hat so ziemlich weit reichende Auswirkungen. Entsprechend ist der Lösungsansatz von Silverlight 4 per CompositeTransform auch wesentlich besser.

Seltsamerweise enthalten die Silverlight 4 Design Vorlagen auch noch immer den alten Weg per Transformgroup

<LinearGradientBrush EndPoint="0,1" MappingMode="Absolute" SpreadMethod="Repeat" StartPoint="20,1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransform X="0"/>
<SkewTransform AngleX="-30"/>
</TransformGroup>                                 

Nun zur zentralen Frage. Spielt die Reihenfolge der Element in der Transformgroup eine Rolle? Die Standardreihenfolge unter Blend war wie folgt. Dies habe ich auch nie in Frage gestellt und verändert.

<TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform/>
    <TranslateTransform/>
</TransformGroup>

Wenn man nun die Reihenfolge von TranslateTransform und RotateTransform wie folgt tauscht, ändert sich in der Tat die Oberfläche, was der Beweis dafür ist, das es eine entscheidende Rolle spielt.

<TransformGroup>
 <TranslateTransform X="200"/>
 <RotateTransform Angle="45"/>
</TransformGroup>

Die Silverlight Listbox wird noch ein Thema für ein eigenes Buch. Wer bei Bing nach Beträgen dazu sucht wird vieles dazu finden. U.a. hier und hier und hier. Ein Kunde meiner Silverlight Schulung hat mich gefragt wie man einen Eintrag einer Listbox der ausgewählt (selected) ist, anders darstellt. Nun habe ich mich geistig auf die Suche nach dem passenden Template gemacht. Das ist ist aber falsch gedacht. Silverlight verwendet für die “aktiven” Parts den Visual State Manager der das Verhalten beeinflusst.

Um an diesem VSM zu gelangen muss man in das generated Item Container Template der Silverlight Listbox.

Dann erhält man umfangreichen XMAL Code. Die wichtigen Stellen habe ich gelb markiert.

<UserControl.Resources>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" 
Storyboard.TargetProperty="Opacity"
 Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" 
Storyboard.TargetProperty="Visibility" 
Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9"
 IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="red" 
IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" Margin="5"
 ContentTemplate="{TemplateBinding ContentTemplate}" 
 Content="{TemplateBinding Content}" 
 HorizontalAlignment="Left" />
<Rectangle x:Name="FocusVisualElement" 
RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1"
 StrokeThickness="5" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

Entsprechend sieht dann meine Liste nicht mehr besonders schön aber aus. Aber ich konnte das selektierte Item verändern und kann sogar die Animation dazu steuern. Und wieder ein Auftrag erfüllt.

Wenn man in Silverlight Projekten Datenklassen erstellt und dann bindet entsteht der Wunsch im Designer schon einen sinnvollen Preview zu haben. Für Expression Blend gibt es die Möglichkeit mit Designtime zu arbeiten. In diesem Silverlight Beispiel will ich aber direkt die DAL pimpen. Dafür muss einfach der Konstrukor herhalten, der für die verschiedenen Fälle unterschiedliche Daten generiert.

Public Class person
    Implements INotifyPropertyChanged
    public Sub New()
    If DesignerProperties.IsInDesignTool Then
        _name = "Hannes Preishuber ist ein Designer"
     Else
      If HtmlPage.IsEnabled Then
                _name = "Hannes Preishuber nuttzt den Webbrowser"
      Else
        _name = "Hannes Preishuber startet die Anwendung OOB"
      End If
  End If
End Sub

Die  Bindung wird voll deklarativ durchgeführt.

<UserControl.Resources>
  <local:person x:Key="personDataSource" d:IsDataSource="True"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" 
DataContext="{Binding Source={StaticResource personDataSource}}">
	<TextBox Height="23" Margin="151,23,12,0"
 TextWrapping="Wrap" Text="{Binding name, Mode=TwoWay}">

In Visual Studio 2010 (cidder)

Im Webbrowser

Out Of Browser (OOB)

Diesesmal hat mein Silverlight Schulungsteilnehmer (Stephan) mir eine cooles Silverlight Sample gezeigt. Während der Schulung war wieder mal die Listbox ein Thema (darüber könnte ich schon ein Buch schreiben. Es sollte eine Liste mit Namen angezeigt werden und dabei das Itemtemplate verändert werden. Das geht eigentlich ganz einfach entweder mit Expression Blend oder direkt im XAML Code ala

<ListBox.ItemTemplate>
     <DataTemplate>
	<Border Margin="5" BorderBrush="#FF340CF9" CornerRadius="5"  Height="32">
	<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
 		</Border.Background>
	<TextBlock Text="{Binding}" Foreground="#FFF9F5F5" FontWeight="Bold" Margin="4,2"/>
      	</Border>
    </DataTemplate>
</ListBox.ItemTemplate>

Das ganze sieht allerdings mehr nach Balkengrafik aus. Der Wunsch ist das alle Listboxitems gleich breit sein sollen. Eigentlich ganz einfach. Die Width der Broder gesetzt und… Aber es soll genau so breit sein wie die Listbox.

Das geht indem man das HorizontalContentAlignment auf Stretch setzt. Da kommt man leider gar nicht so leicht ran. Entweder man nimmt Expression Blend und zerlegt die Listbox in sein Template. Contextmenü – Edit Template-Edit a copy.- und erhält 300 Zeilen XAML Code

Oder man nimmt die relevante Setter Stelle einfach raus und setzt sie sozusagen auf dem kurzen Dienstweg im ItemContainerstyle der Silverlight Listbox

<ListBox Margin="96,26,129,54" x:Name="listbox1"  >
  <ListBox.ItemContainerStyle>
     <Style TargetType="ListBoxItem" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
     </Style>
  </ListBox.ItemContainerStyle>

Perfektes Ergebnis im Browser

Aktuell habe ich in meiner Silverlight Schulung einen Teilnehmer, der wirklich interessante Fragen aufwirft, deren Antwort ich dann im Nachgang suche und hier in meinem Blog poste. Schließlich sind nur glückliche Silverlight Kurs Teilnehmer auch gute Teilnehmer. In diesem Silverlight 4 Beispiel soll ein Bild beschnitten werden. Das geht auch ganz einfach mit dem Clipping Path Attribut.

Mit Expression Blend nimmt man ein Bild, legt darüber eine Kurve (z.B. Kreis) und markiert beide. Dann wird im Context Menü Path- Make Clipping Path ausgewählt.

Im XAML sieht das wie folgt  aus und man sieht nur mehr den Hintern der hübschen Person vom Foto .

<Image Margin="30,41,-140,-124" Source="/maus[1].jpg" Stretch="Fill" 
Clip="M470.5,351.5 C470.5,387.3985 425.05692,416.5 369,416.5 C312.94308,416.5 
267.5,387.3985 267.5,351.5 C267.5,315.6015 312.94308,286.5 369,286.5 
C425.05692,286.5 470.5,315.6015 470.5,351.5 z"/>
	

Leider lässt sich das so nicht mehr animieren. Viele Attribute eines UIElements lassen sich durch ein Unterelement aufsplitten. So auch das Clip Attribut zu Image.Clip. Der Pfad wird dann mit Geometry Elementen beschrieben. In unserem Beispiel eben eine Ellipse.

<Image x:Name="image" Source="/maus[1].jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" >
  <Image.Clip>
    <EllipseGeometry RadiusX="50" RadiusY="50" Center="100,100">
    </EllipseGeometry> 		
  </Image.Clip>
</Image>

• EllipseGeometry
• GeometryGroup
• LineGeometry
• PathGeometry
• RectangleGeometry

Jetzt bleibt nur mehr das Problem der Animation. Leider gibt es keine Unterstützung durch Expression Blend oder schon gar nicht Visual Studio 2010. Also ran per Hand. Da ich eine Punkt verschieben möchte ist die PointAnimation das passende. Recht Tricky ist die Adressierung des Center Propertys über die XAML Hierarchie.

<Storyboard x:Name="Storyboard1">
<PointAnimation BeginTime="0" Duration="0:0:01" From="0,0" To="200,200"
 Storyboard.TargetName="image" 
 Storyboard.TargetProperty="(UIElement.Clip).(EllipseGeometry.Center)">
</PointAnimation></Storyboard>	

Gestartet wird die Animation per Expression Blend behavior. Am Ende eine Null Code Lösung.

<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>

Funktioniert. Ich bin wieder mal begeistert.

In meiner aktuellen Silverlight Schulung haben wir ein wenig auf Performance geschaut. Ein Ladevorgang einer sehr langen Liste dauert etwas länger und während dieser Zeit soll der eine Wartemeldung angezeigt werden. Im Silverlight Toolkit befindet sich auch passend ein entsprechendes Control der BusyIndicator.

Dieser lässt sich auch in sein Template zerlegen und optisch anpassen. Während der Busyindicator läuft kann der User keine UI Elemente nutzen und so z.B. einen Button eben nicht zwei mal drücken.

Die entscheidende Frage ist, wie zeige ich den BusyIndicator nun an. Zunächst hat dieser eine Boolsche Eigenschaft IsBusys die man setzen kann. Manchmal läuft die Logik aber in einer Komponente dahinter von der man keinen Zugriff aufs UI hat.  In meinem Fall eben eine Liste die von ObservableCollection erbt. Diese Liste wird zur Laufzeit durch einen länger laufenden Download gefüllt, zur Design Zeit mit Dummy Daten.  Diese Entscheidung wird duchr HTMLPagel.Isenabled getroffen. Die Observeable Collection muss ich nehmen damit das gebundene UI Element ( z.B. Datagrid oder Listbox) automatisch und asynchron die Daten auch anzeigen sobald sie fertig geladen sind. Zusätzlich verpasse ich der personen Liste ein Property isBusy. Dieses wird gesetzt wenn der Download startet. In der OpenreadCompleted Methode wird dann der Wert wieder auf false gesetzt.

Public Class personen
    Inherits ObservableCollection(Of person)
    Public Sub New()
        If HtmlPage.IsEnabled Then
            Dim wc As New WebClient
            AddHandler wc.OpenReadCompleted, AddressOf fertig
            IsBusy = True
            wc.OpenReadAsync(New Uri("namen.txt", UriKind.Relative))
        Else
            Add(New person With {.alter = 27, .Firma = "ppedv ag", .Name = "Hannes"})
            Add(New person With {.alter = 32, .Firma = "ppedv ag", .Name = "Andreas"})
            Add(New person With {.alter = 23, .Firma = "ppedv ag", .Name = "Bernhard"})
            Add(New person With {.alter = 45, .Firma = "ppedv ag", .Name = "Stefan"})
            Add(New person With {.alter = 12, .Firma = "ppedv ag", .Name = "Arnold"})
        End If
    End Sub

    Private _IsBusy As Boolean
    Public Property IsBusy() As Boolean
        Get
            Return _IsBusy
        End Get
        Set(ByVal value As Boolean)
            _IsBusy = value
            OnPropertyChanged(New PropertyChangedEventArgs("IsBusy"))
        End Set
    End Property

Im XAML wird dann der BusyIndicator an die IsBusy Eigenschaft gebunden. Dies ist auch der Grund für die onpropertyChanged Codezeile im vorigen Beispiel. Damit kann das UI Änderung der Daten im Personen Object “abbonieren”. Damit wird die Anzeige eben sofort erneuert.

<toolkit:BusyIndicator Height="100" HorizontalAlignment="Left"  Name="BusyIndicator1" 
   IsBusy="{Binding IsBusy}" 
   VerticalAlignment="Top" Width="150" >
</toolkit:BusyIndicator>
   

Letztes mal habe ich kurz beschrieben was man mit einer Listbox und Templating in Silverlight so machen kann. Wenn man allerdings keine Auswahl Möglichkeit braucht, kann man auch das schlankere Itemscontrol (übrigens erbt Listbox davon) verwendet werden.

Die Daten werden als Liste in einer Klasse erzeugt.

Public Class personen
    Inherits List(Of person)
    Public Sub New()
        Add(New person With {.alter = 27, .Firma = "ppedv ag", .Name = "Hannes"})
        Add(New person With {.alter = 32, .Firma = "ppedv ag", .Name = "Andreas"})
        Add(New person With {.alter = 23, .Firma = "ppedv ag", .Name = "Bernhard"})
        Add(New person With {.alter = 45, .Firma = "ppedv ag", .Name = "Stefan"})
        Add(New person With {.alter = 12, .Firma = "ppedv ag", .Name = "Arnold"})
    End Sub
End Class

Diese Daten werden deklarativ instanziert und gebunden. Nicht weil es nötig wäre, sondern schlicht weil es möglich ist. Das folgende passiert dann auch in der XAML Datei

...   xmlns:local="clr-namespace:KoelnSL">
<UserControl.Resources>
    <local:personen x:Key="personen"></local:personen>
</UserControl.Resources>

Ein positver Nebeneffekt ist, das die Bindung auch in Blend und Visual Studio 2010 zur Entwurfszeit voll sichtbar ist.

Im XAML werden dann die drei Templates definiert

<ItemsControl Width="100" 
ItemsSource="{Binding Source={StaticResource personen}}">
  <ItemsControl.Template>
      <ControlTemplate TargetType="ItemsControl">
        <Border BorderBrush="BlueViolet" BorderThickness="1" CornerRadius="10">
           <ItemsPresenter/>
        </Border>
      </ControlTemplate>
   </ItemsControl.Template>
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
           <StackPanel Orientation="Vertical" Background="SkyBlue" Margin="5"/>
        </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
   <ItemsControl.ItemTemplate>
     <DataTemplate>
       <TextBlock Text="{Binding Name}" Height="20" Width="50" Margin="4">
</TextBlock>
     </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

Oder wie der Brite auch sagen würde “Cannot get IIS pickup directory”. Beim senden von EMails aus ASP.NET per SMTP Service kann ich immer nur raten, nicht die Network Methode zu wählen, sondern direkt ins Pickup Directory des IIS zu schreiben. Das geht schneller und ist ausfallsicher falls der SMTP Server mal nicht erreichbar ist. Ein typischer Anwendungsfall von asynchroner Architektur. Nun ist der SMTP Server beim IIS 7 (und 7.5) noch immer der alte aus dem IIS 6. Wenn man also WIndows Server 2008 oder 2008 R2 hat muss man den SMTP Server extra verwalten mit der alten MMC Console. Das heist die Metabase ist nach wie vor im Spiel und nicht die neuen Config Dateien. Übrigens war Microsoft auf so nett den POP3 Server rauszunehmen. Worauf mein Kollege Cosmin den kostenfreien VIsendo SMTP Extender programmiert hat.

Beim IIS7 7.5 wird per default der Benutzer ApplicationPoolIdentity verwendet um die Web Anwendung zu betreiben. Dieser Benutzer hat stark limiterte Rechte.

Ebenso fehlt wohl das Zugriffsrecht (ACL) auf die Einträge aus dem SMTP Bereich in der Metabase.

Wenn nun beim versenden einer Mail die Meldung kommt “IIS-Pickup-Verzeichnis kann nicht abgerufen werden” dann helfen folgende Lösungsansätze

1) In der Web.config den Namen des  Pickupdirectorys manuell setzen

http://blogs.ppedv.de/hannesp/archive/Mail-Sender-Klartextnamen-in-web.config-setzen

2) Man kann dem Beutzer auch die Rechte geben. Dazu sollte man den Metabase Editor verwenden. Dieser ist im IIS6 Resource Kit enthalten. Per Rechtsclick auf den Knoten im Tree (hier 1) kann man dann die benötigten Rechte setzen.

Auf jedem guten TV Sender gibt es eine Wetter Fee. Diese meist sehr attraktive Person  choreographiert vor einer blauen oder heute meist grünen Wand. Die Clouds oder Sonnen werden Computer animiert eingespielt.

Dazu brauchen wir eine Wetterfee, eine Kamera, ein Aufnahmestudio, Expression Blend 4 und .. die Möglichkeit in einem  Video eine Farbe auf transparent zu schalten. Die Wetterfee ist meine entzückende Kollegin Lilly. Die Kamera eine Smartflip ( jetzt Cisco). Das Aufnahmestudio eines Fotografen der im gleichen Haus sitzt und eine grüne Rollwand besitzt. Diese rollt man ein Stück über den Boden so das auch keine Kanten sichtbar sind. Dann das ganze nach Expression Blend importiert und per Drag& Drop auf eine Seite ziehen.

Warum Lilly hier so seltsame Handbewegungen macht? Ich wollte später eine per Silverlight Animation eine Sonne durchs Bild schieben. Was man hier gut sehen kann ist, das der Hintergrund nicht homogen ist. Das ist mir bei unserem 30 Sekunden Shot nicht aufgefallen. Es liegt daran das Fotografen in der Regel einen Spot auf den Hintergrund legen um das Foto aufzulockern. Hier müsste der Spot abgeschalten werden. Dazu aber gleich mehr.

Seit Silverlight 3 gibt es Pixelshader. Diese helfen Bilder direkt in der Grafikkarte performant zu verändern( Wenn GPU Acceleration aktiviert ist). Per Standard ist Schatten und Unschärfe vorhanden. In Blend 4 noch ein wenig mehr Shader. Wir brauchen aber einen Pixelshader der aus Grün Transparent macht.

Dies nennt man fachspezfisch den ChromaKey fürs Alpha Blending. Entsprechend auch der Name ChromaKeyAlphaEffect. Der Download für die installierbare MSI findet sich hier

http://code.msdn.microsoft.com/SL3ChromaKeyEffect/Release/ProjectReleases.aspx?ReleaseId=3900

Leider ist der aktuelle Build 1.3 vom 9.Februar.2010 noch SL 3. Entsprechend ist Blend 4 und Visual Studio 2010 ein wenig mit der Aufgabe überfordert und man benötigt etwas Handarbeit. Zunächst setzt man eine Referenz im Silverlight Projekt auf Synergist.Effects.dll. Dann kann man in Expression Blend im Reiter Assets den Chroma Key Alpha Effect auf das Video ziehen.

Im Property Dialog sollte dann entweder direkt in den Eigenschaften des ChromaAlphaEffect (siehe Bild) oder in den Eigenschaften des Videos im Effect Reiter die Farbe ausgewählt werden können.

Am besten geht das mit dem Color Picker des üblichen Farbdialoges. Leider tritt hier der erste Bug zu Tage. Das zusätzliche Property Tolerance wird nicht angeboten. Damit kann man den Grünbereich etwas aufweiten. Mögliche Werte sind 0-1. Ganz gut trifft oft rund um 0,2.

Aktuell sieht dann Lilly so aus.

Wenn man im XAML Source dann Tolerance setzt,

<MediaElement   x:Name="lilly1_wmv" Source="lilly1.wmv" 
Stretch="Fill" AutoPlay="True" 
MediaEnded="lilly1_wmv_MediaEnded" >
<MediaElement.Effect>
	<Synergist_Effects:ChromaKeyAlphaEffect 
       Tolerance="0.2"
	ColorKey="#FF9DE094"/>
    	</MediaElement.Effect>
</MediaElement

siehts in Blend so aus.

In Visual Studio 2010 ist es im Ergebnis das gleiche. Allerdings lauffähig ist das ganze schon. Also ab  in den Browser und staunen.

Noch nicht perfekt und ich habe deswegen auf die Animation verzichtet aber ich glaube wir machen noch einen zweiten Dreh mit besseren Hintergrund.

In den nächsten Blog Einträgen werde ich meine Gedanken zum Thema Services mit Silverlight zu ordnen beginnen. Es gibt einfach zu viele Wege um Daten mit der Client Server Technologie Silverlight hin und her zu schicken. Leider sind die recht einfachen ASMX Web Services obsolet und in  WCF aufgegangen. Der größte Unterschied ist das man WCF (Windows Communication Foundation) Dienste nicht mal so spaßeshalber im Browser aufrufen kann. Ergänzend der Hinweis auf das Blog meines Kollegen Bernhard, der ein wahres WCF Genie ist.

Zunächst einmal die Vorarbeit mit einer Datenklasse.

Imports System.Runtime.Serialization

<DataContract()>
Public Class person

    Private _FamName As String
    <DataMember()>
    Public Property FamName() As String
        Get
            Return _FamName
        End Get
        Set(ByVal value As String)
            _FamName = value
        End Set
    End Property

    Private _GebDat As Date
    <DataMember()>
    Public Property GebDat() As Date
        Get
            Return _GebDat
        End Get
        Set(ByVal value As Date)
            _GebDat = value
        End Set
    End Property

    Private _bild As String
    <DataMember()>
    Public Property bild() As String
        Get
            Return _bild
        End Get
        Set(ByVal value As String)
            _bild = value
        End Set
    End Property
End Class

Wenn DataMember nicht dekoriert wird, gibt es später beim aufrufen des Services einen deserialisierungsfehler in der Form InnerException: System.Runtime.Serialization.SerializationException. Das sind eben WCF Basics. Dann erstelle ich eine Business Objekt das mir eine Liste von Personen zurück gibt.

Public Class BO1
    Public Function getPersonen() As List(Of person)
        Dim lofP As New List(Of person)
        lofP.Add(New person With {.bild = "bild1.jpg", .FamName = "Maier", .GebDat = New Date(("01.13.1978"))})
        lofP.Add(New person With {.bild = "bild2.jpg", .FamName = "Huber", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild3.jpg", .FamName = "Müller", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild4.jpg", .FamName = "Gates", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild5.jpg", .FamName = "Heuer", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild6.jpg", .FamName = "Holesch", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild7.jpg", .FamName = "dela Rosa", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild8.jpg", .FamName = "Jobs", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild9.jpg", .FamName = "Hayat", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild10.jpg", .FamName = "Hatahet", .GebDat = New Date("01.13.1978")})
        lofP.Add(New person With {.bild = "bild11.jpg", .FamName = "Thyret", .GebDat = New Date("01.13.1978")})
        Return lofP

    End Function
End Class

Ein WCF Service wird im Silverlight Projekt per Template Silverlight-Enabled-WCF-Service erstellt. Dieser Service ruft dann die Funktion auf, die die Personenliste erstellt. Per Dafult findet sich da immer die DoWork Prozedur.

    <OperationContract()>
    Public Function GetAllPersons() As List(Of person)
        Dim bo As New BO1
        Return bo.getPersonen()
    End Function

Der Service ist im Browser aufrufbar. Mit dem Parameter WSDL erscheint auch die Beschreibung der Funktion und Objekte. Diese wird von Werkzeugen verwendet um Proxy Klassen erzeugen zu können. Das sollten Sie für einen ersten Test auf alle Fälle tun.

Dann wechseln wir in das Silverlight Projekt und erstellen eine Service Referenz im Projekt Baum per Context Menü Add Service.

In der Silverlight Anwendung wird dann eine Instanz der Proxy Klasse erzeugt, eine Rücksprung Methode definiert und der Service aufgerufen. Vergessen Sie nicht, das Silverlight nur Asynchron arbeitet und deswegen nicht auf eine Rückgabe wartet.  Die eigentliche Liste von Personen wird dann per e.Result in der Rücksprung Methode ausgelesen und einem Datagrid zugewiesen. Hier passiert eine wenig VB casting magic. Sie sollten wissen das  der Visual Studio Proxy Wizard immer aus Listen einen Typ ObservableCollection erzeugt. ich habe bereits hierzu ein paar Worte verloren, das das auch anders geht.

Private Sub WCF1_Loaded(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim svc As New ServiceReference1.Service1Client
        AddHandler svc.GetAllPersonsCompleted, AddressOf fertig

        svc.GetAllPersonsAsync()
End Sub

Private Sub fertig(ByVal sender As Object, 
ByVal e As ServiceReference1.GetAllPersonsCompletedEventArgs)
  SVC1.ServiceReference1.person)

        DataGrid1.ItemsSource = e.Result
End Sub

Mit Hilfe des Silverlight RIA Services Toolkit lassen sich zusätzliche Optionen der RIA Services nutzen.

 <domainServices>
      <endpoints>
        <add name="OData"
             type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, 
System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" />
           <add name="JSON"
                type="Microsoft.ServiceModel.DomainServices.Hosting.JsonEndpointFactory, 
Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" />
           <add name="Soap"
             type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, 
Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" />
 </endpoints>
</domainServices>

Leider kompiliert meine Lösung anschliessend nicht mehr. Selbst auf Nachfrage bei Microsoft konnte man adhoc das Problem nicht lösen. Die einzige Antwort das es aktuellere Bits der RIA Services und Silverlight (GDR) gibt hilft nicht, da ich dafür alles neu installieren muss und dann mit RC Bits arbeite die nirgendwo laufen. Entsprechend werde ich die Lösung für SOAP in einem späteren Blog nachliefern.

Die Headline stimmt nur bedingt, aber schliesslich muss ich meinen Artikel ja verkaufen . Am Ende ist es aber auch nicht ganz falsch. Wenn ein Silverlight Projekt mit RIA Services besteht, ist Master Detail tatsächlich nur 1 Codezeile und 2 clicks entfernt.

Zunächst einmal nehme ich die gute alte Nordwind Datenbank und die Tabellen Orders und OrderDetails als Ausgangspunkt und erstelle im Web Projekt mit Entity Framework ein Modell.

Weiter geht es mit einer neuen Domain Service Klasse. Wie immer vorher kompilieren nicht vergessen und die Metadaten erzeugen lassen.

In der DomainService Klasse erzeuge ich per copy paste eine weitere Queryklasse. Per Standard findet sich nur die GetOrders. Da ich ja noch die Details mit liefern möchte nenne ich die Funktion GetOrdersDetails. Wichtig ist per LINQ Query und dem Kommando Include die Kind Tabelle Order_Details einzubinden. Mit dem Attribut <Query> stelle ich sicher das später im Data Designer die Query auch auftaucht.

 <Query()> _
    Public Function GetOrdersDetails() As IQueryable(Of Orders)
        Return Me.ObjectContext.Orders.Include("Order_Details")
    End Function

Dann muss in den Metadaten (xxx.metadata.vb) noch der Schlüssel Property markiert werden. Dazu wird <Include()> vor den bereits vorhandenen Propertynamen vorgestellt.

    <Include()>
        Public Property Order_Details As EntityCollection(Of Order_Details)

Das fertige Ergebnis nach 9,67 Sekunden im Browser

Ich habe mir einen Wunschtraum erfüllt. Eine österreische Ampel als mini App. Da Windows Phone noch kein Silverlight unterstützt, vorerst nur als Desktop Anwendung

Was macht nun eine österreichische Ampel so einmalig. Sie blinkt 3 mal Grün bevor sie auf gelb schaltet! Diese Ampel kann uns nun den Arbeitsalltag versüssen, gibt uns klare Richtlinien vor. Sinnlosses Starren auf den  Fortschrittsbalken ist nun endgültig vorbei. Jetzt kommt sinnloses Starren auf die Ampel. Ich bitte um Überweisung von 3,99 € pro Download. Reklamation und Rückgabe ausgeschlossen.

Zunächst einmal das technsiche Konzept. Ich implementiere die Ampel als Usercontrol und nutze den Visual Statemanager um die Statusinformation Rot, Gelb und Grün mit Animationen hinterlegen zu können.

Startpunkt ist das UI Design mit Blend. Es beginnt relativ harmlos mit einer Border, Farbverlauf und wie immer runden Ecken.

Dann widme ich mich der ersten Lampe. Ein Kreis mit etwas dickerem Rand (Strockethickness 10) und zwei gegenläufige Farbverläufe im Graubereich erzeugen einen 3D Eindruck.

Da rein kommt dann nochmal ein kleinerer Kreis, der ein wenig Abstand zum äusseren Rahmen hat auf den ersten Kreis. So das man den Hintergrund am Rand noch ein wenig sehen kann. Dieser Kreis wird rot gefärbt und bekommt einen im Zentrum leicht versetzten runden Farbverlauf. Das GradientBrushtool ( dicker Pfeil) aus der linken Toolleiste hilft dabei ungemein.

Um die die Wölbung perfekt zu machen, wird Lichteinfall von oben simuliert. Dazu wird ein weiße, sehr transparente Elypse, darüber gelegt. Das gleiche machen Comic Zeichner z.B. mit den großen Heidi Augen um diese wässrig aussehen zu lassen. Ich verwende hier 30% alpha blending und versüse das mit einem Effekt um ein unscharfe Kontur zu haben.

Dann werden die Ui Element in ein Canvas gepackt, kopiert und umgefärbt.

Weiter gehts mit dem Visual State Manager. Dort erzeuge ich eine Gruppe mit dem Namen Phasen und darin die drei States: rot, gelb und gruen. Dann kann jeder in jedem State und Übergang  das UI animiert werden. Im wesentlichen werden die beiden anderen Kreise einfach schwarz gefärbt mit einem Delay von 0,2 Sekunden. Schliesslich leuchtet so eine antike Glühbirne ja nach. LED Ampeln gibts in Österreich noch nicht. Für die Phase Grün auf Gelb habe ich einen speziellen Übergang definiert. Diese Animation läuft drei Sekunden und wechselt dabei von abwechselnd drei mal von Grün nach Schwarz den SolidcolorBrush im Fill Attribut.

Als nächstes wird das Usercontrol in eine weitere XAML Seite eingepackt. Dort gehts dann nur mehr mit puren Code zur Sache. Ein Timer wirft die Statusänderungen an. Da die Ampelphasen ja unterschiedlich lang sind, brauch ich ein wenig Logik um die Timer Zeiten zu ändern.  Da die Grün Blink Phase 3 Sekunden dauert muss die Gelb Phase 5 Sekunden sein um in Summe 2 Sekunden Gelb zu sehen. Ich denke der Code spricht auch ohne refactoring für sich selbst

Dim dp As New DispatcherTimer
Dim status As Integer = 0
private Sub page35_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
   dp.Interval = New TimeSpan(0, 0, 10)
   AddHandler dp.Tick, AddressOf ticking
   VisualStateManager.GoToState(Ampel1, "rot", True)
   status = 1
   dp.Start()
End Sub
Private Sub ticking(ByVal sender As Object, ByVal e As EventArgs)
   Select Case status
    Case 0
      VisualStateManager.GoToState(Ampel1, "rot", True)
      dp.Interval = New TimeSpan(0, 0, 10)
      status = 1
    Case 1
      VisualStateManager.GoToState(Ampel1, "gelb", True)
      dp.Interval = New TimeSpan(0, 0, 2)
      status = 2
    Case 2
      VisualStateManager.GoToState(Ampel1, "gruen", True)
      dp.Interval = New TimeSpan(0, 0, 10)
      status = 3
    Case 3
      VisualStateManager.GoToState(Ampel1, "gelb", True)
      dp.Interval = New TimeSpan(0, 0, 5)
      status = 0
   End Select
End Sub

Jetzt habe ich nur mehr das Problem, wie komme ich an Ihr Geld. Bzw wie können Sie ganz einfach die Anwendung starten?

Dazu rufen Sie einfach folgende Website auf. Per rechtsclick können Sie diese auch lokal installieren.

In meiner aktuellen Silverlight Schulung wurde heute das Thema Mouse Events besprochen. Seit Silverlight 4 gibt es ja bekannterweise auch Events zur rechten Maustaste.  Also sollte theoretisch auch eine Textbox per Rechstclick ein Context Menü anzeigen können. Die Idee des Schulungs Teilnehmers sah ungefähr so aus.

<TextBox Height="111"  MouseRightButtonUp="textBox1_MouseRightButtonUp"  Name="textBox1" Width="180" />

Allerdings funktioniert das nicht, weil die Textbox das Event als behandelt markiert und damit nicht mehr weiter reicht. Um ein Context Menü zu erstellen gibt es aber seit Silverligth 4 im seperat erhältlichen Toolkit eine passende Lösung. Mit dem ContectMenuService wird ala Tooltip die Textbox um zusätzliche Funktion erweitert.

Das Context Menü funktioniert genauso wie in WPF. Es besteht aus Menuitems. Pro Menüpunkt ein Item. Dieses wiederum aus einem Header, der üblicherweise den Menütext darstellt. Optisch aufgepeppt wird über ein Unterelement MenuItem.Icon per Image Element. Das Attribut Icon im MenuItem Element kann dafür nicht genutzt werden. Für den Trennstrich gibt es das Seperator Element.

<TextBox Height="30"  HorizontalAlignment="Left" Margin="161,36,0,0" 
Name="textBox1" VerticalAlignment="Top" Width="180" >
  <toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
         <toolkit:MenuItem
          Header="Hyperlink"
          Click="MenuItem1_Click">
          <toolkit:MenuItem.Icon>
          <Image Source="Images/link.png"></Image>
          </toolkit:MenuItem.Icon>
    </toolkit:MenuItem>
    <toolkit:Separator />
    <toolkit:MenuItem Header="drucken"
        Click="MenuItem2_Click">
          <toolkit:MenuItem.Icon>
          <Image Source="Images/print.png"></Image>
          </toolkit:MenuItem.Icon>
     </toolkit:MenuItem>
     <toolkit:MenuItem Header="speichern"
          Click="MenuItem3_Click" IsEnabled="True">
          <toolkit:MenuItem.Icon>
          <Image Source="Images/save.png"></Image>
          </toolkit:MenuItem.Icon>
     </toolkit:MenuItem>
  </toolkit:ContextMenu>
 </toolkit:ContextMenuService.ContextMenu>
</TextBox>

In diesem Beispiel werden einzelne Events pro Menüpunkt deklariert. Denkbar ist auch per Commands zu arbeiten. Dann wird das Attribut Command bzw CommandParameter verwendet.