Styling WPF Popup (like popups iTunes has) - wpf

Question

I'm trying to create a popup that resembles what iTunes has when you click the arrow button or when you click the upnext button. can anyone help me style this in WPF? I could use some code samples, Thanks

Answer 1

<DataTemplate x:Key="popupStyle">
<Canvas>
<ToggleButton Content="test" IsChecked="{Binding IsPopupVisible, Mode=TwoWay}"/>
<AdornerDecorator Opacity="0" x:Name="adorner" Margin="20,0,0,0">
<AdornerDecorator.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</AdornerDecorator.Effect>
<Grid>
<Polygon Stroke="Silver" StrokeThickness="2" Fill="#AFFF" Points="0 10 20 0 150 0 150 150 20 150 20 20"/>
<StackPanel Margin="30,10,10,10">
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
</StackPanel>
</Grid>
</AdornerDecorator>
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsPopupVisible}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:0.3">
<DoubleAnimation
Storyboard.TargetName="adorner"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.3" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Duration="0:0:0.3">
<DoubleAnimation
Storyboard.TargetName="adorner"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.3" To="0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
This DataTemplate is using a boolean variable in its ViewModel, named IsPopupVisible.
You can use the DataTemplate in a Window like below:
<Window... MouseDown="Window_MouseDown">
<Window.Resources>
<DataTemplate x:Key="popupStyle">
...
</DataTemplate>
</Window.Resources>
<ContentPresenter ContentTemplate="{StaticResource popupStyle}" Content="{Binding}"/>
</Window>
and add the mouseDown event to the whole Window:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
IsPopupVisible = false;
}
so that when user clicks anywhere else, popup goes hidden.