图像翻转弹出

Question

Here is what I am trying to accomplish:

I have a series of small images (24x24) indicating various system statuses. When a user rolls over of the images (eg a system alert image) I want a popup to display the first 5 alerts and a More... option (if there are more than 5 alerts). While the list is displayed, I want the user to be able to select one of the alerts or the More option and display the details.

The problem I am having is:

I cannot prevent the popup from disappearing when the mouse leaves the image to select an item.

Here is a segment of XAML from my User Control I am using to display the popup.

 <Image x:Name="SmallImage"
               Source="{Binding ElementName=root, Path=ImageSource}"
               Height="{Binding ElementName=root, Path=Height}"
               Width="{Binding ElementName=root, Path=Width}"
               Grid.Row="0" />
        <Popup Name="ItemPopup"
               AllowsTransparency="True"
               PopupAnimation="Fade"
               HorizontalOffset="-35"
               VerticalOffset="0"
               Grid.Row="1">
            <Popup.Style>
                <Style TargetType="{x:Type Popup}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                            <DataTrigger.Setters>
                              <Setter Property="IsOpen" Value="True" />

                           </DataTrigger.Setters>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Popup.Style>
            <Border x:Name="MyBorder" BorderBrush="#72777F" Background="White" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5">
                <Grid>
                    <Label Content="This is your list of items."></Label>
                </Grid>
            </Border>
        </Popup> 

Answer 1

This is because your Trigger will fire everytime the IsMouseOver Property will change and in case Trigger condition fails it will set the Property to its default ie false in this case. You will need two Triggers here, one for opening the popup in case of IsMouseOver is true and second is to keep popup open if IsMouseOver becomes false and Popup was already open.

         <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                <DataTrigger.Setters>
                    <Setter Property="IsOpen" Value="True" />
                </DataTrigger.Setters>
            </DataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="False"/>
                    <Condition Binding="{Binding IsOpen, RelativeSource={RelativeSource Self}}" Value="True"/>
                </MultiDataTrigger.Conditions>
                <Setter Property="IsOpen" Value="True" />
            </MultiDataTrigger>
        </Style.Triggers>