开发者

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

开发者 https://www.devze.com 2023-02-01 04:13 出处:网络
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 hig

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消