VisualStateManager.GoToState调用后Popup状态无法切换的问题咨询

问题场景 #

自定义UXIconComboBox控件通过ControlTemplate实现，点击PopupExpanderButton可正常打开弹窗；但若不移动鼠标再次点击按钮，弹窗会因失焦关闭，随后点击事件中明明触发了PopupOpen状态切换，弹窗却始终无法重新打开。只有点击其他区域后再返回点击按钮，弹窗才能正常显示。

相关代码 #

ControlTemplate XAML

<ControlTemplate x:Key="UXIconComboBoxControlTemplate" TargetType="{x:Type controls:UXIconComboBox}" >
    <ControlTemplate.Resources>
        <converters:IconComboBoxDropdownHorizontalOffsetMultiConverter x:Key="ComboBoxDropdownHorizontalOffsetConverter"/>
    </ControlTemplate.Resources>
    <Grid 
        x:Name="rootGrid"
        Width="{TemplateBinding HitAreaWidth}" 
        Height="{TemplateBinding HitAreaHeight}" 
        Background="{TemplateBinding Background}"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <controls:ExtendedHitAreaButton 
            Grid.Row="0"
            x:Name="PopupExpanderButton"
            IsTabStop="True"
            AutomationProperties.AutomationId="UXIconComboBox"
            Style="{StaticResource PopupExpanderButtonStyle}">
        </controls:ExtendedHitAreaButton>
        <Popup 
            x:Name="IconComboBoxPopup"
            Grid.Row="1" 
            AutomationProperties.AutomationId="UXIconComboBoxPopup"
            Placement="Bottom"
            PlacementTarget="{Binding ElementName=PopupExpanderButton}"
            MinWidth="200"
            StaysOpen="False">
            <Popup.HorizontalOffset>
                <MultiBinding Converter="{StaticResource ComboBoxDropdownHorizontalOffsetConverter}">
                    <Binding ElementName="PopupExpanderButton" Path="ActualWidth"/>
                    <Binding ElementName="IconComboBoxPopup_ListBox" Path="ActualWidth"/>
                </MultiBinding>
            </Popup.HorizontalOffset>
            <ListBox 
                x:Name="IconComboBoxPopup_ListBox" 
                AutomationProperties.AutomationId="UXIconComboBoxListBox"
                ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
                IsSynchronizedWithCurrentItem="True"
                Focusable="True"
                KeyboardNavigation.TabNavigation="Cycle"
                KeyboardNavigation.DirectionalNavigation="Cycle"    
                BorderThickness="0"
                ItemContainerStyle="{StaticResource ListBoxContainerStyle}"
                ItemTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource TemplatedParent}}">
            </ListBox>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PopupStates">
                <VisualState x:Name="PopupClosed">
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames Storyboard.TargetName="IconComboBoxPopup"
                                            Storyboard.TargetProperty="IsOpen">
                            <DiscreteBooleanKeyFrame KeyTime="0:0:0.25"
                                       Value="False" />
                        </BooleanAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="rootGrid"
                                        Storyboard.TargetProperty="(Panel.Background)">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{DynamicResource BrushIconComboBox_Popup_Closed_Background}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PopupOpen">
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames Storyboard.TargetName="IconComboBoxPopup"
                                            Storyboard.TargetProperty="IsOpen">
                            <DiscreteBooleanKeyFrame KeyTime="0:0:0.25"
                                       Value="True" />
                        </BooleanAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="rootGrid"
                                        Storyboard.TargetProperty="(Panel.Background)">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{DynamicResource BrushIconComboBox_Popup_Open_Background}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        </Popup>
    </Grid>
</ControlTemplate>

按钮点击事件代码

