WPF - при наведении курсора измените фон с линейного на твердый - PullRequest
Новая
       42

WPF - при наведении курсора измените фон с линейного на твердый

1 голос
/ 03 июня 2019

Я тестирую кнопку, которая изначально определена двухцветной кистью с линейным градиентом, которая появляется горизонтально.Когда пользователь наводит курсор на кнопку, я хотел бы изменить градиент на два цвета, появляющихся вертикально, а затем вернуться к значению по умолчанию при наведении мыши.Мои первые попытки не увенчались успехом, поэтому сейчас я пытаюсь заменить кисть сплошной цветной кистью, но анимация не происходит.

  • Можно ли вообще изменить направление градиента?Если это так, пример того, как?
  • Относительно кисти для сплошного цвета (в коде ниже) ... почему это не может быть анимировано при наведении мыши? 
    <Color x:Key="CorpBlue" A="100" R="91" G="99" B="115"/>
    <Color x:Key="CorpGreen" A="100" R="152" G="151" B="70"/>
    <SolidColorBrush x:Key="BrushColor_3" Color="#FF7F00"/>

    <Style TargetType="Button" x:Key="testButton">
    <Setter Property="BorderBrush" Value="{StaticResource BrushColor_3}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="testBed"
                            Margin="{TemplateBinding Margin}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="10">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Name="basicBrush" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource CorpGreen}"/>
                                    <GradientStop x:Name="BackgroundGradientStop2" Offset="0.5" Color="{StaticResource CorpBlue}"/>
                                    <GradientStop x:Name="BackgroundGradientStop3" Offset="1" Color="{StaticResource CorpGreen}"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsPressed" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseDownAnimation">
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpBlue_T1}"
                                                        Duration="0:0:0:1"/>
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpGreen_T1}"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseUpAnimation">
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpBlue}"
                                                        Duration="0:0:0:1"/>
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpGreen}"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseOverAnimation"  >
                                        <ColorAnimation Storyboard.TargetName="testBed"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        From="Black" To="Green"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

1 Ответ

1 голос
/ 03 июня 2019

Цветовые ресурсы, которые вы определили, настолько похожи, что я вообще не смог визуально обнаружить какие-либо изменения. После того, как я изменил канал Alpha (A) со 100 на 255 (полностью непрозрачный) и изменил цвета на что-то с некоторой контрастностью, анимация градиентного цвета, которую вы видели, могла нормально работать.

Ниже показано, как анимировать направление градиента от горизонтального к вертикальному.

LinearGradientBrush не может быть целью, но его свойства могут быть связаны. LinearGradientBrush.EndPoint это точка. Поэтому я помещаю Point в свойство зависимости где-то, привязываю к нему и анимирую точку с помощью PointAnimation.

Вам придется оживить его и в выходных действиях. 

<ControlTemplate TargetType="Button">
    <Border x:Name="testBed"
            Margin="{TemplateBinding Margin}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="10"
            >
        <Border.Tag>
            <!-- You could find a better place to put this, but it'll do for an example. -->
            <!-- See binding on basicBrush.EndPoint just below -->
            <Point X="0" Y="1" />
        </Border.Tag>
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="{Binding Tag, ElementName=testBed}" x:Name="basicBrush">
                <LinearGradientBrush.GradientStops>
                    <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource CorpGreen}"/>

Вниз в триггерах: 

<Storyboard x:Name="MouseDownAnimation">
    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                    Storyboard.TargetProperty="Color"
                    To="{StaticResource CorpBlue_T1}"
                    Duration="0:0:0:1"/>
    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                    Storyboard.TargetProperty="Color"
                    To="{StaticResource CorpGreen_T1}"
                    Duration="0:0:0:1"/>

    <PointAnimation Storyboard.TargetName="testBed"
                    Storyboard.TargetProperty="Tag"
                    From="0,1"
                    To="1,0"
                    Duration="0:0:0:1"
                    />
...