彈出對圖像翻轉

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條件失敗，將設置Property其默認即在這種情況下錯誤的。這裏需要兩個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>