Category / Section
How to set the Transition effect in TabNavigation control?
1 min read
To set the different transition effects while navigating the TabNavigationItem in the TabNavigation control, the property TransitionEffect is used. There are different value for TransitionEffect such as Blur, Fade, Push, PushIn, Zoom, and Slide.
The following code demonstrates how to set the Transition Effect as Slide in TabNavigation control. The same code can be used to set the different TransitionEffect by changing its value.
XAML:
<Window x:Class="TransitionEffect_New1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:TabNavigationControl x:Name="_TabNavigationcontrol" TransitionEffect="Slide" > <syncfusion:TabNavigationItem Header="Tabnavigationitem1"/> <syncfusion:TabNavigationItem Header="Tabnavigationitem2"/> </syncfusion:TabNavigationControl> </Grid> </Window>
C#:
using Syncfusion.Windows.Tools.Controls;
namespace TransitionEffect_New1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabNavigationControl tab1 = new TabNavigationControl();
tab1.Name = "_TabNavigationcontrol";
tab1.TransitionEffect = TransitionEffects.Slide;
TabNavigationItem item1 = new TabNavigationItem();
item1.Header = "TabNavigationItem1";
TabNavigationItem item2 = new TabNavigationItem();
item2.Header = "TabNavigationItem2";
tab1.Items.Add(item1);
tab1.Items.Add(item2);
Grid1.Children.Add(tab1);
}
}
}