StoryBoardのパスの色を変更するには？

Question

これはタブを閉じるために「X」ボタン用に作った完全なスタイルです。 これは機能します。しかし、私はそれに満足していない。

StoryBoard sを見ると、「X」色の変化の効果を得るために2つの異なるシャッフルが表示されることがわかります。Path私はむしろ、色変換を行うが、私はまたPath

のStrokeプロパティにバインドすることができないように、私は広場全体にわたるTextBlockちょうどので、私のカーソルのトリガーMouseOver状態を持っているようだと思います。私がちょうど残す場合Path - MouseOverは、実際のPathの色以上にのみトリガーされます。その部分をよりプロフェッショナルにする方法はありますか？

<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

ストロークの色を変更するには、ブラシレベルをドリルダウンする必要があります。ここでは簡単なアニメーションを示しています。

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