WPF選項卡控件+動畫

Question

我想要樣式/動畫的TabControl，以便當選項卡被選中時，舊的淡出，並且新的淡入/幻燈片中。我有選項卡控件樣式，以一個點，但現在我正在努力解決如何動畫面板。 Blend似乎沒有太大的幫助：有引用樣式「target-element」，以及對xaml中的「Panel」的引用，但當嘗試爲此元素設置動畫屬性時，這兩者似乎都不起作用。

我正在嘗試動畫不透明度屬性和transform屬性。任何人都可以幫忙嗎？提前致謝。

XAML附：

<Style x:Key="HeaderTabControlItem" TargetType="{x:Type TabItem}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="Padding" Value="6,1,6,1"/> 
    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/> 
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="FadeTabIn"> 
         <!-- This is where I am trying to put the animation code, the following (commented) line is an example. --> 
         <!--<DoubleAnimation By="0.6" From="0.5" To="1" Storyboard.TargetName="target-element" Storyboard.TargetProperty="(UIElement.Opacity)" /> --> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <Grid x:Name="layoutRoot" SnapsToDevicePixels="true" Opacity="0.6" RenderTransformOrigin="0.5,0.5"> 
        <Grid.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform ScaleX="0.9" ScaleY="0.9"/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Grid.RenderTransform> 
        <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="0,0,8,0"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"/> 
        <Trigger Property="IsSelected" Value="true"> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Opacity" TargetName="layoutRoot" Value="1"/> 
        </Trigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="false"/> 
          <Condition Property="IsMouseOver" Value="true"/> 
         </MultiTrigger.Conditions> 
         <Setter Property="Opacity" TargetName="layoutRoot" Value="0.4"/> 
        </MultiTrigger> 
        <Trigger Property="TabStripPlacement" Value="Bottom"/> 
        <Trigger Property="TabStripPlacement" Value="Left"/> 
        <Trigger Property="TabStripPlacement" Value="Right"/> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="true"/> 
          <Condition Property="TabStripPlacement" Value="Top"/> 
         </MultiTrigger.Conditions> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="true"/> 
          <Condition Property="TabStripPlacement" Value="Bottom"/> 
         </MultiTrigger.Conditions> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="true"/> 
          <Condition Property="TabStripPlacement" Value="Left"/> 
         </MultiTrigger.Conditions> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="true"/> 
          <Condition Property="TabStripPlacement" Value="Right"/> 
         </MultiTrigger.Conditions> 
        </MultiTrigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Opacity" TargetName="layoutRoot" Value="0.25"/> 
         <Setter Property="RenderTransform" TargetName="layoutRoot"> 
          <Setter.Value> 
           <TransformGroup> 
            <ScaleTransform ScaleX="0.8" ScaleY="0.8"/> 
            <SkewTransform/> 
            <RotateTransform/> 
            <TranslateTransform/> 
           </TransformGroup> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="Selector.IsSelected" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard x:Name="FadeTabIn_BeginStoryboard" Storyboard="{StaticResource FadeTabIn}"/> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

這裏的問題是，標籤控件並不像通用的，因爲它可以。在這種情況下，最好的辦法是對每個標籤項目使用自定義控件，併爲淡入淡出創建切換故事板。

我的這個技巧是使用視覺狀態和行爲，以及自定義模板單選按鈕作爲切換器。

創建故事板，從0> 100

動畫從倒塌>可見，然後消失了不透明的可視性你可以看到我的博客這個確切的技術的例子，在網頁的Silverlight的網站部分xap on http://www.blackspike.com

Answer 2

使用SelectionChanging和SelectionChanged，您可以將其應用於多個tabcontrols。我使用的是Devexpress，但它應該可以用於任何WPF 4.0選項卡控件，因爲我只使用SelectionChanging和SelectionChanged事件。

VB：

Private Sub TabControl_SelectionChanging(sender As Object, e As DevExpress.Xpf.Core.TabControlSelectionChangingEventArgs) Handles tcMaterials.SelectionChanging, tcSymbols.SelectionChanging, myTabControl1.SelectionChanging 
    Try 
     If Not e.OldSelectedItem Is Nothing Then 
      Dim Duration = New TimeSpan(0, 0, 0, 0, 500) 

      Dim FromOpac As New DoubleAnimation(1, 0, Duration) 

      Storyboard.SetTarget(FromOpac, CType(CType(e.OldSelectedItem, DXTabItem).Content, Grid)) 
      Storyboard.SetTargetProperty(FromOpac, New PropertyPath((CType(CType(e.OldSelectedItem, DXTabItem).Content, Grid).OpacityProperty))) 
      Dim s As New Storyboard() 
      s.AccelerationRatio = 0.2 
      s.DecelerationRatio = 0.8 
      s.Children.Add(FromOpac) 

      s.Begin() 
     End If 
    Catch ex As Exception 
     MsgBox(ex.Message) 
    End Try 

End Sub 

Private Sub TabControl_SelectionChanged(sender As Object, e As DevExpress.Xpf.Core.TabControlSelectionChangedEventArgs) Handles tcMaterials.SelectionChanged, tcSymbols.SelectionChanged, myTabControl1.SelectionChanged 
    Try 
     If Not e.OldSelectedItem Is Nothing Then 
      Dim Duration = New TimeSpan(0, 0, 0, 0, 500) 

      Dim ToOpac As New DoubleAnimation(0, 1, Duration) 


      Storyboard.SetTarget(ToOpac, CType(CType(e.NewSelectedItem, DXTabItem).Content, Grid)) 
      Storyboard.SetTargetProperty(ToOpac, New PropertyPath((CType(CType(e.NewSelectedItem, DXTabItem).Content, Grid).OpacityProperty))) 
      Dim s As New Storyboard() 
      s.AccelerationRatio = 0.2 
      s.DecelerationRatio = 0.8 
      s.Children.Add(ToOpac) 

      s.Begin() 
     End If 
    Catch ex As Exception 
     MsgBox(ex.Message) 
    End Try 

End Sub