wpf 如何正确地将 Popup 绑定到 ToggleButton？

How do I correctly bind a Popup to a ToggleButton?

提问by craftworkgames

I am trying to do something that seems relatively simple and logic from a user interface level but I have one bug that is very annoying. I have a ToggleButtonand I am trying to show a Popupwhen the button is toggled in and hide the Popupwhen the button is toggled out. The Popupalso hides when the user clicks away from it.

我正在尝试做一些从用户界面级别看起来相对简单和逻辑的事情，但我有一个非常烦人的错误。我有一个ToggleButton，我试图Popup在按钮切换时显示一个，并Popup在按钮切换出时隐藏一个。该Popup还隐藏当用户点击远离它。

Everything is working as expected with the following XAML except when I click the toggle button after the Popupis shown, the Popupdisappears for a split second then reappears.

使用以下 XAML 一切正常，除非我在显示 后单击切换按钮时Popup，Popup消失一瞬间然后重新出现。

I suspect what's going on here is that clicking away from the Popupis causing it to toggle the button off then immediately after the button is toggled back on as the mouse clicks it. I just don't know how to go about fixing it.

我怀疑这里发生的事情是，点击远离Popup会导致它关闭按钮，然后在鼠标单击它时立即重新打开按钮。我只是不知道如何修复它。

Any help is appreciated. Thanks.

任何帮助表示赞赏。谢谢。

    <ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" />

    <Popup StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}">
        <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
            <TextBlock>This is a test</TextBlock>
        </Border>                
    </Popup>

回答by schoola

Stephans answers has the disadvantage, that the desired behaviour of closing the popup whenever it loses focus also disappears.

Stephans 的回答有一个缺点，即在失去焦点时关闭弹出窗口的期望行为也会消失。

I solved it by disabling the toggle-button when the popup is open. An alternative would be to use the IsHitTestVisible Property instead of is enabled:

我通过在弹出窗口打开时禁用切换按钮来解决它。另一种方法是使用 IsHitTestVisible 属性而不是启用：

    <ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100"  IsEnabled="{Binding ElementName=ToggledPopup, Path=IsOpen, Converter={StaticResource BoolToInvertedBoolConverter}}"/>
    <Popup x:Name="ToggledPopup" StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}">
        <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
            <TextBlock>This is a test</TextBlock>
        </Border>                
    </Popup>

The converter looks like this:

转换器看起来像这样：

public class BoolToInvertedBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is bool)
        {
            bool boolValue = (bool)value;
            return !boolValue;
        }
        else
            return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException("ConvertBack() of BoolToInvertedBoolConverter is not implemented");
    }
}

回答by Maxim Prasolov

Solution without IValueConverter:

没有 IValueConverter 的解决方案：

<Grid>
    <ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" >
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="IsHitTestVisible" Value="True"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=Popup, Path=IsOpen}" Value="True">
                        <Setter Property="IsHitTestVisible" Value="False"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>

    <Popup StaysOpen="false" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}"
               PlacementTarget="{Binding ElementName=TogglePopupButton}" PopupAnimation="Slide" 
           x:Name="Popup">
        <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
            <TextBlock>This is a test</TextBlock>
        </Border>
    </Popup>
</Grid>

回答by mikesl

On the ToggleButton set the Property ClickMode="Press"apixeltoofar

在 ToggleButton 上设置属性ClickMode="Press"apixeltoofar

回答by Stephan Bauer

Set StaysOpen="True"for your Popup

StaysOpen="True"为您设置Popup

From MSDN:

从MSDN：

Gets or sets a value that indicates whether the Popup control closes when the control is no longer in focus.

[...]

trueif the Popupcontrol closes when IsOpenproperty is set to false;

falseif the Popupcontrol closes when a mouse or keyboard event occurs outside the Popupcontrol.

获取或设置一个值，该值指示当控件不再处于焦点时是否关闭 Popup 控件。

[...]

true如果Popup控件在IsOpen属性设置为时关闭false；

false如果Popup控件在Popup控件外发生鼠标或键盘事件时关闭。