Silverlight Listbox 1x1

Die Silverlight Listbox ist ähnlich wie ein ASP.NET Repeater die erste Wahl bei Datenbindung. Man kann Sie an ein Array oder komplexe Liste binden. Wenn man eine komplexe Liste bindet sieht das Ergebnis eventuell etwas seltsam aus. Zunächst der Code für die Daten.

 Private Sub page27_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim p As New List(Of person)
        p.Add(New person With {.alter = 27, .Firma = "ppedv ag", .Name = "Hannes"})
        p.Add(New person With {.alter = 32, .Firma = "ppedv ag", .Name = "Andreas"})
        p.Add(New person With {.alter = 23, .Firma = "ppedv ag", .Name = "Bernhard"})
        p.Add(New person With {.alter = 45, .Firma = "ppedv ag", .Name = "Stefan"})
        p.Add(New person With {.alter = 12, .Firma = "ppedv ag", .Name = "Arnold"})
        ListBox1.ItemsSource = p
    End Sub

Um die passende Eigenschaft anzuzeigen gibt es die Eigenschaft

DisplayMemberPath="Name"

Man kann aber auch das Template der Listbox verwenden und erhält man dafür nahezu unbegrenzte Layout Möglichkeiten. Die einzelnen Daten werden im Itemtemplate erstellt. Hier mit Border und TextBlock

<ListBox Height="152" HorizontalAlignment="Left"
            Margin="58,25,0,0" Name="ListBox1" VerticalAlignment="Top" Width="148">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border CornerRadius="5" BorderThickness="1" BorderBrush="#FF1349ED" Width="100" Height="24">
                    <TextBlock Text="{Binding Name}" Margin="3,0,0,7" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>
Sieht zwar im Programm ganz nett aus 
 

aber im Visual Studio 2010 Designer sieht man gar nichts. Da kann Expression Blend schon wesentlich mehr. Control auswählen, Context Menu-Edit Additonal Templates- Edit Generated Items- Edit Current. Oder noch einfacher per Breadcrump Navigation ( hier oben im Bild)

So sieht man wenigstens den Border. Wie man Design Daten Sichtbar machen kann habe ich schon früher gepostet.

Aber auch das generelle Layout kann man verändern. Daszu kommt das Itemspanel zum Einsatz. In diesem Beispiel ordnen wir die Einträge nebeneinander an.

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
       <StackPanel Orientation="Horizontal"></StackPanel>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

Und so schauts aus.

Weiter gehts mit dem ItemsContainerStyle. Folgender XAML Code und das vorher-nachher Bild

<ListBox.ItemContainerStyle>
   <Style TargetType="ListBoxItem" >
     <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate TargetType="ListBoxItem">
             <ContentPresenter x:Name="contentPresenter" 
              Margin="4" />
             </ControlTemplate>
          </Setter.Value>
     </Setter>
   </Style>
</ListBox.ItemContainerStyle>
 

Da kann man natürlich auch mehr damit machen, was XAML in Silverlight so her gibt. Z.B. einen roten Rahmen außen rum machen.

<ControlTemplate TargetType="ListBoxItem">
   <Border BorderBrush="red"  BorderThickness="1"> 
          <ContentPresenter:Name="contentPresenter" 
Margin="4" /></Border>
</ControlTemplate>
 

Wenn man den Container ganz aussen rum braucht, dann geht’s ab ins ControlTemplate.

 <ListBox.Template>
    <ControlTemplate>
       <Grid>
         <ScrollViewer>
          <Border BorderBrush="Green" BorderThickness="2">
          <ItemsPresenter /></Border>
         </ScrollViewer>
      </Grid>
  </ControlTemplate>
</ListBox.Template>

Außerdem noch ein Link auf einen älteren Silverlight 2 Artikel dazu der beschreibt wie man den Hintergrund abhängig von Datenbank Wert ändert.