wpf popup doesn't close when focus is lost in xaml

Question

Hi,

I've written following xaml code to show a popup with the content in a expander control. all the things work ok up to the position where the popup opens when the button is clicked. but the popup wont close when I click away from it. plus as soon as I click away to close the popup my whole application seems to be freezed for a little amount of time. Im trying to figure out what might be the issue. could anyone assist me to find this please ?. Thanks you.

<Style TargetType="{x:Type Expander}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <StackPanel>
                        <Button x:Name="btnTask" Content="{TemplateBinding Header}" >
                            <Button.Template>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Label Content="{TemplateBinding Content}" Margin="2,0,2,0" />
                                </ControlTemplate>
                            </Button.Template>
                            <Button.ToolTip>
                                <Border CornerRadius="0,2,0,2" BorderBrush="White" BorderThickness="1" Background="SeaShell">
                                    <StackPanel Width="150" Height="Auto">
                                        <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Tag}" Padding="2"/>
                                    </StackPanel>
                                </Border>
                            </Button.ToolTip>
                        </Button>
                        <Popup x:Name="popupTask" Height="200" Width="200" StaysOpen="False">
                            <ContentControl Content="{TemplateBinding Content}" />
                        </Popup>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <EventTrigger SourceName="btnTask" RoutedEvent="ButtonBase.Click">
                            <BeginStoryboard>
                                <Storyboard TargetName="popupTask">
                                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" BeginTime="0:0:0" Duration="0:0:3">
                                        <DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="True" />
                                    </BooleanAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

You can use a ToggleButton instead of a Button and use a different trigger, based on the ToggleButton's property IsChecked. Here is how you can change your style:

        <Style TargetType="{x:Type Expander}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <StackPanel>
                            <ToggleButton x:Name="btnTask" Content="{TemplateBinding Header}">
                                <ToggleButton.Template>
                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                        <Label Content="{TemplateBinding Content}" Margin="2,0,2,0" />
                                    </ControlTemplate>
                                </ToggleButton.Template>
                                <ToggleButton.ToolTip>
                                    <Border CornerRadius="0,2,0,2" BorderBrush="White" BorderThickness="1" Background="SeaShell">
                                        <StackPanel Width="150" Height="Auto">
                                            <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Tag}" Padding="2"/>
                                        </StackPanel>
                                    </Border>
                                </ToggleButton.ToolTip>
                            </ToggleButton>
                            <Popup x:Name="popupTask" Height="200" Width="200" StaysOpen="False">
                                <ContentControl Content="{TemplateBinding Content}" />
                            </Popup>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger SourceName="btnTask" Property="IsChecked" Value="True">
                                <Setter TargetName="popupTask" Property="IsOpen" Value="True" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>