Die Silverlight Listbox wird noch ein Thema für ein eigenes Buch. Wer bei Bing nach Beträgen dazu sucht wird vieles dazu finden. U.a. hier und hier und hier. Ein Kunde meiner Silverlight Schulung hat mich gefragt wie man einen Eintrag einer Listbox der ausgewählt (selected) ist, anders darstellt. Nun habe ich mich geistig auf die Suche nach dem passenden Template gemacht. Das ist ist aber falsch gedacht. Silverlight verwendet für die “aktiven” Parts den Visual State Manager der das Verhalten beeinflusst.
Um an diesem VSM zu gelangen muss man in das generated Item Container Template der Silverlight Listbox.
Dann erhält man umfangreichen XMAL Code. Die wichtigen Stellen habe ich gelb markiert.
<UserControl.Resources>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9"
IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="red"
IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" Margin="5"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="Left" />
<Rectangle x:Name="FocusVisualElement"
RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1"
StrokeThickness="5" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Entsprechend sieht dann meine Liste nicht mehr besonders schön aber aus. Aber ich konnte das selektierte Item verändern und kann sogar die Animation dazu steuern. Und wieder ein Auftrag erfüllt.
