IsMouseOver and IsPressed animations conflict

Russ Suter
Russ Suter used Ask the Experts™
on
Forgive my ignorance. I'm still learning xaml.

I have this button:
                <Button Name="CloseButton" DockPanel.Dock="Top" HorizontalAlignment="Right" Style="{StaticResource TitleBarButton}" Click="CloseButton_Click" Tag="Images/Window/close.png">
                </Button>

Open in new window

This is the style definition I have so far:
    <Style x:Key="TitleBarButton" TargetType="Button">
        <Setter Property="Width" Value="34"/>
        <Setter Property="Height" Value="26"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,0,1,1" >
                        <Image Source="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Stretch="None"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#FFFFFCF4" Duration="0:0:0.2"/>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="#FFE5C365" Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:0.2"/>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="Transparent" Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#FFFFE8A6" Duration="0:0:0.1"/>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="#FFE5C365" Duration="0:0:0.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:0.1"/>
                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="Transparent" Duration="0:0:0.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Open in new window

I'm almost there but this weird behavior has me confused. IsMouseOver works fine until IsPressed is activated. IsPressed always works fine. The issue is that once the IsPressed trigger has fired the IsMouseOver exit action doesn't ever seem to get called again. What I need to figure out is how do I get the IsPressed exit action to just refer back to the IsMouseOver action so the color is set correctly?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Software Engineer
Top Expert 2009
Commented:
Actually the solution is posted here, please follow these steps:
  1. Name your IsMouseOver BeginStoryBoard objects. (In the example  Name="MouseOverStoryBoard" and  Name="MouseOverStoryBoard2"
  2. Use those names in two StopStoryBoard objects in the IsPressed Trigger.EnterActions.
  3. Reverse the order of your Trigger objects.
Then your triggers will look like:
<Trigger Property="IsPressed" Value="True">
    <Trigger.EnterActions>
		<StopStoryboard BeginStoryboardName="MouseOverStoryBoard" />
		<StopStoryboard BeginStoryboardName="MouseOverStoryBoard2" />
		<BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#FFFFE8A6" Duration="0:0:0.1"/>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="#FFE5C365" Duration="0:0:0.1"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:0.1"/>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="Transparent" Duration="0:0:0.1"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard  Name="MouseOverStoryBoard">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#FFFFFCF4" Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="#FFE5C365" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard  Name="MouseOverStoryBoard2">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="Transparent" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial