How to delay a setter that will affect 0.5 seconds in a DataTrigger?

Question

I am wondering if a datatrigger can be delayed to change the layout by 0.5 seconds. Is there an easy way to do this? I need to set the object visibility, but wait 0.5 seconds. Any advice is highly appreciated.

<DataTemplate x:Key="ListBoxItemDataTemplate"> <Grid x:Name="DataItem"> <Image x:Name="IconImage" Source="{Binding XPath=@icon }" Height="16" Margin="16,0,0,0" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Left" /> <TextBlock x:Name="ListboxIemtextBlock" Text="{Binding XPath=@name }" /> <Image x:Name="ArrowImage" Height="10" Source="Resources/Images/arrow_collapsed_grey.png" Visibility="{Binding XPath=@state }"/> </Grid> <DataTemplate.Triggers> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True"> <Setter TargetName="ListboxIemtextBlock" Property="Foreground" Value="White"/> <Setter TargetName="IconImage" Property="Source" Value="{Binding XPath=@iconSelected }"/> <Setter TargetName="IconImage" Property="Height" Value="16"/> <Setter TargetName="ArrowImage" Property="Source" Value="Resources/Images/arrow_collapsed_white.png"/> </DataTrigger> <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True"> <Setter TargetName="ListboxIemtextBlock" Property="Foreground" Value="#FF6dacbe"/> </DataTrigger> <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Path=SelectedItem.Attributes[retract].Value}" Value="True"> <Setter TargetName="ListboxIemtextBlock" Property="Visibility" Value="Hidden" /> <DataTrigger.EnterActions> <BeginStoryboard Name="StartAnimation" Storyboard="{StaticResource MakeObjectVisibleAfterHalfASecond}"/> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <RemoveStoryboard BeginStoryboardName="StartAnimation"/> </DataTrigger.ExitActions> </DataTrigger> </DataTemplate.Triggers></DataTemplate> 

Storyboardboard:

 <Storyboard x:Key="MakeObjectVisibleAfterHalfASecond" Storyboard.TargetName="ListboxIemtextBlock"> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0" BeginTime="0:0:.5"> <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> 

Answer 1

This can be done using animation. These include:

1) ObjectAnimationUsingKeyFrames , which sets the Visibility property to the target, with BeginTime of 0:0:.5 to delay this for half a second when the storyboard begins.

2) A DataTrigger that checks the property whose change will make the object visible (in this case, the IsChecked property on the CheckBox named Start ).

3) BeginStoryboard in DataTrigger.EnterActions , which starts the animation, and RemoveStoryboard in DataTrigger.ExitActions , which again makes the object invisible if the binding property returns.

Here is a simple working example:

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Storyboard x:Key="MakeObjectVisibleAfterHalfASecond"> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0" BeginTime="0:0:.5"> <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </Page.Resources> <DockPanel> <CheckBox DockPanel.Dock="Top" Margin="10" x:Name="Start">Check this to make the label appear</CheckBox> <Border BorderThickness="2" BorderBrush="AliceBlue" CornerRadius="5" Margin="10" Padding="10" DockPanel.Dock="Top"> <Label Visibility="Hidden"> <Label.Content>This should appear a half second after the box is checked.</Label.Content> <Label.Style> <Style TargetType="Label"> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=Start, Path=IsChecked}" Value="True"> <DataTrigger.EnterActions> <BeginStoryboard Name="StartAnimation" Storyboard="{StaticResource MakeObjectVisibleAfterHalfASecond}"/> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <RemoveStoryboard BeginStoryboardName="StartAnimation"/> </DataTrigger.ExitActions> </DataTrigger> </Style.Triggers> </Style> </Label.Style> </Label> </Border> <TextBlock/> </DockPanel> </Page> 

Note that you can also do this by omitting BeginTime and setting Duration to the animation, since the two are essentially the same with the keyframe animation.