I am wondering if it possible to delay a datatrigger to change layout for 0.5 a second. Is any easy way to do it? I need to set the visibility of the object but wait for 0.5 a second. Any adeas are 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>
Storyaboard:
<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>
It can be done using an animation. The pieces involved are:
1) An ObjectAnimationUsingKeyFrames
that sets the Visibility
property on the target, with a BeginTime
of 0:0:.5
to delay this for a half 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
that launches the animation, and a RemoveStoryboard
in DataTrigger.ExitActions
that makes the object invisible again if the bound property changes back.
Here's 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 could also do this by omitting BeginTime
and setting Duration
on the animation, since the two are essentially the same thing with a key-frame animation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With