Wpf – Popup doesn’t lose focus and close until I’ve clicked a control within it

wpfwpf-controls

I'm trying to create a dropdown control consisting of a ToggleButton and a Popup control with a TabControl inside. My problem is, that the Popup doesn't close automatically unless I've clicked a certain control inside it.

Consider the example below where the popup contains a TabControl which itself contains a Calendar control inside a TabItem.

The expected behavior is that the Popup Closes whenever it loses focus (i.e. clicking the container window), but in order for the popup to fire a LostFocus event and thus closing, I have to click one of the arrow buttons on the Calendar control first.

<UserControl
        x:Class="DropDownExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Grid>
        <ToggleButton x:Name="ToggleButton" 
                      ClickMode="Press">Example</ToggleButton>
        <Popup x:Name="Popup"
               Placement="Bottom"
               AllowsTransparency="True"
               StaysOpen="False"
               PopupAnimation="Slide"
               FocusManager.IsFocusScope="false">
            <TabControl x:Name="TabControl"
                        MinHeight="200">
                <TabItem>
                    <Calendar />
                </TabItem>
            </TabControl>
        </Popup>
    </Grid>
</UserControl>

The opening/closing of the Popup is controlled in the Checked/Unchecked events of the ToggleButton.

Best Solution

The problem is in that the ToggleButton has ClickMode=Press. Setting ClickMode=Release fixes the problem and Popup closes on focus lost.

Related Question