Changing style for individual item in ListBox programmatically

Question

I saw some examples for changing colors and brushes for selected item in a ListBox

I was wondering if there is a way to change visual properties of an item in a list box based on events in our code

<ListBox.ItemTemplate>
   <DataTemplate>
      <StackPanel Name="spSceneThumb" Width="110">
          <Border BorderThickness="1" Background="#FFfcfcfc" BorderBrush="#aaaaff" >
               <StackPanel></StackPanel>
          </Border>
      </StackPanel>
  </DataTemplate>
</ListBox.ItemTemplate>

Let say I want to change border color of 5th item based on some event

I tried IValueConverter But changes to property wont effect border color

Sheridan Sheridan · Accepted Answer · 2014-07-31T17:12:36

You can declare a custom RoutedEvent that you could listen to with an EventTrigger. You can find out how to declare a custom RoutedEvent in the How to: Create a Custom Routed Event page on MSDN. Once created, you can reference your custom event using the class name before the event name and not forgetting the XAML Namespace Prefix that you define for the namespace where it was declared. Something like this:

RoutedEvent="YourNamespacePrefix:YourClassName.YourEventName"

However, changing discrete values like Brushes is not so simple using an EventTrigger. You'll have to use a Storyboard with a DiscreteObjectKeyFrame element. You could try something like this:

<DataTemplate x:Key="Something">
    <StackPanel Name="spSceneThumb" Width="110">
        <Border Name="Border" BorderThickness="1" Background="#FFFCFCFC">
            <StackPanel>
                ...
            </StackPanel>
            <Border.Resources>
                <SolidColorBrush x:Key="EventBrush" Color="Red" />
            </Border.Resources>
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="BorderBrush" Value="#FFAAAAFF" />
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Prefix:YourClassName.YourEventName">
                            <EventTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                            Storyboard.TargetName="Border" 
                                            Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" 
                                                Value="{StaticResource EventBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.EnterActions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </StackPanel>
</DataTemplate>

Changing style for individual item in ListBox programmatically

1 Answers