Question

I have an Image and a Popup. When clicked on the Image popup should open.

I started like that and now I stuck.

        <Image x:Name="LockImage" Source="/Lock.png">
            <Image.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    // ?????? WHAT's here?
                </EventTrigger>
            </Image.Triggers>
        </Image>
        <Popup x:Name="LockPopup" PlacementTarget="{Binding ElementName=LockImage}">
            <TextBlock Text="This is a popup" />
        </Popup>

UPD… Ooops, actually I forgot… I’d like the popup to be shown not immediately but rather after a second or two. If it was just a click, It would be something else… (default action)

Answer 1

Here is the solution of what you want to do. Delay time can be set at Storyboard definitions. Insert this code into new wpf app project Window.xaml file.

<Window.Resources>
        <Storyboard x:Key="ShowPopup">
            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="LockPopup" Storyboard.TargetProperty="(Popup.IsOpen)">
                <DiscreteBooleanKeyFrame KeyTime="00:00:00.5" Value="True" />
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="HidePopup" Storyboard.TargetName="LockPopup" Storyboard.TargetProperty="(Popup.IsOpen)">
            <BooleanAnimationUsingKeyFrames>
                <DiscreteBooleanKeyFrame KeyTime="00:00:00.5" Value="False" />
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="grid" ShowGridLines="True">
        <Image x:Name="LockImage" Stretch="None" >
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Brush="Black">
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="10" RadiusY="10"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                    <BeginStoryboard Storyboard="{StaticResource ShowPopup}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Image.MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource HidePopup}"/>
                </EventTrigger>
            </Image.Triggers>
        </Image>
        <Popup x:Name="LockPopup" PlacementTarget="{Binding ElementName=LockImage}" DataContext="{Binding}" Placement="Bottom">
            <TextBlock Text="This is a popup" Background="White" Foreground="Black" />
        </Popup>       
    </Grid>