Ein Silverlight Datagrid kann im Column Template auch andere Controls enthalten, wie z.B. einen Button. Wie kann man aber erkennen welcher Button geclickt wurde. Dieser Artikel zeigt zwei Möglichkeiten. Die Daten kommen aus ado.net data Service und einem entity datamodel. Wie das funktioniert ist nicht Bestandteil dieses Blog Posts. Als Datenbank dient Northwind und als Tabelle Customer. Bei Click auf den Button kommt eine Messagebox hoch und zeigt Infos über die Row an. Zunächst der XAML Code indem der Button definiert wird. <Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid x:Name="DataGrid1" >
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Width="100">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="{Binding CustomerID}" Click="Button_Click" Tag="{Binding CustomerID}"></Button>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Mit Hilfe des Tag Attributes werden ID Daten an den Button gebunden
Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
MessageBox.Show(CType(e.OriginalSource, Button).Tag)
End Sub
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Wem das zu einfach ist kann auch die Reihe auslesen indem man den Datacontext des Buttons mit der Liste vergleicht. Der folgende Code gibt dann die Reihe als Nummer aus die geclickt wurde
Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim datenliste As List(Of ServiceReference1.Customers)
datenliste = DataGrid1.ItemsSource 'automatischer cast
Dim datenButton As Object = CType(e.OriginalSource, Button).DataContext()
MessageBox.Show(datenliste.IndexOf(datenButton))
End Sub
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Gerade im Forum drüber gestolpert. Es behauptet jemand es existiert keine Message Box in Silverlight. Dabei gibt es sogar drei! Möglichkeiten etwas hochpoopen zu lassen. Die Silverbox Aus dem .NET Code heraus kann mit MessageBox.Show ein Popup Dialog gestartet werden MessageBox.Show("Hallo Welt", "Hallo", MessageBoxButton.OKCancel)
Die HMTLBox
Auch der Browser kann per Jscript eine Box öffnen. Dazu gibt es die Methode Alert oder Confirm. Dies lässt sich auch aus .NET Code aufrufen. Zuerst muss allerdings der Namensraum System.Windows.Browser eingebunden werden.
HtmlPage.Window.Alert("Hello World")
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Popup Control(Box)
Mit einer Zeile .NET Code lässt sich ein Popup öffnen
Popup1.IsOpen = true
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }Halt da fehlt noch was! Der XAML Code!
<Popup x:Name="Popup1" Width="100" Height="60" HorizontalOffset="-50" VerticalOffset="80" >
<Border Background="SkyBlue" Width="100" Height="60" BorderThickness="1"
BorderBrush="Gray" CornerRadius="5">
<TextBlock Text="Hello Welt"></TextBlock>
</Border>
</Popup>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }Und so siehts dann aus.
Linien können in WPF und Silverlight gestreift dargestellt werden. Linien können vorkommen in Line Path Rectangle Ellipse Polyline Polygon Mit einem Strokearray kann die Linie unterbrochen werden. Es wird angegeben die Läge des Striches und des Abstandes. <Line Height="10" Stroke="#FFF0150C"
StrokeDashArray="4 2"
StrokeThickness="5"
Wie der Name Array vermuten lässt geht aber noch mehr. Mit weiteren Sequenzen können Muster im Strich erzeugt werden, der schon fast an Morse Code erinnert.
StrokeDashArray="4 2,1 2"
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Aktuell sind die Striche eigentlich kleine Rechtecke. Aber auch das kann man ändern. Auch rund (Roud) oder dreieckig (Triangle) sind möglich per StrokeDashCap Attribut.
<Line Height="30" Stroke="#FFF0150C"
StrokeDashArray=".5 1"
StrokeThickness="20"
StrokeDashCap="Triangle"
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Das ganze kann man verwenden um außergewöhnliche Ergebnisse zu erziehlen. Was könnte folgendes wohl zeichen?
<Ellipse Fill="Yellow" Height="200" Width="200" Stroke="Black"
StrokeThickness="70" StrokeDashArray="1"></Ellipse>
<Ellipse Fill="Black" Height="50" Width="50"></Ellipse>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Der folgende Screenshot ist aus Expression Blend
Was bei ASP.NET sehr einfach war, ist bei Silverlight mit großen Mühen verbunden. Zwar unterstützt das Silverlight Datagrid eine Mehrfachauswahl per Attribut, aber die Listbox nicht. Ich zeige im folgenden Beispiel wie man mit Checkboxen dem Benutzer die Auswahl erlauben kann. Anschliessend sollen diese Checkboxen durchlaufen werden. Hört sich einfach an, ist es aber nicht, da der Inhalt des Datatemplates nicht angesprochen werden kann. Auch Tricks per Findname oder x:Namer funtkionieren nicht. Eine unschöne Möglichkeit ist, mit Hilfe des visualtreehelpers komplett die Seite zu durchlaufen. Das ist sehr unhandlich da eine checkbox schon mindestens aus zwei Controls besteht, einem Textblock und einem Rectangle. Meine Lösung verwendet zwei-Wege Datenbindung. Zuerst kommt der mühsame Teil eine Klasse zu schreiben. Diese muss für die Checkbox ein zusätzliches Property aufweisen und das Interface für die Zwei Wege Bindung implementieren. Imports System.ComponentModel
Imports System.Collections.ObjectModel
Public Class Listboxdaten
Implements INotifyPropertyChanged
Private _checked As Boolean
Public Property checked() As Boolean
Get
Return _checked
End Get
Set(ByVal value As Boolean)
_checked = value
OnPropertyChanged("checked")
End Set
End Property
Private _daten As String
Public Property daten() As String
Get
Return _daten
End Get
Set(ByVal value As String)
_daten = value
OnPropertyChanged("daten")
End Set
End Property
Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(ByVal name As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(name))
End Sub
End Class
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Dann noch XAML und die zwei Wege Datenbindung in der Checkbox. Mit der Binding Syntax müssten Sie sich auskennen.
<ListBox x:Name="lstFields" SelectionChanged="lstFields_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" x:Name="stack1">
<CheckBox x:Name="chkFields" IsChecked="{Binding checked, Mode=TwoWay}"></CheckBox>
<TextBlock Text="{Binding daten}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="Button1" Width="30" Height="20" Click="Button1_Click"></Button>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Im Loaded Event werden dann die Einträge in der Listbox vom passenden Typ erzeugt
Private Sub page17_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
lstFields.Items.Add(New Listboxdaten With {.checked = True, .daten = "eins"})
lstFields.Items.Add(New Listboxdaten With {.checked = True, .daten = "zwei"})
lstFields.Items.Add(New Listboxdaten With {.checked = True, .daten = "drei"})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Im Button Click Handler kann dann auf das ListboxItem zugegriffen werden und nach einem Typ Cast die checked Eigenschaft gelesen werden.
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
For Each i In lstFields.Items
If CType(i, Listboxdaten).checked Then
MessageBox.Show("checked")
End If
Next
End Sub
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Natürlich gibts auch andere Lösungen zb mit einer ObservableCollection. Aber einfacher geht es meiner Ansicht nach nicht mehr.
Beim umstellen einer ASPX Seite auf AJAX bin ich über ein kleines aber feines Detail gestolpert. In der Seite war ein kleines Jscript <script type="jscript">
function pageLoad() {
…. }
</script>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Nach einfügen des AJAX Scriptmanagers wurde dieses Script wie von Zauberhand aufgerufen. Das ist mir leider natürlich nicht sofort aufgefallen, so das es etwas überraschende Ergebnisse gab.
Nach Recherche folgendes Ergebnis. Wenn per
window.onload = myPageLoad;
eine Funktion definiert wird, wird diese zuerst aufgerufen. Dann werden alle HTMl Elemente wie eingebette Bilder geladen. Als letztes wird dann noch automatisch pageLoad() aufgerufen.
Beschrieben ist das hier.
Mit XAML kann man recht einfach Controls auf seine Web oder Windows Anwendung zaubern. Der Unterschied zu klassischen Winforms Anwendungen ist das dank Templating das Erscheinungsbild weitestgehend verändert werden kann. Ich will das einmal anhand des Sliders zeigen. Mit wenig XAML Code <Slider Width="200"></Slider>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
erzeugt man einen netten Schieberegler
Man beachte den “Schieber”. Dieser ist grau oder silber und hat einen Farbverlauf. Wenn man nun die Eigenschaft “background” auf Red setzt würde man erwarten, das dann zumindest irgendwas Rot wird. Höchstens der Kopf des Entwicklers aus lauter Ärger über… lassen wir das.
Der Grund dafür ist das, ein Slider eigentlich ein Control ist das aus anderen Controls zusammengesetzt ist. Und das kann man wieder rückgängig machen. Am besten mit Expression Blend 2.0 Sp1.
Wenn man das macht entsteht eine Menge XAML Code. Dieser behinhaltet ein Template für die horizontale und vertikale Darstellung des Sliders.
Unser Ziel der Begierde ist das HorizontalThumb Element, das man nun auch in der Tat rot färben kann. Dazu wählt man dieses in Blend aus, so das es grau markiert ist und setzt dann die Background Farbe auf Rot. Aber das Ergbebnis ist nicht so richtig rot
Ein roter Verlauf ziert nun unseren Silder Thumb. Auch HorizontalThumb is ein zusammen gesetztes Control und kann wieder zerlegt werden. Rechtsclick auf Horizontalthumb- Edit Control Parts- Edit a Copy und man erzeugt das Template.
Wenn man nun BackgroundGradient auswählt, kann man in der Tat den Slider Thumb auf gefüllt rot setzen.
Ein Blick in den XAML Code offenbart die Logik dazu
<Slider Width="200" Foreground="red" BorderBrush="#FFE90F0F" x:Name="mySilder" Style="{StaticResource SliderStyle1}"/>
Die Style Anweisungen sind nun in eine statische Ressource ausgelagert.
<UserControl.Resources>
<Style x:Key="SliderStyle1" TargetType="Slider">
...
<Thumb Background="#FFF91104" Height="18" x:Name="HorizontalThumb" Style="{StaticResource ThumbStyle1}" Width="11" IsTabStop="True" Grid.Column="1"/>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Dort wiederum findet sich nun das Thumb Control, dessen Style auch wieder in eine Ressource ausgelagert ist.
<Style x:Key="ThumbStyle1" TargetType="Thumb">
...
<Rectangle x:Name="BackgroundGradient" Fill="#FFF70B0B"/>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Eine Silverligth Combobox hat keine direkte Möglichkeit anhand eines selektierten Eintrages den Key dazu zu finden. Aber ich kann Auflistungen von komplexen Objekten an eine Combobox binden. Damit kann man genauer betrachtet sogar viel coolere Sachen anstellen. In meinem Fall kommt eine Liste komplexer Objekte aus einem ADO.NET Dataservice. combobox1.itemssource = llSessions
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
llSessions besitzt Eigenschaften wie Title und SessionID. SessionID ist wiederum kein einfaches Objekt sondern sogar eine GUID. Durch das Templating von XAML kann man nun recht detailiert festlegen wie die Drop Down Liste aussehen soll. Im folgenden Beispiel sehr einfach den Title text darstellen
<ComboBox x:Name="combobox1"
SelectionChanged="ComboBox_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Titel}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Das Objekt wird dann über einen Cast wieder zurückgeholt ich man kann dann auf die gewählte ID zugreifen.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Private Sub ComboBox_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs)
MessageBox.Show(CType(combobox1.SelectedItem, eventsModel.Sessions).SessionID.ToString)
End Sub
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Ich hasse eigentlich “me to” blog anouncments und ich werde mich in meinen Blog auf technisch relevantes und intersanntes reduzieren, aber das ist einfach zu abgefahren. Microsoft supportet Eclipse als Entwicklungsumgebung für Silverlight. http://www.eclipse4sl.org/blog/announcement/eclipse-tools-for-microsoft-silverlight/ Aktuell noch im Alpha Stadium. Dann auch noch nich tganz so bekannt, es gibt bei Microsoft ein Team das Zusatz Controls zu Silverlight entwickelt. Ergebnis ist das Silverlight control pack (11 Controls + 4 Skins) Und damit ich bei meinem versprechen bleibe eine Zeile Code on error resume next ';
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Die Spatzen pfeifen es in den einschlägigen Foren von den Dächern. Silverlight 2 ( man achte auf die Versionsnummer) ist fertig und steht auch teilweise schon zum Download bereit. Wie immer werden die Microsoft Server ein wenig zum replizieren brauchen. Wir hier auf der ADC08 haben bereits die erste RTW Anwendung live geschaltet. Damit wird das Session Voting durch die Teilnehmer durchgeführt. Sieht großartig aus! Das wichtigste ist, das B2 (und schon gar nicht vorher) Versionen nicht mit der RTW (release to Web) laufen. Ein möglicher Workaround ist beide Versionen als XAP Paket zu kompilieren. Um den Benutzer dann das jeweils passende Paket zu präsentieren kann man folgende Objekt Tag verschachtelung verwendung. <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%"> <param name="source" value="B2App.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="RTWApp.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<a href=http://go.microsoft.com/fwlink/?LinkID=115261 style="text-decoration: none;"> <img src=http://go.microsoft.com/fwlink/?LinkId=108181 alt="Get Microsoft Silverlight" style="border-style: none"/> </a>
</object>
</object>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Viel Spaß mit Silverlight
PS: ich halte für ppedv Silverlight Trainings und freue mich über eure Teilnahme
Mit heutigem Freitag gibt es die RC0 Bits von Silverlight 2. Dabei handelt es sich um eine Feature Complete Edition für Entwickler. Diese soll verwendet werden damit Silverlight Entwickler ihre auf Beta 2 basierenden Projekte migrieren und testen können. Es ist keine Go-Live Lizenz enthalten. Es wird auch kein automatisches Update von Beta 2 auf RC0 geben. Für den Benutzer gibt es das Autoupdate von Beta 2 auf die dann folgende RTW (release to web) des Silverlight Browser Plugin’s erst einige Tage später. Dann allerdings wird keine B2 Anwendung mehr laufen. Das genaue Datum ist noch geheim, wer aber auf die ADC kommt ist gut dabei. Ich werde dort ein wenig zu Silverlight 2 erzählen. Es gibt einige Änderungen in Funktionsnamen, Namensräumen und darin enthaltene Controls die in einem “breaking changes” Document mit einem Umfang von ca 21 Seiten beschrieben sind. Jedes Projekt muss neu compiliert werden, da das Binary Format sich geändert hat. Wobei ein altes Silverlight Projekt beim öffnen mit Visual Studio 2008 und installierten Silverlight Tools automatisch mit Rückfrage konvertiert wird. Meine Erfahrung zeigt das ohne Eingriffe in den den Beta 2 Code keine erfolgreiche neukompilierung möglich ist. Der Aufwand ist in der Regel aber in wenigen Minuten erledigt. Zumindest muss der Mime Type im IIS auf application/x-silverlight-2 geändert werden und bei der entsprechenden referenzierung des Silverlight Objektes in der HTML oder ASPX Page. Um loszulegen muss der Entwickler alle Silverlight Programme zunächst deinstallieren. Das sind Silverlight, Silverlight Tools für Visual Studio, SDK und Expression Blend. Die Neuinstallation erfolgt dann mit Silverlight_tools.exe gefolgt von der Windows Developer Runtime Silverlight.2.0_Developer.exe. Für den Design Teil empfehle ich Expression Blend, das nur in der Version 2.5 dafür geeignet ist, Auch dafür sollte zeitgleich ein Update zur Verfügung stehen. Zu finden ist das alles natürlich auf www.silverlight.net bzw http://www.microsoft.com/downloads/details.aspx?FamilyID=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&DisplayLang=en Falls die Links nicht funktionieren, ein wenig warten und später nochmal probieren. Sind wohl mehrere Server im Spiel und muss erst verteilt werden.