Develop Reference

WPF MultiDataTrigger on Tag property only firing once

I have a situation where I need to select which animation to play on an event trigger based on a selection property. There are two events which always fire in the order A then B.
The solution I've come up with is to use the EventTrigger for A to set the Tag property of the element to 1, on the EvenTrigger for B I set it back to 0. I then have multiple MultiDataTriggers in the element style which have conditions to match on the Tag property value and the selection property, these trigger the corresponding animation.
This all works fine the first-time round, A triggers the first animation, B the second. However, when event A fires again for a second time the MultiDataTrigger no longer seems to trigger. To add to the confusion the animation for B continues to work. So long as the events alternate between A and B the event B animation will play, but not the event A one.
<Window x:Class="WpfTriggerTest.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:WpfTriggerTest"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid x:Name="rootLayout">
<local:TestElement x:Name="testElement">
<local:TestElement.Resources>
<Storyboard x:Key="TriggerA">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Tag" Duration="0:0:0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" >
<DiscreteObjectKeyFrame.Value>
<sys:Int32>1</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="TriggerB">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Tag" Duration="0:0:0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" >
<DiscreteObjectKeyFrame.Value>
<sys:Int32>0</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="AnimA">
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference rootLayout}" Storyboard.TargetProperty="Background" Duration="0:0:0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="AnimB">
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference rootLayout}" Storyboard.TargetProperty="Background" Duration="0:0:0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Green" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</local:TestElement.Resources>
<local:TestElement.Triggers>
<EventTrigger RoutedEvent="local:TestElement.TriggerA">
<BeginStoryboard Storyboard="{StaticResource TriggerA}" />
</EventTrigger>
<EventTrigger RoutedEvent="local:TestElement.TriggerB">
<BeginStoryboard Storyboard="{StaticResource TriggerB}" />
</EventTrigger>
</local:TestElement.Triggers>
<local:TestElement.Style>
<Style TargetType="{x:Type local:TestElement}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" Value="1" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource AnimA}" />
</MultiDataTrigger.EnterActions>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" Value="0" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource AnimB}" />
</MultiDataTrigger.EnterActions>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</local:TestElement.Style>
</local:TestElement>
<Button Content="TriggerA" HorizontalAlignment="Left" Margin="51,45,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click" />
<Button Content="TriggerB" HorizontalAlignment="Left" Margin="143,45,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
</Grid>
</Window>
The code posted has been simplified, I removed the second condition from the MultiDataTrigger as it does not effect the issue at hand.
I've monitored the Tag property value and it is correctly getting set to 1 and 0 when the events fire. Why would the trigger only fire once? Or, is there a better approach to solve this problem?

I think the reason is that your storyboards keep running. You should stop the storyboard before running the other one.
Have a look at this answer: WPF Fade In / Out only runs once
On another matter I would say that using storyboards for setting a simple value is an overkill. Consider using an Attached Behaviour or TriggerAction.
See here for details and examples: Setting a property with an EventTrigger

The reason is that Tag's value did not change again.
It was '1' and then it was '1' again.
The Dependency Property does not run any call back if the value did not change.
I suggest before setting '1' set '0' which will do nothing and then set '1' for the actual Trigger.
Hope this helps

C# WPF Animated label content is not being shown

I am trying to animate the content of a label in order to do:
Loading
Loading.
Loading..
Loading...
again:
Loading
Loading.
Loading..
Loading...
and so on like in this example.
Below the code:
<Label Grid.Row="2" x:Name="CurrentTask"
FontFamily="Microsoft Sans Serif" FontSize="18" FontStyle="Italic" FontWeight="Bold"
Foreground="White" Content="Loading">
<Label.Template>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
</Label>
The problem is that label content is not visible in the wpf window. It is not being shown. What am I doing wrong?
Also in the lines of type:
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
Instead of hard-coding the value I would like to concatenate the label content to the dots, how can I do this? I do not want to repeat the "Loading" string in each DiscreteObjectKeyFrame.
UPDATE:
Instead of raise trigger on IsEnabled=True, I have used label.loaded as below for example in the case of applying label style:
<Label Grid.Row="2" x:Name="CurrentTask"
FontFamily="Microsoft Sans Serif" FontSize="18" FontStyle="Italic"
Foreground="White" Content="Loading">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>

Besides the Triggers, your ControlTemplate is empty, so obviously nothing is shown.
You could add a ContentPresenter, and also remove the Storyboard.TargetName. It looks also odd that your Trigger acts on IsEnabled set to false.
<Label.Template>
<ControlTemplate TargetType="Label">
<ContentPresenter/>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
However, what you actually might want to have is a Style Trigger instead of a ControlTemplate Trigger:
<Label ...>
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
For the repeated "Loading" string in the Content, just use two Labels, one with a fixed "Loading" string, the other with the dots, and adjust their Padding. Or better, two TextBlocks:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Loading"/>
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value=""/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value=".."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>

