Search code examples
wpfxamlbuttonstoryboarddatatrigger

Button blinking on Datatrigger


I would like to have a button that blinks/animate when triggered by DataTrigger. I want to animate the button's background. Below is my xaml code.

<Window.Resources>
    <Style x:Key="ButtonStyle"  TargetType="{x:Type Button}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.Notification}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Name="StartBlinking">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="Forever" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.Notification}" Value="False">
                <DataTrigger.EnterActions>
                    <RemoveStoryboard BeginStoryboardName="StartBlinking"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</Window.Resources>
<Grid>
    <Grid>
        <Button x:Name="Button" Content="Button" Width="25" Height="25" Margin="158,62,320,224" Click="Button_Click"></Button>
        <Button Style="{StaticResource ButtonStyle}" Content="Button" Focusable="False" Height="75" HorizontalAlignment="Left" Margin="23,146,0,0" Name="btnImgBrush" VerticalAlignment="Top" Width="160"></Button>

    </Grid>
</Grid>

Here are the back end code:

public Boolean Notification
    {
        get { return new_notification; }

        set 
        {
            new_notification = value;
            RaisePropertyChanged("Notification");
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (Notification)
        {
            Notification = false;
        }
        else
        {
            Notification = true;
        }
    }

But, it didn't work. Any ideas why it didn't work?

Any help is greatly appreciated, Thanks.


Solution

  • At last its working. Thanks :)

    <Window.Resources>
    <Style x:Key="ButtonStyle"  TargetType="{x:Type Button}">
      <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="Transparent"/>
                </Setter.Value>
            </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.Notification}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Name="StartBlinking">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="Forever" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.Notification}" Value="False">
                <DataTrigger.EnterActions>
                    <RemoveStoryboard BeginStoryboardName="StartBlinking"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>