Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add AnimatedTabControl in MahApps.Metro?

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

like image 492
Nickon Avatar asked Oct 30 '12 23:10

Nickon


1 Answers

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>
like image 98
Tolga E Avatar answered Sep 29 '22 08:09

Tolga E