圖像翻轉彈出

Question

這是我要完成的工作：

我有一系列小圖像（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> 

Answer 1

這是因為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>