Question

This is complete style I made for “X” button to close tabs.
It works. But I’m not happy with it.

If you look at StoryBoards you will notice that I shuffle 2 different Paths visibility to achieve effect of my “X” changing color. I’d rather do color transformation but seems like I can’t bind to Stroke property of Path

Also, I have TextBlock just so my cursor trigger MouseOver state over whole square. If I just leave Path – MouseOver will only be triggered over actual Paths colors. Any way to make that part more professional?

<Style x:Key="CloseTabButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalPath">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverPath">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverPath">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalPath">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBlock Width="8" Height="8"/>
                            <Path x:Name="MouseOverPath" Stroke="#67c5e0" StrokeThickness="2" Data="M0,0 L8,8 M8,0 L0,8 z" />
                            <Path x:Name="NormalPath" Stroke="#9feaff" StrokeThickness="2" Data="M0,0 L8,8 M8,0 L0,8 z" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

You have to drill down the brush level to change the stroke color. Here’s a simplified animation that shows how.

<Storyboard x:Name="Storyboard1">
<ColorAnimationUsingKeyFrames 
         Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" 
         Storyboard.TargetName="path">
     <EasingColorKeyFrame KeyTime="0" Value="Black"/>
            <EasingColorKeyFrame KeyTime="0:0:2.9" Value="Yellow"/>
       </ColorAnimationUsingKeyFrames>
    </Storyboard>