Adding data trigger to style trigger using Blend's interface, not through xaml code

I need some help from WPF blend wizards out there. This is more for knowledge sake as I can already implement a datatrigger in a style through explicitly changing xaml, but I would like to know if there is a way to do this through Blend.
Lets start with some code!
<Image x:Name="image" HorizontalAlignment="Center" Height="299" Margin="24,27,24,0" VerticalAlignment="Top" Width="832" RenderTransformOrigin="0.5,0.5" Source="img/SpiderLogo.png" d:IsHidden="True" Grid.RowSpan="2">
<Image.Style>
<Style>
<Style.Resources>
<Storyboard x:Key="LoadTitleScreen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding IsLoginValid, Source={StaticResource viewModel}}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource LoadTitleScreen}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
All is well and working here! Now after building another image and editing its style resource by:
1) right-clicking the image in "Objects and Timeline"
2) edit style
3) creating a style resource
I can create storyboards and the whole nine but cannot add an datatrigger to it through Blend's interface. I go to Assets Menu to drag a ChangePropertyAction onto the style but the entire Assets Menu is greyed out/non-functional.
<Image x:Name="titleBackgroundImage" HorizontalAlignment="Center" Height="610" VerticalAlignment="Center" Width="899" Source="img/RPVBackground.jpg" Stretch="Fill" Margin="-9,-10,-10,-50" Grid.RowSpan="2" Visibility="Collapsed" Style="{DynamicResource TitleScreenBackgroundImage}">
<Image.Resources>
<Style x:Key="TitleScreenBackgroundImage" TargetType="{x:Type Image}">
<Style.Resources>
<Storyboard x:Key="LoadTitleScreenBackground">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="{x:Null}">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="{x:Null}">
<DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
</Style>
</Image.Resources>
</Image>
This is what I'm stuck with, a nice storyboard created in the style resource but the inability to add a trigger to call it =(
Please help if you know how! Many thanks!

If it's just Triggers you want and the that window isn't immediately open by default you can hit;
Ctrl + ALT + R
...or select from the top menu View -> Triggers Window and manage your Triggers there.
As to why your Assets tab is grayed out, well that could be a few different reasons. Would need to know more to diagnose that one. First guess would be you're just missing SDK or something? Hope this helps.

WPF Popup follow mouse in DataTemplate

I'm fighting with making popup follow mouse within DataTemplate
I have following DataTemplate:
<DataTemplate>
<StackPanel x:Name="MyPanel">
<Popup x:Name="MyPopup" Visibility="Visible" AllowsTransparency="True" Placement="MousePoint">
something here
</Popup>
<controls1:ImageLoader x:Name="MyImage" Margin="10,10,0,0" Source="{Binding ImageUri}" Width="100" Height="100">
</controls1:ImageLoader>
</StackPanel>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="MyImage.MouseEnter" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.5">
<DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MyPanel.MouseLeave" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.01">
<DiscreteBooleanKeyFrame Value="False" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Right now popup is working : I mean it shows after 500ms and hides (almost correctly)
I'm trying to make a popup follows my mouse pointer while moving around MyImage control.
How to do it?

Two storyboards .. Same event .. Same property

How to change respectively between two storyboards within the same ex. MouseDown event or button Click event targeting same property ex. visibility.
1st click -> Visibility from 1 to 0 ( Fade Out )
2nd click -> Visibility from 0 to 1 ( Fade In )
3rd click -> Visibility from 1 to 0 ( Fade Out )
4th click -> Visibility from 0 to 1 ( Fade In )
and so on ...
Fade In
<Style TargetType="{x:Type FrameworkElement}" x:Key="FadeIn">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Fade Out
<Style TargetType="{x:Type FrameworkElement}" x:Key="FadeOut">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Thanks in advance,

I think a toggle button is the appropriate control for this, but if you need to use a normal button for whatever reason, use two of them instead of one:
<Window
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:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" mc:Ignorable="d"
x:Class="TestBed.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Hide_Border">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Show">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Hide">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Show_Border">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Show">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Hide">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="Btn_Hide">
<BeginStoryboard Storyboard="{StaticResource Hide_Border}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="Btn_Show">
<BeginStoryboard x:Name="Show_Border_BeginStoryboard" Storyboard="{StaticResource Show_Border}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.8*"/>
</Grid.ColumnDefinitions>
<Button x:Name="Btn_Hide" Content="Hide" VerticalAlignment="Top"/>
<Button x:Name="Btn_Show" Content="Show" VerticalAlignment="Top" Visibility="Collapsed"/>
<Border x:Name="border" Grid.Column="1" Background="Red" />
</Grid>