XAML styles - Nested tabcontrols triggering eachother's animations - wpf

Question

I've invented a metro-style tab control which is built to contain two levels of tabs just like the Zune media library does; one large and one smaller below that. When you change tab for the first level, it works fine and animates correctly. Each of the two tabs contains another TabControl using the same template, but when you change the tabs there even the tabstrip animates; like the whole ContentPresenter of the container TabControl animates rather than the ContentPresenter of the child TabControl. If that makes sense :P
Here's the style:
<Style x:Key="MetroTabControl" TargetType="{x:Type TabControl}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<ControlTemplate.Resources>
<Storyboard x:Key="TabSelectionChangedStoryboard">
<DoubleAnimation Storyboard.TargetName="TabControlContent"
Storyboard.TargetProperty="Opacity"
To="100"
From="0"
FillBehavior="HoldEnd"
Duration="0:0:45.0" />
<ThicknessAnimation Storyboard.TargetName="TabControlContent"
Storyboard.TargetProperty="Margin"
From="0,25,0,-25"
To="0,0,0,0"
FillBehavior="HoldEnd"
Duration="0:0:0.3">
</ThicknessAnimation>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border>
<TabPanel
IsItemsHost="True">
</TabPanel>
</Border>
<Border x:Name="BorderPresenter" BorderThickness="0"
Grid.Row="1"
BorderBrush="White"
Background="White">
<ContentPresenter x:Name="TabControlContent" ContentSource="SelectedContent" Margin="0" >
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="SelectionChanged">
<BeginStoryboard Storyboard="{StaticResource TabSelectionChangedStoryboard}" />
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

That happens because SelectionChanged event bubbles up to parent TabControl and triggers its animation. As one possible easy solution you can add SelectionChanged event handler to parent TabControl and check if it is the original source for this event:
<TabControl SelectionChanged="RootTabControl_SelectionChanged">
<TabItem>
<TabControl>
<!-- TabItems here -->
</TabControl>
</TabItem>
</TabControl>
And here`s the code:
private void RootTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (sender != e.OriginalSource)
e.Handled = true;
}