How to add AnimatedTabControl in MahApps.Metro?

Nickon picture Nickon · Oct 31, 2012 · Viewed 14.3k times · Source

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

Answer

Tolga E picture Tolga E · Oct 31, 2012

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>