How to start a ColorAnimation from a MultiTrigger in a ControlTemplate ?

Question

Hi all

I have the following ControlTemplate for a WPF TabItem:

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_NavigationAreaBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MouseOverTextBrush}" />
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

Everything works fine so far. The MultiTrigger at the end of the template defines a mouse over effect for not selected TabItems. Now I thought the change in color for this mouse over effect looks a bit brash so let´s animate it with a ColorAnimation. But don´t count the chickens before they hatch - everything I tried didn´t work. Maybe I oversee the obvious - but how to achieve this feat ?

Thanks in advance

banzai

Answer 1

Have you tried MultiTrigger.EnterActions?

Inside your MultiTrigger you would have something like the following:

<MultiTrigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation Storyboard.TargetName="YourObject'sName" Storyboard.TargetProperty="YourObject'sColorProperty" To="YourFavoriteColor" Duration"YourFavoriteNumber" />
        </Storyboard>
    </BeginStoryboard>
</MultiTrigger.EnterActions>

Then you can always add to reverse your animation if you like (or do anything when your trigger is no longer true)

Hopefully that helps!

EDIT: To answer the question posed in your answer. I haven't tried, but I'm not sure you can animate your resource directly like that. Instead of setting your background to a resource, set it directly as a SolidColorBrush:

<Border Name="Border" MinHeight="30" Margin="0,0,0,-1" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" > 
    <Border.Background>
        <SolidColorBrush x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </Border.Background>
    <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" /> 
</Border> 

Then your animation might be able to recognize your local_TabControlBackgroundBrush!

Also, I think you may have to move your MultiTrigger to the top above your other Triggers. I think whenever you have your MultiTrigger true, your Trigger based on IsSelected is also true and will get priorty since it's listed first. I could be wrong, but I would double check that if you aren't getting errors but your multi-trigger continues to not work.

Hope it helps!

Answer 2

Yes I tried before but I got a runtime error at application startup. Don´t know why, but now I figured out the reason without problems. Your not allowed to use dynamic resources in a ColorAnimation as I did on my 1st try. So the following template produces no runtime error at startup:

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="TabControlBackgroundBrush" x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="local_TabControlBackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource ndt_NavigationAreaColor}" Duration="0:0:0.15" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

But - alas - when the MultiTrigger fires I get an error saying something like "The name 'local_TabControlBackgroundBrush' cannot be found in namespace 'System.Windows.Control.ControlTemplate'." (I´m not from an English speaking country so directly citing the error message would be of no real use.) The name is defined in the template´s resources - why didn´t he find it ?