/// <summary>
/// Handler for the ExtendedHitAreaButton click event
/// </summary>
/// <param name="sender">listBoxItem info</param>
/// <param name="e">routed event info</param>
public void PopupExpanderButton_Click(object sender, RoutedEventArgs e)
{
    Debug.WriteLine($"PopupExpanderButton_Click called - popup state {IconComboBoxPopup.IsOpen}");

    var popupState = IconComboBoxPopup.IsOpen ? PopupClosed : PopupOpen;

    var result = VisualStateManager.GoToState(this, popupState, true);

    e.Handled = true;
}

核心原因 #

1. 时序冲突：Popup设置了StaysOpen="False"，点击按钮时WPF内置逻辑会先判定点击区域在Popup外，触发弹窗关闭，此时IconComboBoxPopup.IsOpen变为false；随后点击事件触发PopupOpen状态切换，但状态动画设置了KeyTime="0:0:0.25"的延迟，WPF在这0.25秒内仍在处理弹窗关闭后的焦点清理逻辑，会覆盖动画设置的IsOpen=True。
2. 焦点状态干扰：未移动鼠标再次点击按钮时，按钮的焦点状态未发生变化，WPF内部的Popup关闭逻辑会残留状态标记，导致后续设置IsOpen的操作被忽略。

解决方法 #

方法1：移除状态动画的延迟 #

将VisualState中设置IsOpen的动画KeyTime改为0:0:0，让状态切换立即生效，避免时序冲突：

<!-- PopupClosed状态修改 -->
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="IconComboBoxPopup"
                                Storyboard.TargetProperty="IsOpen">
    <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
</BooleanAnimationUsingKeyFrames>

<!-- PopupOpen状态修改 -->
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="IconComboBoxPopup"
                                Storyboard.TargetProperty="IsOpen">
    <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
</BooleanAnimationUsingKeyFrames>

方法2：手动控制Popup状态，分离动画与逻辑 #

保留背景切换的动画，但将IsOpen的控制从动画中移出，直接在代码中手动切换：

1. 修改XAML的VisualState，移除BooleanAnimationUsingKeyFrames：

<VisualState x:Name="PopupClosed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames
                Storyboard.TargetName="rootGrid"
                Storyboard.TargetProperty="(Panel.Background)">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{DynamicResource BrushIconComboBox_Popup_Closed_Background}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
<VisualState x:Name="PopupOpen">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames
                Storyboard.TargetName="rootGrid"
                Storyboard.TargetProperty="(Panel.Background)">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{DynamicResource BrushIconComboBox_Popup_Open_Background}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

2. 修改点击事件代码：

public void PopupExpanderButton_Click(object sender, RoutedEventArgs e)
{
    IconComboBoxPopup.IsOpen = !IconComboBoxPopup.IsOpen;
    var popupState = IconComboBoxPopup.IsOpen ? PopupOpen : PopupClosed;
    VisualStateManager.GoToState(this, popupState, true);
    e.Handled = true;
}

方法3：自定义Popup关闭逻辑 #

将Popup.StaysOpen设为True，手动处理点击外部区域关闭弹窗，避免WPF内置逻辑干扰：

// 在控件构造函数或Loaded事件中添加全局鼠标监听
public UXIconComboBox()
{
    Loaded += (s, e) =>
    {
        Mouse.AddPreviewMouseDownHandler(Application.Current.MainWindow, OnGlobalMouseDown);
    };
}

private void OnGlobalMouseDown(object sender, MouseButtonEventArgs e)
{
    if (!IconComboBoxPopup.IsOpen) return;

    // 判断点击是否在Popup或按钮内部
    var hitTestResult = VisualTreeHelper.HitTest(IconComboBoxPopup, e.GetPosition(IconComboBoxPopup));
    var buttonHitTest = VisualTreeHelper.HitTest(PopupExpanderButton, e.GetPosition(PopupExpanderButton));
    if (hitTestResult == null && buttonHitResult == null)
    {
        IconComboBoxPopup.IsOpen = false;
        VisualStateManager.GoToState(this, PopupClosed, true);
    }
}

内容的提问来源于stack exchange，提问作者cpdev