CODEWITHSUNDEEP
wpfpopupitunes
user3243854
user3243854

Reputation:

Styling WPF Popup (like popups iTunes has)

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

enter image description here enter image description here

Upvotes: 3

Views: 2917

Answers (1)

Bizhan
Bizhan

Reputation: 17095

<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.

Upvotes: 3

Related Questions