Hiding popup on mouse click with Popup.StaysOpen in WPF

I got my UserControl that contain:

• Button
• Popup (contain Text block)

XAML

<UserControl>
<button Name="btnShowPopup" Content="Button" Click="Button_Click"/>
<Popup Name="popup" StaysOpen="true">
<TextBlock Text="Popup"/>
</Popup>
</UserControl>

Code Behide

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
   this.popup.IsOpen=!this.popup.IsOpen;
}开发者_运维问答

QUESTION: I want to hide the popup, when mouse click on anywhere outside the btnShowPopup button.

NOTE: I tried change StaysOpen="false" and when btnShowPopup.MouseDown event: this.popup.IsOpen=!this.popup.IsOpen; But this solution cause another problem: when btnShowPopup.MouseUp event, the Popup is disappear.

Please help.

---

You can also bind the StaysOpen property on the togglebutton :

StaysOpen="{Binding ElementName=toggleButton,Path=IsMouseOver}"

https://social.msdn.microsoft.com/Forums/vstudio/en-US/f0502813-9c4f-4b45-bab8-91f98971e407/popup-popupstaysopen-togglebutton-and-data-binding-helpful-tip?forum=wpf

The problem for me was if i double clicked on my datagrid, wich is in the popup, the popup re opened directly, that's why i used the multibinding. What i've done :

I Multi binded the StayOpen property on IsMouseOver toggleButton and on my IsMouseOver datagrid wich is in the popup.

<Popup.StaysOpen>
    <MultiBinding Converter="{StaticResource MultiBinding_StayOpen}">
        <Binding ElementName="toggleButton"  Path="IsMouseOver"/>
        <Binding ElementName="dtg_loc" Path="IsMouseOver" />
    </MultiBinding>
</Popup.StaysOpen>

The multiBindingConverter :

public class MultiBinding_StayOpen : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {

        bool toggleIsMouseOver;
        bool datagridIsMouseOver;

        toggleIsMouseOver = System.Convert.ToBoolean(values[0]);
        datagridIsMouseOver = System.Convert.ToBoolean(values[1]);


        if (toggleIsMouseOver == false && datagridIsMouseOver == false)
            return false;

        if (toggleIsMouseOver == true && datagridIsMouseOver == false)
            return true;

        if (toggleIsMouseOver == true && datagridIsMouseOver == true)
            return false;

        return true;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Hope it help :-)

---

Set The Property ClickMode="Press" on the Toggle Button.

<ToggleButton x:Name="myToggle" ClickMode="Press" />

---

I would try a more WPF-esque approach. Instead of doing code behind, I would try to bind properties. If you change the Button for a ToggleButton it's easy. You see, ToggleButton has a Boolean property named IsChecked

<ToggleButton x:Name="myToggle" />
<Popup x:Name="Popup"
    IsOpen="{Binding Path=IsChecked, ElementName=myToggle}"
    Placement="Right"
    PlacementTarget="{Binding ElementName=myToggle}"
    AllowsTransparency="True" 
    Focusable="False"
    PopupAnimation="Fade"
    StaysOpen="False">
    <Textblock Text="Here goes my content" />
</Popup>

What do you think?

---

Tio. This is the solution I'm trying too. However there are two problems with it.

1) When you press the button, the popup opens, however if you press the button again, the popup closes, and then rapidly opens again. That is not the behavior I expected, I thought it would close again then.

2) If you tab away from the toggle button, the popup stays open.

I googled around a bit, of course some other guy had had the same problem, and solved it :=)

check this out: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f0502813-9c4f-4b45-bab8-91f98971e407