WPF Tabcontrol: Hiệu ứng trượt khi chọn mục tab

Question

Tôi đang có hai mục tab trong điều khiển tab và tôi muốn tạo hiệu ứng trượt (Hoạt ảnh) trong khi chọn một mục tab khác. Hãy cho tôi biết nếu có ai đó có ý tưởng nào đó để đạt được hoạt ảnh này. Cảm ơn trước.

Answer 1

http://social.msdn.microsoft.com/Forums/en-AU/wpf/thread/ed8801d8-51c4-4671-8b8c-86544c6d434d này là hữu ích và evergreen..i đã sử dụng nó một thời gian trước

Điều này dường như được cập nhật phiên bản http://blogs.intuidev.com/post/2010/01/26/TabControlStyling_PartTwo.aspx

và nhiều hơn không chắc chắn những gì bạn có nghĩa là bởi hiệu ứng trượt ?! bất kỳ ví dụ cho tôi để hiểu

Answer 2

mã XAML:

<Window x:Class="TabControlAnimation.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525" WindowState="Maximized"> 

    <Grid HorizontalAlignment="Center" Name="maingrid"> 
     <Grid.Resources> 
      <DataTemplate x:Key="TabTemplate"> 
       <Grid Name="gd"> 
        <ContentControl Content="{Binding}"></ContentControl> 
       </Grid> 
      </DataTemplate> 
     </Grid.Resources> 
     <StackPanel Orientation="Horizontal"> 
      <TabControl ContentTemplate="{StaticResource TabTemplate}" Name="_menuTabControl" TabStripPlacement="Top" Width="auto" Height="{Binding ElementName=maingrid, Path=Height}" SelectionChanged="_menuTabControl_SelectionChanged"> 
       <TabItem Header="MyTabItem1"> 
        <Grid Background="Red"> 
         <TextBlock Text="This is tab1"></TextBlock> 
        </Grid>      
       </TabItem> 
       <TabItem Header="MyTabItem2"> 
        <Grid Background="Green"> 
         <TextBlock Text="This is tab2"></TextBlock> 
        </Grid>      
       </TabItem> 
       <TabItem Header="MyTabItem3"> 
        <Grid Background="Yellow"> 
         <TextBlock Text="This is tab3"></TextBlock> 
        </Grid>      
       </TabItem> 
       <TabItem Header="MyTabItem4"> 
        <Grid Background="Violet"> 
         <TextBlock Text="This is tab4"></TextBlock> 
        </Grid>      
       </TabItem> 
      <TabItem Header="MyTabItem5"> 
       <Grid Background="Blue"> 
        <TextBlock Text="This is tab5"></TextBlock> 
       </Grid> 
      </TabItem> 
     </TabControl> 
     </StackPanel> 
    </Grid> 

Mã Đằng sau:

public partial class MainWindow : Window 
{ 

    public MainWindow() 
    { 
     InitializeComponent(); 
    } 

    public IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T:DependencyObject 
    { 
     if(depObj!=null) 
     { 
      for(int i=0;i<VisualTreeHelper.GetChildrenCount(depObj);i++) 
      { 
       DependencyObject child = VisualTreeHelper.GetChild(depObj, i); 
       if (child != null && child is T) 
        yield return (T)child; 

       foreach (T childOfChild in FindVisualChildren<T>(child)) 
        yield return childOfChild; 
      } 
     } 
    } 


    int prev = -1, curr = -1; 
    private void _menuTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     curr = (sender as TabControl).SelectedIndex; 
     if(prev!=curr) 
     { 
      foreach(var rectangle in FindVisualChildren<Grid>(this)) 
      { 
       if(rectangle.Name=="gd") 
       { 
        DoubleAnimation translate_x=null; 
        if(prev>curr) 
        { 
         translate_x = new DoubleAnimation() 
         { 
          From = -300, 
          To = 0, 
          Duration = TimeSpan.FromSeconds(0.3), 

         }; 
        } 
        else 
        { 
         translate_x = new DoubleAnimation() 
         { 
          From = 300, 
          To = 0, 
          Duration = TimeSpan.FromSeconds(0.3), 
         }; 
        } 
        var translate_y = new DoubleAnimation() 
        { 
         From = 0, 
         To = 0, 
         Duration = TimeSpan.FromSeconds(1), 
        }; 
        TranslateTransform translateTransform1 = new TranslateTransform(); 
        translateTransform1.BeginAnimation(TranslateTransform.XProperty, translate_x); 
        translateTransform1.BeginAnimation(TranslateTransform.YProperty, translate_y); 
        rectangle.RenderTransform = translateTransform1; 
        prev = curr; 
       } 
      } 
     } 
    } 
}