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

Question

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>