I have an hotkey that flashes a prompt text over the UI and then disappears. But the issue is, my storyboard flashes only once in its lifetime which also means it fires the Completed event once.
When I press the hotkey, the grid that holds the TextBlock becomes visible, but the animation no longer plays and the completed no longer fires.
I need those to work so that each time the grid becomes visible, the animation restarts from the start and then fires the completed event which will set the visibility of the grid to false.
Here is the code:
<Grid Visibility="{Binding InfoTextVisible, ElementName=MyMainWindow}">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard Completed="InfoTextAnimation_Completed" FillBehavior="Stop">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Duration="0:0:1" Completed="DoubleAnimationUsingKeyFrames_Completed">
<SplineDoubleKeyFrame KeyTime="0:0:00.00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:01.00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:01.50" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<TextBlock Text="{Binding InfoText, ElementName=MyMainWindow}" Name="timoti" Foreground="White" FontSize="50" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
New code:
<Grid Visibility="{Binding InfoTextVisible, ElementName=MyMainWindow}">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard x:Name="SpinStoryboard">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Duration="0:0:1">
<SplineDoubleKeyFrame KeyTime="0:0:00.00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:01.00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:01.50" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:02.00" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="SpinStoryboard"></StopStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<TextBlock Text="{Binding InfoText, ElementName=MyMainWindow}" Name="timoti" Foreground="White" FontSize="50" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Related
Here is my XAML code.
<Window x:Class="TestWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestWpf"
mc:Ignorable="d"
Title="MainWindow" Height="320" Width="340">
<Window.Resources>
<QuadraticEase x:Key="easing" EasingMode="EaseOut"/>
</Window.Resources>
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Name="label"/>
<Button Content="Hello" Width="100" Height="45">
<Button.Style>
<Style TargetType="Button">
<Style.Resources>
<Storyboard x:Key="press" x:Name="press">
<DoubleAnimation Storyboard.TargetProperty="Width" To="125" Duration="0:0:0.100" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="50" Duration="0:0:0.100" EasingFunction="{StaticResource easing}"/>
</Storyboard>
<Storyboard x:Key="hover" x:Name="hover">
<DoubleAnimation Storyboard.TargetProperty="Width" To="120" Duration="0:0:0.200" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.200" EasingFunction="{StaticResource easing}"/>
</Storyboard>
<Storyboard x:Key="leave" x:Name="leave">
<DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.300" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.300" EasingFunction="{StaticResource easing}"/>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource press}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource hover}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource hover}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource leave}"/>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</Grid>
</Window>
You can see that I specified a style for the button, and added some triggers that can do some animation when I move the mouse or click the mouse button.
When I move my mouse to the button, the button size turns 120x45. But when I pressed the mouse button after that, nothing happened.
What I want:
Button default size is 100x45
When the mouse is hovering, the button size will change to 120x45 (width increased by 20) through animation, and when not hovering, the size will be restored
When the mouse is pressed, the size will change to 125x50 through animation (the width and height increase by 5), and when the mouse is released, the size will restore
even if I add StopStoryboard before BeginStoryboard, it will throw an exception that the Storyboard cannot be found.
I ran your XAML with these changes and everything works fine for me:
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Label x:Name="label" Content="LABEL"/>
<Button Content="Hello" Width="100" Height="45">
<Button.Style>
<Style TargetType="Button">
<Style.Resources>
<Storyboard x:Key="press" x:Name="press">
<DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.100" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="100" Duration="0:0:0.100" EasingFunction="{StaticResource easing}"/>
</Storyboard>
<Storyboard x:Key="hover" x:Name="hover">
<DoubleAnimation Storyboard.TargetProperty="Width" To="120" Duration="0:0:0.200" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.200" EasingFunction="{StaticResource easing}"/>
</Storyboard>
<Storyboard x:Key="leave" x:Name="leave">
<DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.300" EasingFunction="{StaticResource easing}"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.300" EasingFunction="{StaticResource easing}"/>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="IsMouseOverTrue"/>
<BeginStoryboard Storyboard="{StaticResource press}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource hover}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="IsMouseOverTrue" Storyboard="{StaticResource hover}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource leave}"/>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
How to display a blinking notification message over parts of the main window of an application, while keeping the controls below of the overlay reachable (clickable) if the overlay is turned off?
The easy part is to create the overlay and build a storyboard for the animation:
<Window.Resources>
<Style x:Key="ds_NotificationStyle" TargetType="DockPanel">
<Setter Property="Opacity" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding EnableNotification}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="ds_BeginCallNotification">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.4" Duration="0:0:0.4" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="ds_BeginCallNotification" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Further below in the XAML, the overlay elements (there is a grid populated with other elements and the following DockPanel is placed above of them):
<DockPanel Grid.RowSpan="2" Name="ds_NotificationPanel" Style="{StaticResource ds_NotificationStyle}" Panel.ZIndex="200" Background="AntiqueWhite" Height="100" VerticalAlignment="top">
<Viewbox>
<TextBlock Text="{Binding IncomingCallNotification}" Margin="5" Foreground="Brown" FontWeight="Bold" />
</Viewbox>
</DockPanel>
But there is a problem now with the overlay, blocking all the controls underneath of it.
To solve this, the DockPanel's visibility has to be set to Collapsed. But how to adjust this visibility before and after the animation?
Toggle the visibility at the beginning, using an animation that targets runtime zero of the storyboard:
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
But at the same location, I had no idea how to reset the visibility back to Collapsed.
Using another Storyboard that is run at the ExitActions trigger solved this issue:
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
Here is the complete solution (the DockPanel elements arent' changed):
<Window.Resources>
<Style x:Key="ds_NotificationStyle" TargetType="DockPanel">
<Setter Property="Opacity" Value="0" />
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding EnableNotification}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="ds_BeginCallNotification">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.4" Duration="0:0:0.4" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="ds_BeginCallNotification" />
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:00.2" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
This may be easy and obvious for many of you, but it took me some times to figure it out. As I would have been grateful for such an answer, I have posted my solution here.
I made a Control Template which it's target type if button.
Tow of it's event triggers is belong to the IsEnable and IsnotEnable property. when the control template is enable I made the opacity 100% and when its not I made the opacity go down to 40%.
in my GUI Window I defined a new button like this:
<Button x:Name="JoinB"
IsEnabled="{Binding Path=GroupStatus,Converter={StaticResource EnableConverter}}"
Template="{DynamicResource JoinButtonStyle}" />
EnableConverter is a simple Converter that return true or false.
The converter is working. My button does get not enable but the opacity doesn't change.
If i define my button like this (without the converter):
<Button x:Name="JoinB" IsEnabled="false"
Template="{DynamicResource JoinButtonStyle}" />
the opacity does change.
Do you have any idea what I am doing wrong?
JoinButtonStyle Code:
<ControlTemplate x:Key="JoinButtonStyle" TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="8"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF00BC02"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnPreviewMouseLeftButtonDown1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.7"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.7"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnPreviewMouseLeftButtonUp1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="onNotEnabled">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0.4"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="onEnabled">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#00000000">
<Rectangle x:Name="rectangle" HorizontalAlignment="center" VerticalAlignment="center" Height="30" Width="90" RadiusX="15" RadiusY="15" StrokeThickness="1" Stroke="#FF58A6FD">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="2" ShadowDepth="0" Color="#FF58A6FD"/>
</Rectangle.Effect>
</Rectangle>
<Label x:Name="label" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#FF58A6FD" Content="Join"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
<BeginStoryboard x:Name="OnPreviewMouseLeftButtonUp1_BeginStoryboard" Storyboard="{StaticResource OnPreviewMouseLeftButtonUp1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
<BeginStoryboard x:Name="OnPreviewMouseLeftButtonDown1_BeginStoryboard" Storyboard="{StaticResource OnPreviewMouseLeftButtonDown1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard1" Storyboard="{StaticResource onNotEnabled}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="onEnabled_BeginStoryboard" Storyboard="{StaticResource onEnabled}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
converter code:
public class EnableToGroupStatusConverter:IValueConverter
{
#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if ((ClientManager.DateGroupInfo.GroupStatusType)value == ClientManager.DateGroupInfo.GroupStatusType.CLOSED)
{
return false;
}
else
{
return true;
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
}
Instead of having two different Trigger for enabled/disabled state as you currently do
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource onNotEnabled}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource onEnabled}"/>
</Trigger.EnterActions>
</Trigger>
combine them into one Trigger with EnterActions/ExitActions
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource onNotEnabled}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource onEnabled}"/>
</Trigger.ExitActions>
</Trigger>
I have a button on which I am adding 2 images. Later on I have to put animation on these images of button.
In below Xaml code I am using button template but after applying the templates button original behavior is lost like there is no border, no change on mouse cursor when hover etc. It is just apear as plan image.
How can I put back the button default behaviour?
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" Click="buttonStart_Click" HorizontalAlignment="Right" Width="133" >
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid>
<Image x:Name="Normal" Source="/TFSCheckinReportGenerator;component/Resource/generate.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="/TFSCheckinReportGenerator;component/Resource/waiting.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
</ControlTemplate>
</Button.Template>
</Button>
Instead of Template and ControlTemplate use ContentTemplate and DataTemplate and it will helps to show button original behavior like border and change button appearance on mouse hover etc.
Template defines the appearance of the control. ContentTemplate specifies how the content contained in/displayed by a ContentControl is to be displayed.
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" HorizontalAlignment="Right" Width="133" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Image x:Name="Normal" Source="catalogscreen.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="catalogscreen.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<DataTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
</DataTemplate>
</Button.ContentTemplate>
</Button>
How do I conditionally get this animation to run, depending on a bool CanAnimate? It works right now, but I don't always want it to be animated, I want to check the boolean.
<Border BorderBrush="Black" BorderThickness="2" Margin="1" Name="ReviewNote">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ReviewNote"
Storyboard.TargetProperty="(Border.Opacity)"
From="1.0" To="0.0" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock Text="{x:Static Constants:StringConstants.ReviewNote}"
Background="{StaticResource ReviewNoteColor}" Width="100"
TextAlignment="Center" />
</Border>
Apply style on your border and inside style you can check value of bool property. Based on that property you can specify DataTrigger.EnterActions with storyboard after removing TargetName from storyBoard.
This will work -
<Border BorderBrush="Black" BorderThickness="2" Margin="1" Name="ReviewNote">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding CanAnimate}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Border.Opacity)"
From="1.0" To="0.0" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock/>
</Border>