Popup not closing with 2 way binding to button

Question

I have a custom control that is based around the functionality of a combobox.

Below, is the simplified template :

<Window x:Class="WpfApplication70.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        WindowStartupLocation="CenterScreen">
    <StackPanel>
        <Grid>
            <ToggleButton  Name="PART_DropDownButton"
                           MinHeight="20"
                           ClickMode="Release">
                <Path x:Name="BtnArrow"
                      Height="4"
                      Width="8"
                      Stretch="Uniform"
                      Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "
                      Margin="0,0,6,0"
                      Fill="Black"
                      HorizontalAlignment="Right" />
            </ToggleButton>
            <Popup IsOpen="{Binding IsChecked, Mode=TwoWay, ElementName=PART_DropDownButton}"
                   StaysOpen="False"
                   MaxHeight="400">
                <Ellipse Fill="Red"
                         Width="50"
                         Height="50" />
            </Popup>
        </Grid>
    </StackPanel>
</Window>

This seems to work, in that I can click the button, the popup opens, and then it closes when I click outside the popup.

However, I want the popup to open when the button is pressed, not released. But changing 'ClickMode' to Press stops the popup closing when you click outside the popup.

How can I solve this?

Answer 1

Managed to figure this out by reading the .net source code for ComboBox (didn't know about CaptureMode.SubTree, so also learnt something new :) ). Here is a userControl showing the answer in practice.

XAML

<UserControl x:Class="WpfApplication74.CustomDropdown"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
    <ToggleButton  Name="PART_DropDownButton"
                   IsChecked="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                   MinHeight="20"
                   HorizontalContentAlignment="Right"
                   ClickMode="Press">
        <Path x:Name="BtnArrow"
              Height="4"
              Width="8"
              Stretch="Uniform"
              Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "
              Margin="0,0,6,0"
              Fill="Black" />
    </ToggleButton>
    <Popup IsOpen="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
           StaysOpen="False"
           MaxHeight="400"
           Width="{Binding ActualWidth, ElementName=PART_DropDownButton}"
           Opened="OnPopupOpened"
           Name="PART_Popup">
        <Border BorderThickness="1"
                BorderBrush="Black"
                Background="#EEE"
                Padding="20">
            <StackPanel>
                <TextBox />
                <Slider />
                <TextBox />
                <Slider />
            </StackPanel>
        </Border>
    </Popup>
</Grid>

Code-behind

public partial class CustomDropdown : UserControl
{
    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));

    public CustomDropdown()
    {
        InitializeComponent();
    }

    void OnPopupOpened(object sender, EventArgs e)
    {
        Mouse.Capture(this, CaptureMode.SubTree);
    }

    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        base.OnMouseDown(e);

        if (Mouse.Captured == this && e.OriginalSource == this)
        {
            SetCurrentValue(CustomDropdown.IsOpenProperty, false);
            ReleaseMouseCapture();
        }

        e.Handled = true;
    }
}

Answer 2

Try to manually set the property IsOpen of Popup in the events: Checked and Unchecked, and when the Popup is closed, reset ToggleButton.IsChecked to False.

Example:

XAML

<StackPanel>
    <Grid>
        <ToggleButton  Name="PART_DropDownButton"
                       Checked="PART_DropDownButton_Checked"
                       Unchecked="PART_DropDownButton_Unchecked">

            <Path x:Name="BtnArrow"
                  Height="4"
                  Width="8"
                  Stretch="Uniform"
                  Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "
                  Margin="0,0,6,0"
                  Fill="Black"
                  HorizontalAlignment="Right" />
        </ToggleButton>

        <Popup Name="MyPopup"
               StaysOpen="False"
               Closed="MyPopup_Closed"
               MaxHeight="400">

            <Ellipse Fill="White"
                     Width="50"
                     Height="50" />
        </Popup>
    </Grid>
</StackPanel>

Code-behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MyPopup_Closed(object sender, EventArgs e)
    {
        if (PART_DropDownButton != Mouse.DirectlyOver)
            PART_DropDownButton.IsChecked = false;
    }

    private void PART_DropDownButton_Checked(object sender, RoutedEventArgs e)
    {
        MyPopup.IsOpen = true;
    }

    private void PART_DropDownButton_Unchecked(object sender, RoutedEventArgs e)
    {
        MyPopup.IsOpen = false;
    }
}