图像翻转时弹出

本文关键字：翻转 图像 | 更新日期: 2023-09-27 18:35:48

这是我想要完成的：

我有一系列小图像（24x24），指示各种系统状态。当用户滚动图像（例如系统警报图像）时，我希望弹出窗口显示前 5 个警报和一个 More... 选项（如果警报超过 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>

图像翻转时弹出

这是因为每次IsMouseOver属性更改时，您的Trigger都会触发，如果条件失败Trigger它将Property设置为默认值，即在这种情况下为 false。您将需要两个Triggers，一个用于在IsMouseOver为真的情况下打开弹出窗口，第二个用于在IsMouseOver变为假并且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>
相关文章：