Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to delay the Setter to be in affect for 0.5 sec in DataTrigger?

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> 
like image 477
vladc77 Avatar asked Dec 23 '10 18:12

vladc77


1 Answers

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.

like image 57
Robert Rossney Avatar answered Sep 21 '22 11:09

Robert Rossney