How to close Popup with trigger button

Question

Hi I need the trigger button to open and also close the popup, and the popup should close whenever a mouse click occurs outside the popup.

Here's my XAML:

<Button x:Name="About"
                    Height="50"
                    Margin="0,-30,5,0"
                    HorizontalAlignment="Right"
                    Style="{StaticResource AboutButtonStyle}" />
<Popup HorizontalOffset="-300"
                   IsOpen="{Binding IsAboutPopupOpen, Mode=TwoWay}"
                   Placement="RelativePoint"
                   PlacementTarget="{Binding ElementName=About}"
                   StaysOpen="False"
                   VerticalOffset="-125">
    <Border Padding="10"
                        Background="White"
                        BorderBrush="{StaticResource SeparatorColorBrush}"
                        BorderThickness="1">
        <TextBlock>Some Text</TextBlock>
    </Border>
</Popup>

In my AboutViewModel I have implemented a property, IsAboutPopupOpen :

private bool isAboutPopupOpen;

public bool IsAboutPopupOpen
{
    get
    {
        return this.isAboutPopupOpen;
    }

    set
    {
        if (value != this.isAboutPopupOpen)
        {
            this.isAboutPopupOpen = value;
            this.NotifyOfPropertyChange(() => IsAboutPopupOpen);
        }
    }
}

public void About()
{
    IsAboutPopupOpen = true;
}

The issue is, when the popup is open, and I click the About button, the PopUp closes and opens again. It should close. Other than that, the behavior is right.

I have searched for a simple solution to this, and cannot seem to find it. This should be a common question. Oh and I'm using Caliburn.Micro, but that shouldn't matter, I don't think. Thanks

Answer 1

@Xiaoy312 pointed me in the right direction. First I decided to use a ToggleButton:

    <ToggleButton
        x:Name="ShowAboutPopup"
        Grid.Row="1"
        Height="50"
        Margin="0,-30,5,0"
        HorizontalAlignment="Right"
        Grid.ZIndex="1000"
        Style="{StaticResource AboutButtonStyle}" />

Then I decided to connect my ToggleButton to the popup via the IsOpen attribute, and setting StaysOpen to false:

    <Popup
        Grid.Row="1"
        Closed="AboutPopup_OnClosed"
        HorizontalOffset="-300"
        IsOpen="{Binding ElementName=ShowAboutPopup, Path=IsChecked, Mode=OneWay}"
        Placement="RelativePoint"
        PlacementTarget="{Binding ElementName=ShowAboutPopup}"
        StaysOpen="False"
        VerticalOffset="-125">
...
    </Popup>

And finally I implemented AboutPopup_OnClosed in the code-behind:

    private void AboutPopup_OnClosed(object sender, EventArgs e)
    {
        if (!object.Equals(this.ShowAboutPopup, Mouse.DirectlyOver))
        {
            this.ShowAboutPopup.IsChecked = false;
        }
    }

Hope this helps others that may have struggled with this. The bottom line is that you should typically use a toggle button to open and close a popup.