Über kurz oder lang kommt man meist in die Verlegenheit ein ControlTemplate erstellen zu müssen (um anschließend zu bemerken, dass es ohnehin ganz einfach ist). Hat man nun seine ersten Templates erstellt kann schnell der Wunsch aufkommen, diese bzw. das Aussehen über Trigger zu verändern. Hierzu vorerst zwei Erklärungen:
Was ist ein ControlTemplate? Mit einem ControlTemplate wird die Möglichkeit geboten, das Aussehen eines Elements (beispielsweise eines der mit WPF ausgelieferten Elemente) zu verändern. Ganz genau betrifft es nicht nur das Aussehen, sondern auch, wie die anzuzeigenden Daten präsentiert werden sollen (Verwendung von internen Elementen). Dadurch kann ein vorhandenes Element gänzlich umdefiniert werden.
Was ist ein Trigger? Mit einem Trigger können Eigenschaften eines Elementes überwacht. Dadurch kann beispielsweise innerhalb eines Templates festgestellt werden, dass ein Item einer Auflistung (siehe ListView, ListBox etc.) beispielsweise aktuell ausgewählt ist. Entsprechend kann darauf reagiert werden. Als Beispiel könnte der Hintergrund bei gewählten Items unterschiedlich dargestellt werden.
Im der hier gezeigten Demo soll folgendes Ziel erreicht werden: Für ein ListView-Element wird ein ControlTemplate definiert, welches eine Liste von Objekten des Typs Person anzeigt. Eine Person ist wie folgt definiert:
public class Person
{
public String Firstname { get; set; }
public String Lastname { get; set; }
public String PicturePath { get; set; }
}
Der PicturePath gibt den Pfad zu einem Bild an. Dieses wird ebenfalls in der ListView angezeigt. Nun soll beim Selektieren eines bestimmten Eintrages, das angezeigte Bild vergrößert werden. Dazu sehen wir uns nachfolgendes XAML-Markup an:
<Window x:Class="DotNetGui.WpfListViewDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title=".NET GUI - ListView - Resize Image Demo" Height="300" Width="300">
<Window.Resources>
<Style x:Key="{x:Type ListViewItem}" TargetType="{x:Type ListViewItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Key="{x:Type ListViewItem}" TargetType="{x:Type ListViewItem}">
<Border Padding="2" SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Name="PersonPicture" Source="{Binding Path=PicturePath}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Width="30"/>
<TextBlock Padding="2" Text="{Binding Path=Lastname}" FontWeight="Bold" Grid.Column="1" Grid.Row="0"/>
<TextBlock Padding="2" Text="{Binding Path=Firstname}" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue"/>
<Setter TargetName="PersonPicture" Property="Width" Value="50"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="White"/>
<Setter TargetName="PersonPicture" Property="Width" Value="30"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DockPanel>
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto">
<ListView x:Name="PersonListView"/>
</ScrollViewer>
</DockPanel>
</Window>
Grundsätzlich passiert nichts Großartiges. Es gibt ein DockPanel, darin ist ein ScrollViewer eingebettet, welcher schließlich ein ListView enthält. Dessen ItemsSource wird über die Codebehind-Datei befüllt, daher ist hier keine Angabe ersichtlich. Wichtig sind jedoch folgende Zeilen innerhalb der Trigger:
<Setter TargetName="PersonPicture" Property="Width" Value="50"/>
und
<Setter TargetName="PersonPicture" Property="Width" Value="30"/>
Zusätzlich ist zu beachten, dass die anzuzeigende Grafik durch unser erstelltes ControlTemplate durch ein Image-Element repräsentiert wird. Diesem wurde ein Name zugewiesen. Nun kann innerhalb der Trigger durch die Eigenschaft TargetName auf dieses Element zugegriffen und Wert einer Eigenschaft geändert werden. In diesem Fall die Breite des Image-Elementes. Wird nun ein Item innerhalb der ListView selektiert, wird automatisch die Grafik vergrößert. Der gewünschte Effekt.
Dies kann natürlich noch um viele andere Möglichkeiten erweitert werden.
