How to add AnimatedTabControl in MahApps.Metro?

Question

I have started learning MahApps.Metro. I read the documentation and got a problem. How to add AnimatedTabControl?

I've included ResourceDictionaries:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Purple.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

After that I started to develop the window:

<Controls:MetroWindow x:Class="MyProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"
        Title="MyProject" ShowIconOnTitleBar="True" SaveWindowPosition="True" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary Source="Styles\MetroStyles.xaml" />
    </Window.Resources>

    <Controls:MetroWindow.WindowCommands>
        <Controls:WindowCommands>
            <Button Content="about" />
            <Button Content="settings" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.WindowCommands>

    <Grid>
        <Controls:TransitioningContentControl x:Name="Transitioning" Transition="RightReplaceTransition">

        </Controls:TransitioningContentControl>
    </Grid>
</Controls:MetroWindow>

Metro window works fine but I have no idea how to add AnimatedTabControl... It's not included in Controls: namespace.

I want to do something like that:

Solution

You add the

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />

to the

 <ResourceDictionary.MergedDictionaries>

element at the top of the .xaml then your TabControl will be animated (you still use the TabControl tag but it will use the Controls.AnimatedTabControl style..

Here's the example of the whole ResourceDictionary tag

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

Comments

[Nickon]

Ahhh, so I need to create a new tab control: <TabControl><TabItem Content="Item1" /><TabItem Content="Item2" /></TabControl>? I'll check it out this evening, because now I'm in the work:)

[Tolga E]

Yes your tab control will automatically will be animated as long as you add the resource to the animatedtabcontrol