XAML 样式 - 嵌套选项卡控件触发彼此的动画

Question

我发明了一个metro风格的标签控件，它被构建为包含两个级别的标签，就像Zune媒体库一样;一个大的，一个小的。当你改变第一个关卡的标签时，它工作得很好，并且动画正确。两个选项卡中的每一个都包含另一个使用相同模板的TabControl，但是当你改变那里的选项卡时，甚至tabstrip也会动起来;比如容器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并触发其动画。作为一种可能的简单解决方案，您可以将SelectionChanged事件处理程序添加到父TabControl并检查它是否是该事件的原始源:

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

代码如下:

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