0

У меня есть кнопка со своим стилем:

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>

        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Mouse_Leave">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFFBF5F3"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.03" Value="2"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.03" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Mouse_LeftButton_Up">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.05" Value="0"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="border">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="#FF474747" Offset="0"/>
                        <GradientStop Color="#FF474747" Offset="1"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
            <BeginStoryboard x:Name="Mouse_LeftButton_Up_BeginStoryboard" Storyboard="{StaticResource Mouse_LeftButton_Up}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard x:Name="Mouse_Enter_BeginStoryboard" Storyboard="{StaticResource Mouse_Enter}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
            <BeginStoryboard x:Name="Mouse_Leave_BeginStoryboard" Storyboard="{StaticResource Mouse_Leave}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
            <BeginStoryboard x:Name="Mouse_LeftButton_Down_BeginStoryboard" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Когда я ставлю ей IsEnabled = false, а курсор находится над кнопкой, то вместо простого изменения цвета до такого:

Картинка нормальной отключённой кнопки

срабатывает к тому же анимация на триггере MouseLeave и получается такая каша:

Картинка ненормальной отключённой кнопки

Нормальная кнопка:

Нормальная не отключённая кнопка

И теперь мне нужно как-то блокировать анимацию, так как ждать 300 мс после анимации не очень хорошо, так как IsEnabled кнопки зависит от наличия текста в TextBox, и танцевать с бубном тоже.

Назначение IsEnabled кнопке:

btn_next.IsEnabled = tb.Text != "";
5
  • А почему бы просто не использовать мультитриггер? Или например перейти на VisualState.
    – VladD
    1 сен 2018 в 10:47
  • @VladD Хм, интересное решение, в таком случае, будет ли IsMouseOver = true при IsEnabled = false?
    – Arasfon
    1 сен 2018 в 11:02
  • Сходу не отвечу, но можно проэкспериментировать по идее
    – VladD
    1 сен 2018 в 11:05
  • @VladD К сожалению, IsMouseOver всегда возвращает false, если кнопка выключена. :( Можно ли как-то по-другому отловить мышку через wpf? Иначе моя идея с мультитриггером обваливается.
    – Arasfon
    1 сен 2018 в 11:49
  • Я посмотрю, что можно сделать.
    – VladD
    2 сен 2018 в 17:01

1 ответ 1

2

Попробуйте с VisualStateManager'ом, с ним всё гораздо проще. Заодно не понадобятся обратные анимации.

У меня вышло так:

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.03" Value="2"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.03" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Key="DisabledStoryboard">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.0" Value="#FF474747"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.0" Value="#FF474747"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                    <VisualTransition GeneratedDuration="0" To="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" Storyboard="{StaticResource Mouse_Enter}"/>
                <VisualState x:Name="Pressed" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
                <VisualState x:Name="Disabled" Storyboard="{StaticResource DisabledStoryboard}"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Результат:

простая анимашка по имени Наташка


Кажется, без ключевых фреймов проще:

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.5" To="#FF2CA58D"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.5" To="#FF397C6E"/>
        </Storyboard>
        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimation
                Storyboard.TargetProperty="(Border.BorderThickness)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="2"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF1C473F"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF2CA58D"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF397C6E"/>
        </Storyboard>
        <Storyboard x:Key="DisabledStoryboard">
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF474747"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF474747"/>
        </Storyboard>
    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                    <VisualTransition GeneratedDuration="0:0:0.0" To="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" Storyboard="{StaticResource Mouse_Enter}"/>
                <VisualState x:Name="Pressed" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
                <VisualState x:Name="Disabled" Storyboard="{StaticResource DisabledStoryboard}"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
18
  • Хорошо, спасибо, я попробую! Я только не понял, зачем нужен <VisualStateGroup.Transitions/>?
    – Arasfon
    3 сен 2018 в 4:53
  • @Arasfon: Хороший вопрос. Да, думаю, это не нужно.
    – VladD
    3 сен 2018 в 11:07
  • Обратные анимации понадобились. Обратную, почему-то он не делает. А хотелось бы. Иначе приходится писать дополнительную отмену предыдущих свойств. (
    – Arasfon
    3 сен 2018 в 15:34
  • @Arasfon: Странно, у меня анимация в обе стороны без проблем. Прикрепил картинку к ответу.
    – VladD
    3 сен 2018 в 22:20
  • И вправду странно, может это из-за разных версий Windows/VS/.NET? у меня 10, и Visual studio 2017 preview, .net 4.6.1
    – Arasfon
    4 сен 2018 в 5:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.