如何正确将弹出窗口绑定到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");
    }
}

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