Hide border and child controls on mouse left button click outside in WPF

Question

I have below border:

    <Border CornerRadius="10,10,0,0" Height="23" 
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            BorderBrush="DarkBlue" 
            BorderThickness="1"  
            Background="AntiqueWhite">
            <StackPanel  Orientation="Horizontal" 
                         HorizontalAlignment="Center">
                <Image Source="/Resources/Info_48.png" 
                       Height="20" 
                       Width="20" 
                       Stretch="Fill"/>
                <TextBlock Width="90" 
                           VerticalAlignment="Center" 
                           HorizontalAlignment="Left" 
                           Background="Transparent" 
                           FontSize="12">
                     <Run Text="This is a Popup simulation"/>
                 </TextBlock>
            </StackPanel>
    </Border>

This border is being visible when a panel is shown. Once border and child components are shown, they will be automatically hidden on mouse click wherever in the window.

What I am trying to do is to detect mouse click event outside the boder and its child components. Once click detected outside, I need to hide the border and its child components similar to popup when StaysOpen=false and it is automatically hidden on mouse click.

How can I detect mouse click outside the control?

Answer 1

set style for border to visible or hide the border by change the color or etc..

<Border  Background="Transparent" 
     Height="18" Width="18">
 <Border.Style>
    <Style Target-type="Border">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="visibility" Value="false" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Border.Style>