Стили XAML - вложенные табличные элементы управления, запускающие анимацию друг друга

Question

Я изобрел элемент управления вкладками в стиле metro, который построен так, чтобы содержать два уровня вкладок, как это делает медиатека Zune; один большой, а другой меньше этого. Когда вы меняете вкладку для первого уровня, она работает нормально и анимирует правильно. Каждая из двух вкладок содержит другой TabControl, использующий тот же шаблон, но когда вы меняете вкладки, даже анимация вкладок анимируется; подобно всему ContentPresenter контейнера, который оживляет TabControl, а не ContentPresenter дочернего элемента TabControl. Если это имеет смысл: 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;
 }