WPF自定义Popup控件设ClickMode为Press时无法外部点击关闭怎么办？

问题根源在于ToggleButton的ClickMode="Press"与Popup的StaysOpen="False"事件处理逻辑冲突：设置为Press时，MouseDown事件会立即触发ToggleButton的状态切换，此时鼠标仍处于按下状态，后续点击外部的MouseUp事件会被干扰，导致Popup无法正常关闭。

下面提供两种可行的解决方式：

方法一：手动处理MouseDown事件，同步ToggleButton状态 #

1. 扩展CustomDropdown类逻辑 #

修改控件类，通过重写OnMouseDown控制IsOpen，并同步ToggleButton的选中状态：

internal class CustomDropdown : ContentControl
{
    public bool IsOpen
    {
        get { return (bool)GetValue(IsOpenProperty); }
        set { SetValue(IsOpenProperty, value); }
    }

    public static readonly DependencyProperty IsOpenProperty =
        DependencyProperty.Register("IsOpen", typeof(bool), typeof(CustomDropdown), 
            new PropertyMetadata(false, OnIsOpenChanged));

    private static void OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is CustomDropdown control && control.Template.FindName("ToggleBtn", control) is ToggleButton btn)
        {
            btn.IsChecked = (bool)e.NewValue;
        }
    }

    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        base.OnMouseDown(e);
        IsOpen = !IsOpen;
        e.Handled = true;
    }
}

2. 调整ControlTemplate绑定 #

修改模板中ToggleButton的绑定模式，避免Press模式干扰：

<Style TargetType="{x:Type local:CustomDropdown}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomDropdown}">
                    <Grid>
                        <ToggleButton x:Name="ToggleBtn" 
                                      ClickMode="Release"
                                      IsChecked="{Binding IsOpen, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        <Popup StaysOpen="False"
                               Placement="Bottom"
                               IsOpen="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            <Border Background="White"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    Padding="50">
                                <TextBlock Text="Popup!" />
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

方法二：移除ToggleButton，直接用Grid处理MouseDown #

如果不需要ToggleButton的视觉状态，可以简化模板，直接通过Grid的MouseDown事件控制IsOpen：

1. 添加布尔反转转换器 #

public class InverseBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }
}

2. 声明转换器资源 #

在窗口或应用资源中添加转换器：

<Window.Resources>
    <local:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
</Window.Resources>

3. 修改ControlTemplate #

<Style TargetType="{x:Type local:CustomDropdown}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomDropdown}">
                    <Grid x:Name="RootGrid">
                        <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        <Popup StaysOpen="False"
                               Placement="Bottom"
                               IsOpen="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            <Border Background="White"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    Padding="50">
                                <TextBlock Text="Popup!" />
                            </Border>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen">
                                        <DiscreteBooleanKeyFrame KeyTime="0" Value="{Binding IsOpen, Converter={StaticResource InverseBooleanConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                                    </BooleanAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

核心逻辑说明 #

两种方法都是绕开ToggleButton的Press模式干扰，通过手动处理MouseDown事件控制Popup的打开，同时保留Popup的StaysOpen="False"逻辑来响应外部点击关闭，确保事件流不受阻断。

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