Bind Content of a UserControl to a Popup inside that UserControl - wpf

Question

I am trying to create a UserControl consisting of a button that causes an info popup to show up when clicked. The design and style of the button is defined in the UserControl and will not change, the Content of the Popup should use the Content property of the UserControl itself.
My current approach for the control is:
<UserControl x:Class="InfoPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="30">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Grid>
<ToggleButton Name="button">
<Label Content="i"/>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False">
<ContentPresenter />
</Popup>
</Grid>
</ControlTemplate>
</UserControl.Template>
</UserControl>
And the code where it is used should look like this:
<local:InfoPopup VerticalAlignment="Top" HorizontalAlignment="Right" Height="30" Width="30">
<TextBlock TextWrapping="Wrap" Margin="5" MaxWidth="400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras pulvinar mattis nunc sed. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Vestibulum rhoncus est pellentesque elit ullamcorper. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.
<LineBreak />
<LineBreak />
Est sit amet facilisis magna. Quis enim lobortis scelerisque fermentum dui faucibus. Magna eget est lorem ipsum dolor sit amet. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Viverra nam libero justo laoreet sit amet cursus sit. Fermentum posuere urna nec tincidunt praesent. Maecenas volutpat blandit aliquam etiam erat velit scelerisque.
</TextBlock>
</local:InfoPopup>
This causes the popup to show up with the correct size (according to the specified Content) when the button is clicked, but the actual popup content is just (literally) a black box.
What am I missing? I am not very familiar with WPF bindings and templates.

Answer 1

The popup contents are black because the foreground and background are black (by default).
You can either set AllowsTransparency="True" on the Popup (if you want the background to be transparent).
<Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False" AllowsTransparency="True">
Or, do something like put a Grid around the ContentPresenter with a background of your choice, like this:
<Grid Background="White">
<ContentPresenter />
</Grid>
If you want the default background color, try this:
<Grid Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ContentPresenter />
</Grid>