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>
Related
I am designing a ListView and I want to change its border color when it is focused, IsFocused property dosen't seem to work for ListView. Is there any property similar to IsFocused for Listview?
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource EnabledListViewBorder}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Border"
Background="Transparent"
Padding="{TemplateBinding Padding}"
BorderBrush="{StaticResource EnabledListViewBorder}"
BorderThickness="1">
<ScrollViewer Style="{DynamicResource ListViewColumnHeaderScrollViewer}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I have updated the question with my Sourcecode with the solution provided but the Border Color isn't changing. What am i missing here.
You can use Style.Triggers to handle GotFocus and LostFocus events.
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
Update:
If you have rewritten the ControlTemplate, then delete Style.Triggers part and move EventTriggers from it to the ControlTemplate.Triggers. Additionally you have to set Storyboard.TargetName="Border".
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1" Storyboard.TargetName="Border" >
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
For ListBox IsFocused not working because focus goes to ItemsPresenter that contains ListBoxItems. So focus go to ItemsPresenter that is inside the ListBox. I got workaround that you subscribe event MouseDown and inside it do Focus for ListView, then the trigger starts working.
Let me know if it works for you
I'm trying to make a MultiTrigger condition but I need change this condition based on the TextBlock Tag, if the Tag=0 run the first trigger and if Tag=1 run the another one. But in my code if the trigger condition where the Tag=0 ran and thereafter the Tag is changed to 1 the other trigger won't run.
I'm using this code:
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="#FF333333"/>
<Setter Property="Foreground" Value="#FFBEBEBE"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Tag" Value="0"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.300" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="Black" Duration="0:0:0.300" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FFF0F2F3" Duration="0:0:0.300" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="Black" Duration="0:0:0.300" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Tag" Value="1"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#222222" Duration="0:0:0.300" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#FFFFFF" Duration="0:0:0.300" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF333333" Duration="0:0:0.300" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#FFBEBEBE" Duration="0:0:0.300" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</Style.Triggers>
</Style>
Some one knows what is wrong with this code? Or maybe it's possible.
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>
I have an image which when pressed by user, the opacity will fade until value 0. But the effect only continues if user press and hold the image. Is there a possible way to change the code to: When user press, and without holding the press, the opacity fading effect will stay? I wish to do it in XAML.
<EventTrigger RoutedEvent="Button.Click" SourceName="press">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource showA}"/>
</EventTrigger.Actions>
</EventTrigger>
<Button Grid.Column="5" Command="{Binding Path=PressC}" CommandParameter="dot" Style="{StaticResource TransparentButton}">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="image5" Source="/W;component/Images/t.png" Height="100" />
<Image Name="pressed5" Source="/W;component/Images/T.png" Height="100" Width="200" Margin="-23,-136,-21,0" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="pressed5" Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Setter Property="Panel.ZIndex" Value="999"/>
<Setter TargetName="pressed5" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Can you show your full xaml? Because Image does not have IsPressed property and it is not clear how it works for you.
Similar code for button works as expected:
<Button Background="Aquamarine">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
And for Image it works too with EventTrigger:
<Image Source="d:\123.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
I have multiple storyboards that access the same property (not at the same time). After one storyboard changed the property, the other one seems to have no access to it and does not change anything.. What can I do against this?
Sample:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="#3e8bff" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
</ListBox>
This is the smallest sample code I could make. After you've hovered an item, it won't turn blue when it's selected (try to click on one item and then use the arrow keys to select items without hovering them).
I have a solution!!! Triggers and actions order does matter... the answer is not to play more then one storyboard at the same time, just stop other.
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="Selector.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="SelectedBegin" />
<StopStoryboard BeginStoryboardName="UnselectBegin" />
<BeginStoryboard x:Name="EnterBegin" Storyboard="{StaticResource MouseEnterSb}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="LeaveBegin" Storyboard="{StaticResource MouseLeaveSb}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="Selector.IsSelected" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="LeaveBegin" />
<StopStoryboard BeginStoryboardName="EnterBegin" />
<BeginStoryboard x:Name="SelectedBegin" Storyboard="{StaticResource SelectedSb}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="UnselectBegin" Storyboard="{StaticResource UnselectSb}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
I've been able to reproduce your erroneous results using the following code (I'm stumped too):
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="BorderAnimationToRed">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToBlue">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Blue" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToOrange">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToWhite">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</ControlTemplate.Resources>
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToOrange}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToBlue}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
This code is a little easier to read, as the visuals, resources, and triggers are declared separately. Maybe you could try to use EventTriggers to accomplish your goal (using the "ListBoxItem.MouseEnter" and "ListBoxItem.MouseLeave" routed events). Good luck!