In my application I have a lot of very large DataGridTemplateColumn-Definitions. For each column I'm defining a style. The style for example of two columns looks like:
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
<Setter Property="IsEditing"
Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.VariantPath}}" />
<Setter Property="BorderBrush" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.VariantPath}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="VariantPath"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
-
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
<Setter Property="IsEditing"
Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.OriginalPath}}" />
<Setter Property="BorderBrush" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.OriginalPath}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="OriginalPath"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
I was wondering if there is a way to extract the Storyboard into a style or resource or something else. Because this is the part of the style which is always the same for each DataGridTemplateColumn
How about this:
<Application.Resources>
<Storyboard x:Key="SB_Height" x:Shared="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="{DynamicResource AnimationTarget}">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Application.Resources>
<Button Name="mybutton" Content="Test" Height="20">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource SB_Height}"/>
</EventTrigger>
</Button.Triggers>
</Button>
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>
I'm actually overriding the default ControlTemplate of the TextBox and in order to do what I want, I need to trigger two animations when the TextBox loose the focus and it's text is empty. In order to do that I'm using a MultiTrigger with two conditions like this:
(I'll use an animation on the FontSize for the example)
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="FontSize" From="9" To="120" Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
The thing is that, the animation is triggered at the TextBox instantiation because the TextBox is not focused and the Text is empty.
So we can say that the animation and the MultiTrigger are working, but when I focus the TextBox once (the GotFocus resets the FontSize), on the LostFocus the animation is not triggered anymore.
BUT if I replace the whole MultiTrigger.EnterActions by this:
<MultiTrigger.Setters>
<Setter Property="Background" Value="Red"/>
</MultiTrigger.Setters>
Everything is working like a charm. I mean that the background is red at the begining, white on the GotFocus and red again on the LostFocus.
I might by misunderstanding the way we have to use the EnterActions but there's not that much documentation on MultiTriggers out there. Do you know why the animation isn't triggered anymore after the first time?
And by the way, is there a better way than Value="{x:Static sys:String.Empty}"to check if the Text property is empty?
EDIT :
In my ControlTemplate.Triggers I'm already using two EventTriggers, one is routed to the GotFocus event and the other one to the LostFocus event.
I saw on the MSDN that EnterActions does not apply to the EventTrigger, so I tried to get rid of both of my EventTriggers and now it works.
The thing is that I used a MultiTrigger because I needed to check if the Text was empty on the LostFocus but may be there is a way to put that condition in an EventTrigger?
EDIT #2:
AS #Satish Pai asked, here is the full ControlTemplate in which I replaced the EventTriggers by a MutliTrigger because, as I said, they seems to be incompatible.
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="14"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="Title" Text="{TemplateBinding ToolTip}" Margin="8,14,0,0" Grid.Row="0" Grid.RowSpan="2" Foreground="{StaticResource TextBox.Static.Border}"></TextBlock>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Grid.Row="1"/>
<Rectangle x:Name="UnfocusedUnderLine" Fill="{StaticResource TextBox.Static.Border}" Height="6" Margin="0,1,0,0" Grid.Row="2"/>
<Rectangle x:Name="UnderLine" Fill="{StaticResource TextBox.Focus.Border}" Height="6" Margin="0,1,0,0" Grid.Row="2" Width="0"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<MultiTrigger x:Name="FocusChanged">
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions> <!--GotFocus-->
<BeginStoryboard>
<Storyboard>
<!--Change UnderLine Color-->
<DoubleAnimation Storyboard.TargetName="UnderLine" Storyboard.TargetProperty="Width" From="0" To="500" Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!--Move Title Up-->
<ThicknessAnimation From="8,14,0,0" To="0,0,0,0" Duration="0:0:0.25" Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<!--Decrease Title Size-->
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
From="12"
To="9"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions> <!--LostFocus-->
<BeginStoryboard>
<Storyboard>
<!--Change UnderLine Color-->
<DoubleAnimation Storyboard.TargetName="UnderLine"
Storyboard.TargetProperty="Width"
From="500"
To="0"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger x:Name="LostFocusAndEmptyText">
<MultiTrigger.Conditions>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--Move Title Down-->
<ThicknessAnimation From="0,0,0,0" To="8,14,0,0" Duration="0:0:0.2" Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<!--Increase Title Size-->
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
From="9"
To="12"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<!--LostFocusWithEmptyText-->
</ControlTemplate.Triggers>
</ControlTemplate>
The thing is that both of the MultiTiggers are referring to the same IsFocused property and they don't wanna work together. If I delete the LostFocusAndEmptyText trigger it works, but I really need to differentiate the case where I loose the focus with an empty text and without.
Any suggestion on how to achieve that?
Chage your TiTle TextBlock init state. Marging="0,0,0,0" FontSize = "9"
<TextBlock x:Name="Title" Text="{TemplateBinding ToolTip}" FontSize="9" Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="2"
use Animation's property 'FillBehavior' set to "Stop". and
remove animation's property 'From' in EventTrigger.
good luck!
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation To="0,0,0,0" Duration="0:0:0.25"
Storyboard.TargetName="Title" FillBehavior="Stop"
Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize" FillBehavior="Stop"
To="9"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<MultiTrigger x:Name="LostFocusAndEmptyText">
<MultiTrigger.Conditions>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="Title" Property="FontSize" Value="12"/>
<Setter TargetName="Title" Property="Margin" Value="8,14,0,0"/>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation From="0,0,0,0" To="8,14,0,0" Duration="0:0:0.25"
FillBehavior="Stop"
Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin"
AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
FillBehavior="Stop"
To="12" From="9"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
</ControlTemplate.Triggers>
I am attempting to animate the background colour of a label on the data change of a property. The label is changing colour up to the value of 3. however if the property returns to a value of 1, the animation stays on the previous colour. My XAML is below.
<Style x:Key="Colors" TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="2">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Yellow"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="3">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Label XAML
<Label x:Name="vClock" Content="{Binding Path=Clock,Mode=OneWay}" FontSize="25" Style="{StaticResource Colors}">
</Label>
I think you need to remove the other active storyboard first, but it's is better to proceed declaring your storyboard in the resources:
<Storyboard x:key="Value 1">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
<Storyboard x:key="Value 2">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Yellow"/>
</Storyboard>
<Storyboard x:key="Value 3">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green"/>
</Storyboard>
then look at the datatrigger
<Style x:Key="Colors" TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="1">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Value2" />
<StopStoryboard BeginStoryboardName="Value3" />
<BeginStoryboard Storyboard="{StaticResource Value1}"
x:Name="Value1" />
</DataTrigger.EnterActions>
</DataTrigger>
...
</Style.Triggers>
</Style>
Do the same for all the triggers
The default "Grid" is displayed.
In step one and "Hide_MouseUp", animation works.
And then in no way responds to IsEnabled.
Please Please help me to solve this problem.
I am waiting for your warm response :)
style:
<Style x:Key="ShowHideVisibilityStyle" TargetType="{x:Type Grid}">
<Setter Property="Opacity" Value="1"></Setter>
<Setter Property="Margin" Value="0,50,0,0"></Setter>
<Setter Property="IsEnabled" Value="True" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.5" />
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
From="-600,50,0,0"
To="0,50,0,0"
Duration="0:0:0.1"
/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:0.5" />
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
BeginTime="0:0:0.5"
To="-600,50,0,0"
Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
XAML:
<Grid x:Name="SettingPage" Width="290" Style="{DynamicResource ShowHideVisibilityStyle}">
<!-- code -->
</Grid>
Code Test For Change status IsEnabled to {False or True}
private void Hide_MouseUp(object sender, MouseButtonEventArgs e){
SettingPage.IsEnabled = false;
}
private void Show_MouseUp(object sender, MouseButtonEventArgs e){
SettingPage.IsEnabled = true;
}
Hi, I find the solution :)
for using two triggers on one property "Trigger.EnterActions" and "Trigger.ExitActions" should be used instead of using two separate Triggers
excuse me for my bad english :D
Code:
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Animation -->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Animation -->
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
It's a simple fix. Just move the "Enabling" Animation into an ExitTrigger:
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:0.5" />
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
BeginTime="0:0:0.5"
To="-600,50,0,0"
Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.5" />
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
From="-600,50,0,0"
To="0,50,0,0"
Duration="0:0:0.1"
/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
I have the following xaml
<DataGrid Name ="TheGrid" Margin="0,21,0,0" DataContext ="{Binding StreamItems}" ItemsSource="{Binding}" CanUserReorderColumns="True" CanUserResizeColumns="True"
CanUserResizeRows="False" CanUserSortColumns="True" AutoGenerateColumns="False" RowHeight="21">
<DataGrid.Resources>
<Style TargetType="DataGridCell" x:Key="FlashStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentState}" Value="Idle" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="BlinkIdle" >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="DarkOrchid" KeyTime="0:0:0" />
<DiscreteColorKeyFrame Value="DarkOrchid" KeyTime="0:0:5" />
<LinearColorKeyFrame Value="Transparent" KeyTime="0:0:8" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding CurrentState}" Value="Streaming" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="BlinkStreaming">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="DarkGreen" KeyTime="0:0:0" />
<DiscreteColorKeyFrame Value="DarkGreen" KeyTime="0:0:5" />
<LinearColorKeyFrame Value="Transparent" KeyTime="0:0:8" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
The problem i'm having, is when i scroll, or the user sorts columns, the animation is triggers. how do i tell the animation to trigger only once, when the data changes?