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.

回答1:

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>

回答2:

Try this-

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

回答3:

Both TM Rocket and Vishal answer are correct but probably the following is the most correct and clean way to do it

<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.ExitActions>
            <RemoveStoryboard BeginStoryboardName="StartBlinking"/>
        </DataTrigger.ExitActions>
      </DataTrigger>
    </Style.Triggers>
  </Style>
</Window.Resources>

来源：https://stackoverflow.com/questions/18009572/button-blinking-on-datatrigger

标签

wpf

xaml

button

storyboard

datatrigger