[英]Popup on image rollover
这是我要完成的工作:
我有一系列小图像(24x24),指示各种系统状态。 当用户将鼠标悬停在图像(例如系统警报图像)上时,我希望弹出窗口显示前5个警报和“ 更多...”选项(如果有5个以上警报)。 显示列表时,我希望用户能够选择警报之一或“ 更多”选项并显示详细信息。
我遇到的问题是:
当鼠标离开图像选择项目时,我无法阻止弹出窗口消失。
这是我用来显示弹出窗口的用户控件中XAML的一部分。
<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>
这是因为Trigger
会在IsMouseOver
属性每次更改时Trigger
并且如果Trigger
条件失败,则会将Property
设置为其默认值,在这种情况下为false。 您将在此处需要两个Triggers
,一个用于在IsMouseOver
为true的情况下打开弹出窗口,第二个是在IsMouseOver
变为false且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>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.