Блог

Мне нужна помощь, чтобы выяснить, как заставить кнопку пульсировать цветом фона. Я использую приведенный ниже стиль для создания кнопок и хотел бы, чтобы цвет фона кнопок пульсировал (разные оттенки цвета) в нормальном состоянии. Цель состоит в том, чтобы привлечь внимание пользователей к кнопке.

В идеале я бы хотел, чтобы это произошло после определенного периода бездействия. Возможно ли это сделать в стиле или мне нужно создать полный пользовательский пользовательский элемент управления? Если это возможно, я был бы признателен, если бы кто-нибудь мог предоставить пример кода, иллюстрирующий, как этого добиться.

Я считаю, что должно быть возможно сделать следующее: 1. Создайте ControlTemplate.Раздел ресурсов и добавьте раскадровку, которая определяет анимацию, которая будет использоваться.
1.1 Как будет выглядеть раскадровка и как она соотносится с фактическими цветами фона кнопки 1.2 Как можно добавить задержку к началу раскадровки (чтобы она запускалась только после периода бездействия (т. Е. Без нажатия на кнопку) 2. Каким-то образом добавьте триггер для запуска раскадровки. как это сделать для нормального состояния кнопки.

 <Style x:Key="ContinueButton" TargetType="{x:Type Button}">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="0" BorderBrush="{StaticResource ThemeSolidColorBrushGreen}" BorderThickness="2" Background="{StaticResource ThemeSolidColorBrushGreen}">

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.Foreground="White" 
                                          TextElement.FontSize="{Binding Source={StaticResource settingsProvider}, Path=Default.FontSizeParagraph}" TextElement.FontFamily="{Binding Source={StaticResource settingsProvider}, Path=Default.FontFamily}" TextElement.FontWeight="Bold"></ContentPresenter>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>

                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource ThemeSolidColorBrushGreen}">

                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  

Для достижения этой цели вы можете использовать EventTrigger. Просто замените ControlTemplate.Запустите раздел вашего кода следующим кодом

                           <ControlTemplate.Triggers>
                                <EventTrigger RoutedEvent="Button.MouseEnter">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation  Storyboard.TargetName="border" AutoReverse="True"  
                                                             Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                             To="Blue" RepeatBehavior="Forever" Duration="0:0:1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Background" TargetName="border" Value="GreenYellow"/>
                                </Trigger>
                                <!--<Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="border" Value="Gray"/>
                                </Trigger>-->
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                                </Trigger>

                            </ControlTemplate.Triggers>