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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.