I attempted to create a simple style for a TabItem, by going to the Properties window and converting the template to a new resource, and wrapping it in a style (pretty standard stuff).
The goal is to animate the BorderBrush colour based on the IsSelected property. I've actually done this with relative ease, using the original generated code as a basis.
The problem: In the designer and when the application starts, all TabItems show as selected until I click on any tab which isn't the first one (index 0, since that's selected by default).
A screen recording demonstrating what happens:
https://i.gyazo.com/17e2f3c484029d4f5cd3021612b0f882.mp4
How can this be remedied? I have tried using the various trigger types and none seem to fix the problem.
The style code:
<Style TargetType="{x:Type TabItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="8,0"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="0,0,1,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="ElementBorder" Height="30" Width="Auto" Background="#FF1F1F1F" BorderBrush="#FF00FF96" BorderThickness="0,0,0,2" CornerRadius="2,2,0,0" SnapsToDevicePixels="True">
<ContentPresenter TextBlock.Foreground="Silver"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentSource="Header"
HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ElementBorder"
Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
To="#FF00FF96"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ElementBorder"
Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
To="#FF1F1F1F"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that you set your default BorderBrush to be the selected color. Change it to be the unselected color like so:
<Border x:Name="ElementBorder"
Width="Auto"
Height="30"
Background="#FF1F1F1F"
BorderBrush="#FF1F1F1F"
BorderThickness="0,0,0,2"
CornerRadius="2,2,0,0"
SnapsToDevicePixels="True">
Also, you can simplify your trigger:
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ElementBorder"
Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
To="#FF00FF96"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ElementBorder"
Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
To="#FF1F1F1F"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
Related
I have the following Style that contains an animation used to expand a Border:
<Style TargetType="{x:Type Border}" x:Key="BorderAnimations">
<Setter Property="FlowDirection" Value="RightToLeft" />
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetProperty="Width"
BeginTime="0:0:0"
From="" To="420" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetProperty="Width"
BeginTime="0:0:0"
From="420" To="90" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I want to set the From property to the generics' button Width. Here I have the generic Button style:
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="80" />
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="{DynamicResource MainBlue}" />
<Setter Property="Height" Value="{Binding
ElementName=MainUCPanel, Path=Height,
Converter={StaticResource ArithmeticConverter},
ConverterParameter=Int32.Parse(values[0]) / 6}" />
<Setter Property="Width" Value="{Binding Path=Height, RelativeSource={RelativeSource Self}}" />
<Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type view:DesktopUCMain}}, Path=DataContext}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" CornerRadius="5" x:Name="bd">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#FF1E90FF" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#27ace3" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
I've tried to set it as:
From="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=ActualWidth}"
But it's not working...
NOTE: these styles are located on a ResourceDictionary.xaml. How can I achieve the animation to get this width?
EDIT: Thrown exception:
Cannot freeze this Storyboard timeline tree for use across threads.
I am working now on a Button style, I've included a control template and style triggers. Now I want to make the background brush fade to a certain colour when mouse enter to button. But the colour animation won't work with a brush. and I'm stuck on that since yesterday. Here is what I've done so far in my button style:
<Converters:MathConverter x:Key="MathConverter" />
<Converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
<Style TargetType="Button">
<Setter Property="FontSize"
Value="{Binding FontSizeButton}" />
<Setter Property="Margin"
Value="{Binding FontSizeBase, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="Padding"
Value="{Binding FontSizeButton, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="MinWidth"
Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
<Setter Property="Width"
Value="NaN" />
<Setter Property="Background"
Value="{Binding BrushBackButton}" />
<Setter Property="BorderBrush"
Value="{Binding BrushBorder}" />
<Setter Property="BorderThickness"
Value="{Binding BorderThicknessBase}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{Binding BrushBackButtonOver}" />
</Trigger>
-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background">
<ColorAnimation To="Blue" Duration="10"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
You should use the VisualStateManager for this kind of problem.
It may lead you to something like that :
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name ="Border" Background="LightBlue">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
[...]
[Edit]
Concerning your specific problem, you should put your trigger in the ControlTemplate's Triggers.
<ControlTemplate TargetType="{x:Type Button}">
[...]
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="Border" TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation To="Blue" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
.Net 4 WPF DataGrid C# MMVM
When the DataGrid SelectionUnit is full row, wpf databinding and the collectionview take care of letting me know in the viewmodel what is the actively selected item via the view's currentitem property. This works great for readonly grids with the selection mode set to the fullrow.
Now I have an editable grid. So I set the SelectionUnit=Cell to make it easier to spot which cell one is in. Now all of a sudden the grid no longer has any ability to track the selection item. I can't even set SelectedItem when set to cell mode. So now the viewmodel always thinks it's on the first row. I can handle SelectedCellsChanged in the grid to figure out what row I'm on, I just have no way of letting the viewmodel know since the grid's SelectedItem can no longer be set!
I don't understand why the grid can't still have a SelectedItem when in cell select mode.
Short of hardcoding into my grid to cast the ItemSource to my collectionview to call MoveCurrentTo from the SelectedCellsChanged event, is there any other MVVM true way to keep the view's CurrentItem in sync with the grid?
Either that, or I change the grid style to remove or reduce the row highlight effect when I have an editable grid.
I was searching for the same problems and found a simple solution
To access to the row with SelectionUnit set to Cell you have to do:
DataGridXX.SelectedCells[0].item
It works only if you can select only one cell at time (not in Extended mode).
I found a great solution for this on MSDN using attached properties:
<DataGrid ItemsSource="{Binding}" IsReadOnly="True" SelectionUnit="Cell">
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="local:DataGridAttachedProperties.IsCellSelected" Value="True"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="local:DataGridAttachedProperties.IsCellSelected" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.ItemContainerStyle>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="local:DataGridAttachedProperties.IsCellSelected" Value="True">
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Opacity" Value="0.7"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.ItemContainerStyle>
</DataGrid>
And the C#:
public class DataGridAttachedProperties
{
public static bool GetIsCellSelected(DependencyObject obj)
{
return (bool)obj.GetValue(IsCellSelectedProperty);
}
public static void SetIsCellSelected(DependencyObject obj, bool value)
{
obj.SetValue(IsCellSelectedProperty, value);
}
public static readonly DependencyProperty IsCellSelectedProperty =
DependencyProperty.RegisterAttached("IsCellSelected", typeof(bool), typeof(DataGridAttachedProperties), new UIPropertyMetadata(false,
(o, e) =>
{
if (o is DataGridCell)
{
DataGridRow row = VisualTreeHelperEx.FindVisualParent<DataGridRow>(o as DataGridCell);
row.SetValue(DataGridAttachedProperties.IsCellSelectedProperty, e.NewValue);
}
}));
}
public class VisualTreeHelperEx
{
public static T FindVisualParent<T>(DependencyObject child)
where T : DependencyObject
{
DependencyObject parentObject = VisualTreeHelper.GetParent(child);
if (parentObject == null) return null;
T parent = parentObject as T;
if (parent != null)
{
return parent;
}
else
{
return FindVisualParent<T>(parentObject);
}
}
}
i too Have a similar problem, so here is the Style i used(Copied from Net).
So you copy the WhistlerBlue theme from http://datagridthemesfromsl.codeplex.com/ and make following modifications. Hope this helps.
<!--Cell-->
<Style x:Key='CellStyle' TargetType="{x:Type controls:DataGridCell}" >
<Setter Property="Foreground" Value="{StaticResource ThemeForegroundBrush}" />
<Setter Property="Height" Value="Auto" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="BorderThickness" Value="1" />
<!--Padding hack-->
<Setter Property="Padding" Value="2 5 2 5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:DataGridCell}">
<Grid x:Name="Root" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="FocusVisual" Margin="0,-2,0,0"
Stroke="White" Fill="White"
Opacity="0" IsHitTestVisible="false"/>
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}"/>
<Rectangle x:Name="RightGridLine" VerticalAlignment="Stretch" Width="1" Grid.Column="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGridRow -->
<Style x:Key='RowStyle' TargetType="{x:Type controls:DataGridRow}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:DataGridRow}">
<Border x:Name="DGR_Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<primitives:SelectiveScrollingGrid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height='Auto' />
</Grid.RowDefinitions>
<Rectangle x:Name="Selected" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2"
Fill="{StaticResource BtnOverFill}" Stroke="{StaticResource selectedStroke}"
Opacity="0"/>
<Rectangle x:Name="SelectedHighlight" Margin="1" Grid.RowSpan="2" Grid.ColumnSpan="2"
Stroke="#A0FFFFFF"
Opacity="0"/>
<primitives:DataGridRowHeader Grid.RowSpan="2"
primitives:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}},
Path=HeadersVisibility,
Converter={x:Static controls:DataGrid.HeadersVisibilityConverter},
ConverterParameter={x:Static controls:DataGridHeadersVisibility.Row}}"/>
<Rectangle x:Name="Over" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2"
Fill="{StaticResource hoverGradient}"
Stroke="{StaticResource hoverStroke}"
Opacity="0"/>
<primitives:DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<primitives:DataGridDetailsPresenter Grid.Column="1" Grid.Row="1"
x:Name='DetailsPresenter'
primitives:SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}, Path=AreRowDetailsFrozen, Converter={x:Static controls:DataGrid.RowDetailsScrollingConverter}, ConverterParameter={x:Static controls:SelectiveScrollingOrientation.Vertical}}"
Visibility="{TemplateBinding DetailsVisibility}"
/>
<Rectangle Height="1" HorizontalAlignment="Stretch"
x:Name="BottomGridLine"
Fill="{StaticResource HorizontalVerticalGridLinesBrush}"
Grid.Column="1" Grid.Row="2" />
</primitives:SelectiveScrollingGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property='IsSelected' Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Selected" Storyboard.TargetProperty="Opacity" To="0.84"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedHighlight" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Selected" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedHighlight" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<!--<Setter Property="DetailsVisibility" Value="Visible" />-->
</Trigger>
<MultiTrigger >
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Over" Storyboard.TargetProperty="Opacity" To="0.73"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Over" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="IsFocused" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Selected" Storyboard.TargetProperty="Opacity" To="0.84"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedHighlight" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Selected" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedHighlight" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am applying a ItemContainerStyle to a ListBox control. In my ListBoxItem style I have several triggers containing storyboard animations that apply to the current state of the ListBoxItem (IsSelected, IsMouseOver).
It all works fine and dandy until after I have selected a ListBoxItem, then the IsMouseOver storyboard animation isn't fired for the ListBoxItem which was previously selected.
I can't see where the problem is, so I am hoping someone will help me out with this issue.
Cheers
Here is the code I am using
<Style x:Key="ListBoxFeedItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" Margin="5" SnapsToDevicePixels="true">
<Grid Name="Grid" Height="Auto" Margin="5">
<TextBlock Margin="10" Text="{Binding Path=Name}" FontSize="14" TextTrimming="CharacterEllipsis" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#4CDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#FFDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Check the order of your Triggers.
Have a look at Multiple storyboards on one property
Check out Yuri's answer.May be that's what you are looking for.
How would I go about changing a TabItem color from it's unselected color to it's selected color with an animation on SelectionChanged, so that both the unselected and selected TabItems change?
Edit: This is how my CustomTemplate looks like. There is no animation happening at all so what have I done wrong?
<Style TargetType="TabItem">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid>
<Border BorderBrush="Transparent" BorderThickness="0" MinWidth="120">
<StackPanel Orientation="Vertical">
<ContentPresenter HorizontalAlignment="Center" ContentSource="Header" />
<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5" Fill="Transparent" />
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Ellipse.Fill" Value="Transparent" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill"
From="Transparent" To="Orange" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="Ellipse.Fill" Value="Orange" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill"
From="Orange" To="Transparent" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can define custom TabItem template and run animations using triggers.