WPF TabItem Header中的文本框可见性没有改变

Question

我为 TabItem 创建了一个样式。双击 tabItem 标题时，会显示一个文本框，以便可以编辑标题文本。

我想在选项卡选择更改或选项卡失去焦点时隐藏该文本框，因此当 IsSelected 为 false 或触发 SelectionChanged 事件但它不起作用时，我将可见性设置为 false。

<Trigger Property="IsSelected" Value="false">
    <Setter Property="Visibility" Value="{x:Static Visibility.Collapsed}" TargetName="tabHeaderEdit" />
    <Setter Property="Visibility" Value="{x:Static Visibility.Visible}" TargetName="tabHeaderPresenter" />
    <Setter TargetName="tabDockPanel" Property="Background" Value="#FFC9C7BA" />
</Trigger>

<EventTrigger RoutedEvent="Selector.SelectionChanged">
    <BeginStoryboard Storyboard="{StaticResource endHeaderEdit}"/>
</EventTrigger>

这是完整的 XAML。有人可以告诉我这个 xaml 有什么问题吗？

<Window x:Class="WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="Window1" Height="300" Width="300">
<Window.Resources>
    <Storyboard x:Key="startHeaderEdit">
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="tabHeaderEdit" Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="tabHeaderPresenter" Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="endHeaderEdit">
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="tabHeaderEdit" Storyboard.TargetProperty="(UIElement.Visibility)" >
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="tabHeaderPresenter" Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    <Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">           
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">                        
                    <theme:ClassicBorderDecorator Name="ClassicBorder" SnapsToDevicePixels="true" BorderStyle="TabTop" Background="{TemplateBinding Background}" BorderBrush="{x:Static theme:ClassicBorderDecorator.ClassicBorderBrush}" BorderThickness="2">
                        <DockPanel x:Name="tabDockPanel">
                            <Button x:Name="tabCloseButton" Content="X" Cursor="Hand" DockPanel.Dock="Right" Focusable="False" FontFamily="Courier" FontSize="9" FontWeight="Bold" Margin="5,2,3,2" Padding="0" VerticalContentAlignment="Bottom" Width="16" Height="16"/>
                            <TextBox x:Name="tabHeaderEdit" DockPanel.Dock="Left" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" Visibility="Collapsed">                                    
                            </TextBox>
                            <ContentPresenter x:Name="tabHeaderPresenter" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="true" HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                        </DockPanel>
                    </theme:ClassicBorderDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="false">
                            <Setter Property="Visibility" Value="{x:Static Visibility.Collapsed}" TargetName="tabHeaderEdit" />
                            <Setter Property="Visibility" Value="{x:Static Visibility.Visible}" TargetName="tabHeaderPresenter" />
                            <Setter TargetName="tabDockPanel" Property="Background" Value="#FFC9C7BA" />
                        </Trigger>
                        <EventTrigger RoutedEvent="Control.MouseDoubleClick">
                            <BeginStoryboard Storyboard="{StaticResource startHeaderEdit}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Selector.SelectionChanged">
                            <BeginStoryboard Storyboard="{StaticResource endHeaderEdit}"/>
                        </EventTrigger>
                        <!--<EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <BeginStoryboard Storyboard="{StaticResource endHeaderEdit}"/>
                        </EventTrigger>-->
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="ClassicBorder" Property="BorderStyle" Value="TabBottom" />
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter TargetName="ClassicBorder" Property="BorderStyle" Value="TabLeft" />
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter TargetName="ClassicBorder" Property="BorderStyle" Value="TabRight" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true" />
                                <Condition Property="TabStripPlacement" Value="Top"  />
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true" />
                                <Condition Property="TabStripPlacement" Value="Bottom" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true" />
                                <Condition Property="TabStripPlacement" Value="Left" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Padding" Value="11,2,14,2" />
                            <Setter Property="Margin" Value="-2" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true" />
                                <Condition Property="TabStripPlacement" Value="Right" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Padding" Value="14,2,11,2" />
                            <Setter Property="Margin" Value="-2" />
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrush}}" Property="Foreground" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>        
</Window.Resources>
<TabControl Name="tabControlView" Margin="4" BorderThickness="1" BorderBrush="Black">
    <TabControl.Items>
        <TabItem Header="Header 1" Content="Content 1" HorizontalAlignment="Left" VerticalAlignment="Top"></TabItem>
        <TabItem Header="Header 2" Content="Content 2"  HorizontalAlignment="Left" VerticalAlignment="Top"></TabItem>
        <TabItem Header="Header 3" Content="Content 3"  HorizontalAlignment="Left" VerticalAlignment="Top"></TabItem>
    </TabControl.Items>
</TabControl>

Answer 1

在LostFocus上停止编辑怎么样：

<EventTrigger SourceName="tabHeaderEdit" RoutedEvent="UIElement.LostFocus">
    <BeginStoryboard Storyboard="{StaticResource endHeaderEdit}"/>
</EventTrigger>

（至少这样可行，而且可能更符合通常的做法）

编辑：SelectionChanged 触发器永远不会触发，因为该事件属于 TabControl 而不是模板化的 TabItem，此外，Setters 无法更改值，因为它们已被动画化故事板。这会起作用：

<Trigger Property="IsSelected" Value="false">
    <Trigger.EnterActions>
        <StopStoryboard BeginStoryboardName="start"/>
        <BeginStoryboard Name="end" Storyboard="{StaticResource endHeaderEdit}"/>
    </Trigger.EnterActions>
    <Setter TargetName="tabDockPanel" Property="Background" Value="#FFC9C7BA" />
</Trigger>
<EventTrigger RoutedEvent="Control.MouseDoubleClick">
    <BeginStoryboard Name="start" Storyboard="{StaticResource startHeaderEdit}"/>
</EventTrigger>

我仍然建议使用第一种方法，如果文本框在点击离开后仍然停留在同一个选项卡上，这会有点烦人。