WPF Tabcontrol: Sliding effect on tab item selection

Question

I am having two tab items in my tab control and i want to give sliding effects (Animation) while selecting one tab item form another. Let me know if anyone has some idea's to achieve this animation. Thanks in advance.

Answer 1

http://social.msdn.microsoft.com/Forums/en-AU/wpf/thread/ed8801d8-51c4-4671-8b8c-86544c6d434d this is helpful and evergreen..i have used it a while ago

This seems to be updated version http://blogs.intuidev.com/post/2010/01/26/TabControlStyling_PartTwo.aspx

and more over not sure what you meant by sliding effects?! any examples for me to understand

Answer 2

xaml code:

<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> 

Code Behind:

 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;
                }
            }
        }
    }
}