TabItem 样式触发器不会在应用程序启动时更新

Question

我尝试为 TabItem 创建一个简单的样式，方法是转到“属性”窗口并将模板转换为新资源，并将其包装在一个样式中（非常标准的东西）。

目标是根据IsSelected 属性为BorderBrush 颜色设置动画。实际上，我以原始生成的代码为基础，相对轻松地做到了这一点。

问题：在设计器中，当应用程序启动时，所有 TabItems 都显示为选中状态，直到我单击不是第一个选项卡的任何选项卡（索引 0，因为默认情况下已选中）。

屏幕录像展示了发生的情况： https://i.gyazo.com/17e2f3c484029d4f5cd3021612b0f882.mp4

如何解决这个问题？我尝试过使用各种触发器类型，但似乎都没有解决问题。 样式代码：

<Style TargetType="{x:Type TabItem}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Padding" Value="8,0"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Margin" Value="0,0,1,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="ElementBorder" Height="30" Width="Auto" Background="#FF1F1F1F" BorderBrush="#FF00FF96" BorderThickness="0,0,0,2" CornerRadius="2,2,0,0" SnapsToDevicePixels="True">
                    <ContentPresenter TextBlock.Foreground="Silver"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        Content="{TemplateBinding Header}"
                                        ContentStringFormat="{TemplateBinding HeaderStringFormat}"
                                        ContentSource="Header"
                                        HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"
                                        Margin="{TemplateBinding Padding}"
                                        RecognizesAccessKey="True"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                                
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                                
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation 
                                        Storyboard.TargetName="ElementBorder"
                                        Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
                                        To="#FF00FF96"
                                        Duration="0:0:0.1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                                
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation 
                                        Storyboard.TargetName="ElementBorder"
                                        Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
                                        To="#FF1F1F1F"
                                        Duration="0:0:0.1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                                
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

问题在于您将默认 BorderBrush 设置为选定颜色。将其更改为未选择的颜色，如下所示：

<Border x:Name="ElementBorder"
    Width="Auto"
    Height="30"
    Background="#FF1F1F1F"
    BorderBrush="#FF1F1F1F"
    BorderThickness="0,0,0,2"
    CornerRadius="2,2,0,0"
    SnapsToDevicePixels="True">

此外，您还可以简化触发器：

<Trigger Property="IsSelected" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation
                    Storyboard.TargetName="ElementBorder"
                    Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
                    To="#FF00FF96"
                    Duration="0:0:0.1" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation
                    Storyboard.TargetName="ElementBorder"
                    Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
                    To="#FF1F1F1F"
                    Duration="0:0:0.1" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>