XAML Listview Selected Item Template

Es gibt viele Wege mit WPF um in einer gebundenen Liste den selektierten Eintrag besonders hervorzuheben. Wer einfache Anforderungen hat wird mit dem Template ItemContainerStyle auskommen. Wer nach einem Listview SelectedItemTemplate sucht wird höchstens über diesen Blog Eintrag stolpern.

Ausgehend von einer XAML Liste mit Design Time Daten, wird ein Itemtemplate zugewiesen.

   1:  <Grid x:Name="LayoutRoot" 
   2:  DataContext="{Binding Source={StaticResource SampleDataSource1}}">
   3:  <ListView HorizontalAlignment="Left" Height="215" Margin="200,70,0,0"
   4:    VerticalAlignment="Top" Width="180"
   5:    ItemTemplate="{DynamicResource ItemTemplate}" 
   6:    ItemsSource="{Binding Collection}" >
   7:  </ListView>
   8:  </Grid>

 

Das User Interface schaltet für den selected Datensatz die Darstellung um. Die normale Anzeige ist nur Text und die alternative das Bild. Hier gibt des keine Multiselection.

image

Dazu werden ein Datatemplate deklariert, das wiederum die eigentliche Darstellung des einzelnen Listeneintrages in ein Control Template auslagert.

   1:  <DataTemplate x:Key="ItemTemplate">
   2:        <StackPanel Orientation="Horizontal">
   3:          <Control x:Name="theControl" Focusable="False" 
   4:              Template="{StaticResource showItemTemplate}" />
   5:  </StackPanel>

 

Dabei werden aber zwei Templates angelegt. Eins für den Item Modus und eins für den SelectedItem Modus.

   1:  <ControlTemplate x:Key="showItemTemplate">
   2:  <StackPanel Orientation="Horizontal">
   3:      <TextBlock Text="{Binding Name}"/>
   4:  </StackPanel>
   5:  </ControlTemplate>
   6:  <ControlTemplate x:Key="SelectedTemplate">
   7:  <StackPanel Orientation="Horizontal">
   8:      <Image Source="{Binding Bild}" HorizontalAlignment="Left" Height="64" Width="64"/>
   9:  </StackPanel>
  10:  </ControlTemplate>

Dabei kommt ein Trigger zum Einsatz., Genauer ein Datatrigger der auf die Eigenschaft isSelected des Item lauscht. Das Datatemplate wird dazu um das Triggers Element erweitert. Der Datatrigger wird  an das ListviewItem gebunden. Sobald der Wert true ist, wird der Setter aufgerufen und das SelectedTemplate aus obigen XAML Code dem Control bzw der Template Eigenschaft zugewiesen.

   1:  <DataTemplate x:Key="ItemTemplate">
   2:        <StackPanel Orientation="Horizontal">
   3:          <Control x:Name="theControl" Focusable="False" 
   4:              Template="{StaticResource showItemTemplate}" />
   5:        </StackPanel>
   6:        <DataTemplate.Triggers>
   7:         <DataTrigger
   8:         Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
   9:   AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True">
  10:            <Setter TargetName="theControl" Property="Template"
  11:                Value="{StaticResource SelectedTemplate}" />
  12:            
  13:          </DataTrigger>
  14:      </DataTemplate.Triggers>
  15:  </DataTemplate>
Kommentare sind geschlossen