9

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

1 Answer 1

16

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>
2
  • 2
    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:)
    – Nickon
    Oct 31, 2012 at 8:02
  • 1
    Yes your tab control will automatically will be animated as long as you add the resource to the animatedtabcontrol
    – Tolga E
    Oct 31, 2012 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.