XAMLスタイル - ネストされたタブコントロールは、他のアニメーションをトリガーします

Question

私は、Zuneメディアライブラリのように2つのレベルのタブを含むように構築されたメトロスタイルのタブコントロールを発明しました。 1つは大きく、もう1つはその下にあります。最初のレベルのタブを変更すると、正常に動作し、正しくアニメーション化されます。 2つのタブにはそれぞれ同じテンプレートを使用する別のTabControlが含まれていますが、タブを変更してもタブストリップがアニメーション化されます。コンテナTabControlのContentPresenter全体が、子TabControlのContentPresenterではなくアニメーション化されているように、ここでP スタイルだ：それは理にかなっている場合

<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

SelectionChangedイベントは、親のTabControlにバブルアップし、そのアニメーションをトリガーするために起こります。

<TabControl SelectionChanged="RootTabControl_SelectionChanged"> 
    <TabItem> 
     <TabControl> 
      <!-- TabItems here --> 
     </TabControl> 
    </TabItem> 
</TabControl> 

とコードをhere`s：

private void RootTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    if (sender != e.OriginalSource) 
     e.Handled = true; 
}