I would like to set my databound property IsFlashing to False when my animation completes.
<Border BorderThickness="1"
Height="15"
Width="20"
CornerRadius="2"
BorderBrush="Black"
DockPanel.Dock="Top"
Grid.Row="1" >
<Border.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsFlashing}" Value="True" x:Name="dataTrigger">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="Stop" RepeatBehavior="1x" x:Name="startStoryBoard">
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Duration="0:0:4" RepeatBehavior="1x">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.9" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<!-- how can I set my bound property "IsFlashing" to false when we exit here ? -->
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0" />
<GradientStop Color="#ADD8E6" Offset="0.9" />
<GradientStop Color="#8aacb8" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<TextBlock Foreground="Black" Text="{Binding Path=MarkerCode}" FontFamily="Segoe UI" FontSize="12" TextAlignment="Center" VerticalAlignment="Center">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="3" Color="White" />
</TextBlock.Effect>
</TextBlock>
</Border>
Listen to the Completed event of the ObjectAnimationUsingKeyFrames
ExitActions are what happens when the trigger condition is no longer met (in this case when IsFlashing returns to false), which is not the same the animation completing.
Related
For reference, I am using this MSDN tutorial: https://msdn.microsoft.com/en-us/library/bb613545(v=vs.100).aspx
I have finished the tutorial, and I simply wanted to change the Click EventTrigger animation from the 360 spin to a simple change of the LinearGradientBrush.
My GradientStopCollections as per the tutorial. One is an altered one that I want to use in the animation when I click the button
<GradientStopCollection x:Key="MyGlassGradientStopsResource">
<GradientStop Offset="0.2" Color="WhiteSmoke" />
<GradientStop Offset="0.4" Color="Transparent" />
<GradientStop Offset="0.5" Color="WhiteSmoke" />
<GradientStop Offset="0.75" Color="Transparent" />
<GradientStop Offset="0.9" Color="WhiteSmoke" />
<GradientStop Offset="1" Color="Transparent" />
</GradientStopCollection>
<GradientStopCollection x:Key="MyRedGlassGradientStopsResource">
<GradientStop Offset="0.2" Color="IndianRed" />
<GradientStop Offset="0.4" Color="Transparent" />
<GradientStop Offset="0.5" Color="IndianRed" />
<GradientStop Offset="0.75" Color="Transparent" />
<GradientStop Offset="0.9" Color="IndianRed" />
<GradientStop Offset="1" Color="Transparent" />
</GradientStopCollection>
<LinearGradientBrush x:Key="MyGlassBrushResource"
GradientStops="{StaticResource MyGlassGradientStopsResource}"
Opacity="0.75"
StartPoint="0,0"
EndPoint="1,1" />
<LinearGradientBrush x:Key="MyRedGlassBrushResource"
GradientStops="{StaticResource MyRedGlassGradientStopsResource}"
Opacity="0.75"
StartPoint="0,0"
EndPoint="1,1" />
The button itself. The rectangle being affected is the glassCube rectangle.
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
<Setter Property="Width" Value="90" />
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ClipToBounds="True">
<!-- Outer rectangle with rounded corners -->
<Rectangle x:Name="outerRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Transparent"
RadiusX="20"
RadiusY="20"
Stroke="{TemplateBinding Background}"
StrokeThickness="5" />
<!-- Inner rectangle with rouded corners -->
<Rectangle x:Name="innerRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{TemplateBinding Background}"
RadiusX="20"
RadiusY="20"
Stroke="Transparent"
StrokeThickness="20" />
<!-- Glass Rectangle -->
<Rectangle x:Name="glassCube"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{StaticResource MyGlassBrushResource}"
Opacity="0"
RadiusX="10"
RadiusY="10"
RenderTransformOrigin="0.5,0.5"
StrokeThickness="2">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="LightBlue" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>
<!--
These tranforms have no effect as they are declared here.
The reason the transforms are included is to be targets for animation
(See later)
-->
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<RotateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
<!-- A BevelBitmapEffect if applied to give the button a "Bevelled" look -->
<Rectangle.BitmapEffect>
<BevelBitmapEffect />
</Rectangle.BitmapEffect>
</Rectangle>
<!-- Present content (text) of the button -->
<DockPanel Name="myContentPresenterDockPanel">
<ContentPresenter x:Name="myContentPresenter"
Margin="20"
Content="{TemplateBinding Content}"
TextBlock.Foreground="Black" />
</DockPanel>
</Grid>
</ControlTemplate>
<!---Snipped the triggers-->
</Setter.Value>
And this is the trigger I am trying to use to change the Fill of the glassCube rectangle from the MyGlassGradientStopsResource brush to the MyGlassGradientStopsResource brush.
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5"
Storyboard.TargetName="glassCube"
Storyboard.TargetProperty="Rectangle.Fill"
To="{StaticResource MyRedGlassBrushResource}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
However, trying to do this gives me an XAMLParseException. The error in the error list shows as An object of the type "System.Windows.Media.LinearGradientBrush" cannot be applied to a property that expects the type "System.Nullable`1[[System.Windows.Media.Color, PresentationCore, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35]]".
Any idea what I might be doing wrong? I've tried finding out how to change a Fill to a different LinearGradientBrush in an EventTrigger, but to no avail. I may just suck at wording my searches, or at searching in general. Any help is greatly appreciated
I did some modification of your style. Also, i fixed your Storyboard.
It should now work properly.
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
<Setter Property="Width" Value="90" />
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" RadiusX="20" RadiusY="20" Stroke="{TemplateBinding Background}" StrokeThickness="5" />
<Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" Stroke="Transparent" StrokeThickness="20" />
<Rectangle x:Name="glassCube" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="1" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" StrokeThickness="2">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="{StaticResource MyGlassBrushResource}"></Setter>
</Style>
</Rectangle.Style>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="LightBlue" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<RotateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
<!-- A BevelBitmapEffect if applied to give the button a "Bevelled" look -->
<Rectangle.BitmapEffect>
<BevelBitmapEffect />
</Rectangle.BitmapEffect>
</Rectangle>
<!-- Present content (text) of the button -->
<DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center">
<ContentPresenter x:Name="myContentPresenter" Content="{TemplateBinding Content}" TextBlock.Foreground="Black" />
</DockPanel>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="glassCube" Storyboard.TargetProperty="Fill" Duration="0:0:0.5" BeginTime="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource MyRedGlassBrushResource}" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Note
You cannot set a Brush as ColorAnimation. Use a ObjectAnimationUsingKeyFrames instead. If you still need a BrushAnimation, have a look here
I have a Button with ControlTemplate:
<Page.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
<Border.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="LimeGreen"></GradientStop>
<GradientStop Offset="1" Color="LightBlue"></GradientStop>
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Page.Resources>
<Button Margin="10" Width="110" Padding="5" Height="30"
Template="{StaticResource ButtonTemplate}">Test</Button>
Now I want to change of border color when mouse pointer over the button.
Here is my version:
<Page.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Border x:Name="Border" BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
<Border.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="LimeGreen"></GradientStop>
<GradientStop Offset="1" Color="LightBlue"></GradientStop>
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
<VisualStateManager>
<VisualStateGroup>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager>
</ControlTemplate>
</Page.Resources>
But it returns too many errors. For example, "Property VisualTree can be defined only one time". How can I fix it?
You get the error because ControlTemplate has 2 root elements Border and VisualStateManager. Instead of VisualStateManager you need to set VisualStateManager.VisualStateGroupsand it needs to be set against root element of the ControlTemplate so either move it into Border or create, for example, Grid around both Border and VisualStateManager.VisualStateGroups
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Grid>
<Border x:Name="Border" BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
<Border.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="LimeGreen"/>
<GradientStop Offset="1" Color="LightBlue"/>
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
I am trying to put an animation on a border as follows
<LinearGradientBrush x:Key="RedButtonBrushUp" StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="#ffaaaa" Offset="0"/>
<GradientStop Color="#cc6666" Offset="0.6"/>
<GradientStop Color="#bb2222" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonBrushUp" StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="#aaccff" Offset="0"/>
<GradientStop Color="#7799ff" Offset="0.6"/>
<GradientStop Color="#555599" Offset="1"/>
</LinearGradientBrush>
<Border x:Name="BorderUp" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" Background="{StaticResource RedButtonBrushUp}">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="BorderUp"
Storyboard.TargetProperty="Background"
RepeatBehavior="Forever"
AutoReverse="True"
To="{StaticResource ButtonBrushUp}"
Duration="0:0:0.5" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
But it says {StaticResource ButtonBrushUp} is an invalid type for this. What am I doing wrong?
The To can't accept such a change needed for the gradient brush stops.
Here is a working example of what you are trying to do
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="myBorder">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FFC53838"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="myBorder">
<BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<StackPanel x:Name="stackPanel" Orientation="Vertical" HorizontalAlignment="Center">
<Border x:Name="myBorder" Background="#99FFFFFF" BorderThickness="3"
Margin="0,60,0,20" Padding="20" >
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<TextBlock>
This example shows how to have a border change color after an initial load.
</TextBlock>
</Border>
</StackPanel>
I want an animation to be launched when MyObject.IsGlowing = true so I did this (I'm in a <DataTemplate> if that can help)
<Ellipse Width="100" Height="100" Name="MyEllipse">
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.5" Color="red" />
<GradientStop Offset="1" Color="red"/>
</RadialGradientBrush >
</Ellipse.Fill>
<Ellipse.Triggers>
<DataTrigger Binding="{Binding Source=IsGlowing}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="MyBeginStoryBoard">
<Storyboard Name="MyStoryBoard" >
//Animation
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Ellipse.Triggers>
</Ellipse>
but I got this error "Triggers collection members must be of type EventTrigger" so I changed it to
<Ellipse Width="100" Height="100" Name="MyEllipse">
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.5" Color="red" />
<GradientStop Offset="1" Color="red"/>
</RadialGradientBrush >
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="?">
<BeginStoryboard Name="MyBeginStoryBoard">
<Storyboard Name="MyStoryBoard" >
//Animation
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
But i have no idea what to put in RoutedEvent...
You aren't allowed DataTriggers to be directly used/specified within an elements Triggers collection. However, you can use a Style to apply one.
http://www.thejoyofcode.com/Help_Why_cant_I_use_DataTriggers_with_controls_in_WPF.aspx
I have a LinearGradientBrush used as an OpacityMask and I want my animation to rotate the gradient, so I'm trying to animate the position of the StartPoint and EndPoint but I can't make it work for hours :(
<Style x:Key="NewContentStyle" TargetType="ContentPresenter">
<Setter Property="OpacityMask">
<Setter.Value>
<LinearGradientBrush x:Name="FillGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Storyboard x:Key="NewContentStoryboard">
<PointAnimation Storyboard.TargetProperty="StartPoint" Storyboard.TargetName="FillGradient" From="0.5 0" To="0 0.5" Duration="00:00:1" />
<PointAnimation Storyboard.TargetProperty="EndPoint" Storyboard.TargetName="FillGradient" From="1 0.5" To="0 0.5" Duration="00:00:1"/>
</Storyboard>
I get an error "'FillGradient' name cannot be found in the name scope of 'System.Windows.Controls.ContentPresenter'."
Please try this:
<Storyboard x:Key="NewContentStoryboard">
<PointAnimation Storyboard.TargetProperty="OpacityMask.(LinearGradientBrush.StartPoint)" From="0.5 0" To="0 0.5" Duration="00:00:1" />
<PointAnimation Storyboard.TargetProperty="OpacityMask.(LinearGradientBrush.EndPoint)" From="1 0.5" To="0 0.5" Duration="00:00:1"/>
</Storyboard>