DataTemplate的Silverlight Storyboard

Question

我正在使用Horizo​​ntal List，其中每個項目在您將鼠標懸停在其上時都會展開。

我已經閱讀了一些教程，我可以使用MouseEnter和MouseLeave事件創建簡單的動畫，但它不適用於我的數據模式。

未遂1

<DataTemplate x:Key="StepBreadcrumbItem"> 
      <Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60"> 
       <Border.Triggers> 
        <EventTrigger RoutedEvent="Border.MouseEnter"> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Duration="0:0:0.5" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 

        <EventTrigger RoutedEvent="Border.MouseLeave"> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" To="60" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </Border.Triggers> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text=" > " /> 
        <TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/> 
        <TextBlock Text="{Binding Name, Mode=OneWay}"/> 
       </StackPanel> 
      </Border> 
     </DataTemplate> 

我缺少什麼？它適用於單個元素。我得到運行時錯誤Error: Unhandled Error in Silverlight Application Code: 2531
Category: ParserError
Message: Failed to assign to property 'System.Windows.EventTrigger.RoutedEvent'.

ATTEMPT 2 我現在使用MouseEnter事件實現了它。由於嘗試1失敗。

<DataTemplate x:Key="StepBreadcrumbItem"> 
      <Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60" MouseLeave="CollapseBreadcrumb" MouseEnter="ExpandBreadcrumb"> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text=" > " /> 
        <TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/> 
        <TextBlock Text="{Binding Name, Mode=OneWay}"/> 
       </StackPanel> 
      </Border> 
     </DataTemplate> 

private void CollapseBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e) 
     { 
      var border = sender as Border; 

      var duration = TimeSpan.FromMilliseconds(1000); 

      var sb = new Storyboard { Duration = duration }; 
      var doubleAnimation = new DoubleAnimation 
      { 
       BeginTime = TimeSpan.FromSeconds(1), 
       Duration = duration, 
       To = 50 
      }; 
      sb.Children.Add(doubleAnimation); 

      Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)")); 
      Storyboard.SetTarget(doubleAnimation, border); 

      sb.Begin(); 
     } 

     private void ExpandBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e) 
     { 
      var border = sender as Border; 

      var duration = TimeSpan.FromMilliseconds(1000); 

      var sb = new Storyboard {Duration = duration}; 
      var doubleAnimation = new DoubleAnimation 
      { 
       BeginTime = TimeSpan.FromSeconds(0), 
       Duration = duration, 
       To = 100 
      }; 

      sb.Children.Add(doubleAnimation); 

      Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)")); 
      Storyboard.SetTarget(doubleAnimation, border); 

      sb.Begin(); 
     } 

然而，現在它只是擴展時，我有鼠標，它的時候我做的鼠標離開，它不會崩潰運行停止。另外，爲什麼我在語法上設置故事板的原因是因爲當我定義兩個故事板並且只是重新分配並將其運行到不同的項目時，當我將鼠標移動到所有列表項目時，它看起來非常糟糕。

Answer 1

不幸的是Silverlight只支持加載的EventTrigger。

解決方法非常簡單，請使用Behaviors。您只需要使用ControlStoryboardAction或GoToStateAction來觸發動畫。

這樣的事情，

<i:Interaction.Triggers> 
     <i:EventTrigger EventName="MouseEnter"> 
      <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/> 
     </i:EventTrigger> 
    </i:Interaction.Triggers> 

This和this可能是一個良好的開端。 :)

更新

你最好做這種動畫的XAML中。基本上你需要創建一個具有Normal和MouseOver兩種狀態的可視狀態組。然後使用GoToStateAction觸發它們。

You would have something like this, 
      <Border x:Name="border" Width="60" Background="Gray"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="VisualStateGroup"> 
         <VisualStateGroup.Transitions> 
          <VisualTransition/> 
         </VisualStateGroup.Transitions> 
         <VisualState x:Name="Normal"/> 
         <VisualState x:Name="MouseOver"> 
          <Storyboard> 
           <!-- your storyboard here --> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <i:Interaction.Triggers> 
        <i:EventTrigger EventName="MouseLeave"> 
         <ei:GoToStateAction StateName="Normal"/> 
        </i:EventTrigger> 
        <i:EventTrigger EventName="MouseEnter"> 
         <ei:GoToStateAction StateName="MouseOver"/> 
        </i:EventTrigger> 
       </i:Interaction.Triggers> 

更新2

其實你甚至不需要創建視覺狀態組...只要使用ControlStoryboardAction這樣。

<DataTemplate x:Key="ItemTemplate"> 
     <Border x:Name="border" Width="60" Background="Gray" RenderTransformOrigin="0.5,0.5"> 
      <Border.Resources> 
       <Storyboard x:Name="expand"> 
        <DoubleAnimation Duration="0:0:0.4" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="border" d:IsOptimized="True"/> 
       </Storyboard> 
       <Storyboard x:Name="collapse"> 
        <DoubleAnimation Duration="0:0:0.4" To="60" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="border" d:IsOptimized="True"/> 
       </Storyboard> 
      </Border.Resources> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="MouseLeave"> 
        <ei:ControlStoryboardAction Storyboard="{StaticResource collapse}"/> 
       </i:EventTrigger> 
       <i:EventTrigger EventName="MouseEnter"> 
        <ei:ControlStoryboardAction Storyboard="{StaticResource expand}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
      <StackPanel Height="32" Width="26"> 
       <TextBlock Text="{Binding Name}"/> 
       <TextBlock Text="{Binding Order}"/> 
      </StackPanel> 
     </Border> 
    </DataTemplate>