WPF Animate Listbox Item Background Color

Question

My code is close to accomplishing what I want, but I need some help. As I mouse over individual listbox items, I want to fade in from no background color to .5 opacity orange. This is what I currently have:

 <ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Control.Background" Value="Orange" />
                <Setter Property="Control.BorderBrush" Value="SteelBlue" />
                <Setter Property="Control.BorderThickness" Value="1" />
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
            Storyboard.TargetProperty="Opacity" To=".5"
            Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
             Storyboard.TargetProperty="Opacity" To="0"
             Duration="0:0:0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

But this results in the individual ENTIRE listbox item showing .5 opacity orange on mouseover, and then disappearing altogether when the mouse leaves. So there are 2 issues: How do I animate only the background color property of each listbox item, and how do I order the animations so that they work correctly?

Answer 1

Your XAML works if I put it the ListBox.Resources instead of ItemContainerStyle

<ListBox>
      <ListBox.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
          <Setter Property="HorizontalContentAlignment"
                  Value="Stretch" />
          <Style.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="True">
              <Setter Property="Control.Background"
                      Value="Orange" />
              <Setter Property="Control.BorderBrush"
                      Value="SteelBlue" />
              <Setter Property="Control.BorderThickness"
                      Value="1" />
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     To=".5"
                                     Duration="0:0:0.4" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     To="10"
                                     Duration="0:0:0" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
            </Trigger>
          </Style.Triggers>

        </Style>
      </ListBox.Resources>

    <ListBoxItem>AAA</ListBoxItem>
      <ListBoxItem>BBB</ListBoxItem>
      <ListBoxItem>CCC</ListBoxItem>

    </ListBox>

Answer 2

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>            
            <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
                <Setter Property="Margin" Value="1,2,1,1"/>
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="Background" Value="White" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <Border Background="{TemplateBinding Background}" />
                               <Border Background="LightGray" Margin="0,0" Opacity="0.5">
                                <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <!--<Border Margin="2,1,2,0" Grid.Row="0" Background="#57FFFFFF" />-->
                                        <Border Margin="2,1,2,0" Grid.Row="0">
                                            <Border.Background >
                                                <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" >

                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Grid>
                                </Border>
                                <ContentPresenter Margin="0,5" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True" />
                                        <Condition Property="IsSelected" Value="False"/>
                                    </MultiTrigger.Conditions>
                                    <!--<Setter Property="Background" Value="#CCCBAF00" />
                            <Setter Property="Opacity" Value="0.8" />-->
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
                                            <GradientStop Color="#F54F00" Offset="0" />
                                            <GradientStop Color="#F54F00" Offset="1" />
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </MultiTrigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <!--<Setter Property="Background" Value="#CCCB6400" />
                            <Setter Property="Opacity" Value="0.8" />-->
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
                                                <GradientStop Color="#CCCD8B4C" Offset="0" />
                                                <GradientStop Color="#CCCB6400" Offset="1" />
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>         
    </Window.Resources>
    <Grid>
          <ListBox Margin="20"  ItemContainerStyle="{StaticResource ListboxItemStyle}" >
          <ListBoxItem >New York</ListBoxItem>
          <ListBoxItem>Los Angeles</ListBoxItem>
          <ListBoxItem>Paris</ListBoxItem>
          <ListBoxItem>Zurich</ListBoxItem>
        </ListBox>
    </Grid>
</Window>