Friday, November 07, 2008

Silverlight Multiselect Listbox

by preishuber via Hannes Preishuber on 11/7/2008 2:44:33 PM

The Listbox control of Silverlight 2 have no multi selection. Datagrid have! I want to show how to build a Listbox with Checkboxes and iterate at the end through all items an see if they are checked. Seams to be easy!?

But isn't.  You can not access the content of the datatemplate. One solution is to use visualtreehelper to iterate through all controls of controltree. That is quite complkicated cause e.g a checkbox is a composition of Textblock and Rectangle.

I show the databinding way which is quite cool

First I have to generate a class where all data is in and a additional field for the checked value.

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

I dont like the typing, but that is another story. Now comes the cool part  in XAML. The trick is to do a two way binding.

<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>

A little bit code to fill the data onload

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"})

A little bit more code to get the items an see if it is checked

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

Do you like it? Feel free to comment