TabItem Storyboard 影响相邻的 TabItems答案

【问题标题】：TabItem Storyboard affects neighboring TabItemsTabItem Storyboard 影响相邻的 TabItems
【发布时间】：2011-04-18 16:49:46
【问题描述】：

我们有一个 TabItem 样式，其中包含一个非常简单的 ControlTemplate：

<Border x:Name="border" BorderThickness="0" Background="{DynamicResource MediumGray}" Margin="0,0,1,1" 
    SnapsToDevicePixels="True" TextBlock.Foreground="{DynamicResource DarkGray}">
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Header}" />
</Border>

ControlTemplate 包含一个在 MouseEnter 上触发的 EventTrigger。故事板使用 ColorAnimation：

<Storyboard>
    <ColorAnimation To="{StaticResource _LightGray}" BeginTime="0:00:00"
        Duration="0:00:00.200"
        Storyboard.TargetName="border"
        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
</Storyboard>

情节提要按预期工作 - 除了它还会影响 TabControl 中的其他 TabItems。它们都动画到目标颜色。

【问题讨论】：

为了解决问题，我尝试定位其他一些属性。我在 TabItem.Width 属性上放置了一个 DoubleAnimation，它的动画效果正确——只有目标 TabItem 受到影响。

标签： wpf animation

【解决方案1】：

将原始背景画笔移入 ControlTemplate 资源可解决此问题：

<ControlTemplate TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="borderBackground" Color="{StaticResource _MediumGray}" />
    </ControlTemplate.Resources>

    <Border Background="{StaticResource borderBackground}" ... />
</ControlTemplate>

【讨论】：