SlickButton цветная анимация - PullRequest
Новая
       25

SlickButton цветная анимация

0 голосов
/ 21 марта 2012

Мне нужно создать цветную анимацию.У меня есть элемент управления (гладкая кнопка - свернуть, закрыть), который работает отлично.Есть триггер мыши, который меняет свой цвет.Проблема в том, когда я хочу оживить этот цветовой переход.: S

Вот пример, как это выглядит: 

<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
    <Grid>
        <Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
                Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
        </Border>
        <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
                BorderThickness="1">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
            </Border.BitmapEffect>
        </Border>
        <Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
            <ContentPresenter Width="Auto" Height="Auto"  HorizontalAlignment="Center" VerticalAlignment="Center">
            </ContentPresenter>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
            </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
                <Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
            </Trigger.Setters>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>

Я попытался удалить раздел Trigger.Setters и заменить его на: 

<Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

Работает один раз,Есть анимация, когда мышь входит в область кнопок, но нет анимации, когда она уходит.Далее, когда мышь снова нажимает на эту кнопку - без анимации, но цвет сразу меняется: я не знаю, как это сделать.Прошу помощи.Спасибо заранее.

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Не здесь
<Trigger Property="IsMouseOver" Value="False">

Не здесь
<Trigger.Setters>

Но здесь
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>

Должно быть:
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter> 1011 *
*

Кстати, я думаю, вы Property="IsMouseOver" Value="False" перепутали с Property="IsPressed" Value="True"

и все же Opacity для ButtonBackgroundBorder на IsMouseOver=false должно быть 0

0 голосов
/ 21 марта 2012

Спасибо, я тупой, не комментируй: P 

        <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.Setters>
                <Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
            </Trigger.Setters>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>

Все отлично работает:)

...