Create Animation for ComboBoxItem - xaml

Question

I created a style and controltemplate for my ComboBox and I would like to dress it up with an animation.
How do I create a storyboard animation for when I hover in a ComboBoxItem the highlight will fade in and once I hover out, the highlight fades out as well? Thanks!
Here is my code so far:
<!--Area which contains selected items in the ComboBox-->
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<!--THIS MUST BE NAMED AS Part_ContentHost-->
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/>
</ControlTemplate>
<!--ComboBox Style. Uses ComboBoxToggleButton to expand and collapse a Popup control SimpleScrollViewer to all items to be scrolled and SimpleComboBoxItem to define the look of each item. The Popup shows a list of items in a StackPanel-->
<Style TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<!--The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen-->
<ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="True"/>
<!--The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it-->
<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" />
<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{DynamicResource ComboBoxWindowBackgroundBrush}" BorderBrush="{DynamicResource ComboBoxSolidBorderBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<!-- This forces the DropDown to have a minimum size if it is empty -->
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--This is used for each item inside of the ComboBox. You can change the selected color of each item below-->
<Style TargetType="ComboBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Grid SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.004*"/>
<ColumnDefinition Width="0.996*"/>
</Grid.ColumnDefinitions>
<Border x:Name="BorderItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border x:Name="BorderSelectedItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Path x:Name="ItemSelectedArrow" Data="M0.5,0.25 L0.5,22.25 19.5,22.25 z" Fill="#FFFFB14C" HorizontalAlignment="Left" Width="10.248" Height="10" Stretch="Fill" StrokeThickness="0" Margin="-0.376,-0.168,0,-0.332" Grid.Column="1" Visibility="Hidden">
</Path>
</Border>
<ContentPresenter x:Name="ContentSite" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2,2,0,2"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items -->
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="{DynamicResource ComboBoxSelectedBackgroundBrush}" TargetName="BorderSelectedItem"/>-->
<Setter Property="Visibility" Value="Visible" TargetName="ItemSelectedArrow"/>
<Setter Property="Margin" Value="10,2,0,2" TargetName="ContentSite"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource ComboBoxHighlightBackgroundBrush}" TargetName="BorderItem"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

So with your Item Template opened in blend go to your States Tab (Or just do it directly in your VisualStateManager XAML for your MouseOver State) and for starters adjust your Time Duration to a longer time to decrease the speed of the transition and make the fade effect appear. You can also set your Transition Effect and Easing Function to provide some further coolness to your simple transition. It's easiest just using blend but here's a quick n dirty xaml example that might give a better idea. Hope it helps, good luck!
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" **GeneratedDuration="0:0:0.15"** To="MouseOver">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseIn" Exponent="7"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="MouseOver" **GeneratedDuration="0:0:0.15"** To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:0.15"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="1.0" KeySpline="0,0,0.0299999993294477,0.920000016689301"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="{StaticResource BaseColor2}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
</Storyboard>
</VisualState>