如何正确地将 Popup 绑定到 ToggleButton? [英] How do I correctly bind a Popup to a ToggleButton?

问题描述

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

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 ToggleButton and I am trying to show a Popup when the button is toggled in and hide the Popup when the button is toggled out. The Popup also hides when the user clicks away from it.

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

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

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

I suspect what's going on here is that clicking away from the Popup is 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.

感谢任何帮助.谢谢.

    <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>

推荐答案

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

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

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

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:

    <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>

转换器如下所示:

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");
    }
}

这篇关于如何正确地将 Popup 绑定到 ToggleButton?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！