Как изменить цвет пути в StoryBoard? - PullRequest
Новая
       5

Как изменить цвет пути в StoryBoard?

1 голос
/ 07 декабря 2011

Это полный стиль, который я сделал для кнопки «Х», чтобы закрыть вкладки.Оно работает.Но я не доволен этим.

Если вы посмотрите на StoryBoard s, вы заметите, что я перетасовываю 2 разных вида Path s, чтобы добиться эффекта моего изменения цвета "X".Я бы предпочел сделать преобразование цвета, но кажется, что я не могу привязать к Stroke свойству Path

Кроме того, у меня есть 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>

1 Ответ

3 голосов
/ 07 декабря 2011

Вы должны свернуть уровень кисти, чтобы изменить цвет обводки. Вот упрощенная анимация, которая показывает, как. 

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