WPF How to attach Popup to simple UIElement like rectangle - wpf

Question

It took me hours to figure out the answer to this question, so I thought I would write an FAQ or answer for what I found. (it is based on the following thread Binding Textbox IsFocused to Popup IsOpen plus additional conditions)
I found lots of examples of binding popups to things like toggle buttons and other things that are based on windows chrome and have built in triggers. But in my application I wanted to bind a popup to a simple rectangle with a custom brush fill. I could not find an example on how to have a popup open ans stay open when a user mouses over the rectangle.
So I am posting this question and I will immediately post the answer I found so that hopefully someone else can benefit from it. I will also mark an answer for anyone who can help me understand if stackoverflow allows posts like this, or a better way I could have gone about it.
EDIT 1)
I can't self answer for 8 hours so here is the working code:
the following is a simple example of how to use the popup on a basic UIElement like a rectangle/ellipse/etc...
<Grid HorizontalAlignment="Stretch" Height="Auto">
<Rectangle x:Name="PopupRec"
Grid.Row="0"
Width="20" Height="20"
HorizontalAlignment="Right"
Fill="Gray" Margin="0,0,0,10" />
<Popup x:Name="SortPopup"
PlacementTarget="{Binding ElementName=PopupRec}"
StaysOpen="False"
PopupAnimation="Slide"
AllowsTransparency="True">
<Border Background="White" Padding="15">
<StackPanel Orientation="Vertical">
<Button Command="{Binding MyCommand}" CommandParameter="5">5</Button>
<Button Command="{Binding MyCommand}" CommandParameter="10">10</Button>
<Button Command="{Binding MyCommand}" CommandParameter="15">15</Button>
<Button Command="{Binding MyCommand}" CommandParameter="20">20</Button>
</StackPanel>
</Border>
<Popup.Style>
<Style TargetType="{x:Type Popup}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=PopupRec, Path=IsMouseOver}" Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=SortPopup, Path=IsMouseOver}" Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</Popup.Style>
</Popup>
</Grid>
Just paste this inside window/usercontrol/etc...

Answer 1

I'd suggest the following improvement. It would make the Popup Style independent of any element names, and would thus enable you to use it as a default Style by putting it into the Window's or UserControl's Resources.
<Style TargetType="{x:Type Popup}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver,
RelativeSource={RelativeSource Self}}"
Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=PlacementTarget.IsMouseOver,
RelativeSource={RelativeSource Self}}"
Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
And please note that a Rectangle is not a "basic UIElement". It's a Shape, which itself is a FrameworkElement.