2015-01-21 66 views
0

我有一个用户控件的动画问题。用户控件中的Xaml故事板

  1. 动画只运行一次。

  2. 如果我在另一个窗口中有多个UserControl实例,则会为UserControl的每个实例调用该动画。

<UserControl x:Class="My_UserControl" 
 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 
      mc:Ignorable="d" Margin="10,10"> 
 
    <UserControl.Resources> 
 
     <Storyboard x:Key="CartTicket_Whip"> 
 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid"> 
 
       <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/> 
 
       <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 
 
      </DoubleAnimationUsingKeyFrames> 
 
      <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid"> 
 
       <DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/> 
 
       <DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/> 
 
      </BooleanAnimationUsingKeyFrames> 
 
     </Storyboard> 
 
    </UserControl.Resources> 
 

 
    <UserControl.Triggers> 
 
     <EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton"> 
 
      <BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/> 
 
     </EventTrigger> 
 
    </UserControl.Triggers> 
 

 
    <Grid x:Name="UserControlGrid" Height="60"> 
 
     <Grid.LayoutTransform> 
 
      <TransformGroup> 
 
       <ScaleTransform/> 
 
       <SkewTransform/> 
 
       <RotateTransform/> 
 
       <TranslateTransform/> 
 
      </TransformGroup> 
 
     </Grid.LayoutTransform> 
 
     <Grid.Effect> 
 
      <DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect> 
 
     </Grid.Effect> 
 
     <DockPanel Background="White"> 
 
      <Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60"> 
 
      </Button> 
 
      <TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center" 
 
         FontSize="20" FontWeight="Bold" Margin="10"> 
 
       <TextBlock.Effect> 
 
        <DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect> 
 
       </TextBlock.Effect> 
 
      </TextBlock> 
 
      <StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"> 
 
       <TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/> 
 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"> 
 
        <TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/> 
 
        <TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/> 
 
       </StackPanel> 
 
      </StackPanel> 
 
     </DockPanel> 
 
    </Grid> 
 
</UserControl>

回答

1

你可以设置你的故事板到StopFillBehavior财产以这样的方式

<UserControl.Resources> 
    <Storyboard x:Key="CartTicket_Whip" FillBehavior="Stop"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid"> 
      <DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/> 
      <DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/> 
     </BooleanAnimationUsingKeyFrames> 
    </Storyboard> 
</UserControl.Resources> 

我希望它能帮助。

+0

好,感谢II维克的FillBehavior解决问题与很多玩故事板只有一次..谢谢!仍然只有2.问题... – Franki1986 2015-01-21 11:05:25

+0

对不起,我没有重现你的第二个问题。你可以发布你的windows xaml吗(或者至少是它们中最重要的部分)? – 2015-01-21 11:25:26

0

好吧,我知道了...对不起,这是一个转储契合!因为我改变了网格元素的偏斜,为了具有上下效果,hole usercontrol有这个效果。 现在在我的窗口中,我把这个UserControls的五个在一个网格中,彼此... 所以有效果,每次点击似乎evrey UserControl开始动画...

因此,这里新代码,wehere我做故事板的子元素(DockPanel中):

<UserControl x:Class="MyUserControl" 
 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 
      mc:Ignorable="d" Margin="10,10"> 
 
    <UserControl.Resources> 
 
     <Storyboard x:Key="CartTicket_Whip"> 
 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlDockPanel"> 
 
       <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-1.5"/> 
 
       <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 
 
      </DoubleAnimationUsingKeyFrames> 
 
     </Storyboard> 
 
    </UserControl.Resources> 
 

 
    <UserControl.Triggers> 
 
     <EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton"> 
 
      <BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/> 
 
     </EventTrigger> 
 
    </UserControl.Triggers> 
 

 
    <Grid x:Name="UserControlGrid" Height="60"> 
 
     <Grid.LayoutTransform> 
 
      <TransformGroup> 
 
       <ScaleTransform/> 
 
       <SkewTransform/> 
 
       <RotateTransform/> 
 
       <TranslateTransform/> 
 
      </TransformGroup> 
 
     </Grid.LayoutTransform> 
 
     <Grid.Effect> 
 
      <DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect> 
 
     </Grid.Effect> 
 
     <DockPanel x:Name="UserControlDockPanel" Background="White" RenderTransformOrigin="0.5,0.5"> 
 
      <DockPanel.RenderTransform> 
 
       <TransformGroup> 
 
        <ScaleTransform/> 
 
        <SkewTransform/> 
 
        <RotateTransform/> 
 
        <TranslateTransform/> 
 
       </TransformGroup> 
 
      </DockPanel.RenderTransform> 
 
      <Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60"> 
 
      </Button> 
 
      <TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center" 
 
         FontSize="20" FontWeight="Bold" Margin="10"> 
 
       <TextBlock.Effect> 
 
        <DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect> 
 
       </TextBlock.Effect> 
 
      </TextBlock> 
 
      <StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"> 
 
       <TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/> 
 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"> 
 
        <TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/> 
 
        <TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/> 
 
       </StackPanel> 
 
      </StackPanel> 
 
     </DockPanel> 
 
    </Grid> 
 
</UserControl>