views:

28

answers:

1

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>
A: 

You can define custom TabItem template and run animations using triggers.

JohnKZ
True and I have tried that. Only problem is that when the TabControl is loaded for the first time, the Trigger for when TabItems are not selected runs on all TabItems that are not selected, making them change appearance when they should do nothing.
Jova
@Jova. Try to use Tag property of TabItem to indicate if TabItem already was selected and use MultiTriggers.
JohnKZ
I've added code now so you can see it. No animation is happening when I change tabs.
Jova