WPFアイテムコントロール - アイテムごとのポップアップ "ホバー"エフェクト

Question

ItemsControlがあり、マウスがコントロールの周りを移動するときに各アイテムの横にポップアップを表示したいと思います。これは私がする、これまで持っているところである： - 現状では

<Page.Resources> 
    <DataTemplate x:Key="ItemTemplate"> 
     <Border x:Name="border" Background="AliceBlue"> 
      <Grid> 
       <TextBlock Text="X" /> 

       <Popup x:Name="ElementPopup" 
         StaysOpen="False" 
         Placement="Right" 
         PlacementTarget="{Binding ElementName=border}" 
         SnapsToDevicePixels="True"> 
        <Border Background="Orange" Width="50" Height="50"> 
         <TextBlock Text="Popup!" /> 
        </Border> 
       </Popup> 
      </Grid> 
     </Border> 
     <DataTemplate.Triggers> 
      <Trigger Property="IsMouseOver" 
        Value="True"> 
       <Setter TargetName="border" 
         Property="Background" 
         Value="Yellow" /> 
       <Setter TargetName="ElementPopup" 
         Property="IsOpen" 
         Value="true" /> 
      </Trigger> 
     </DataTemplate.Triggers> 
    </DataTemplate> 
</Page.Resources> 

<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" Width="100"> 
    <sys:String>X</sys:String> 
    <sys:String>X</sys:String> 
    <sys:String>X</sys:String> 
</ItemsControl> 

、ポップアップは、私が最初の項目の上に置くと表示されますが、それは場所に残り、私はにポップアップの外側をクリックする必要がありますそれを取り除く。

マウスが別のアイテムを移動するとポップアップが表示され、消えるように、ツールチップのように機能する必要があります。上記のXAMLで正しい行にいるか、別のアプローチを検討する必要がありますか。ツールチップを使用して？ （実際のポップアップには、ユーザーが操作できるいくつかのコントロールが含まれていることに注意してください）。

Answer 1

私は少しあなたのコードを微調整してきましたし、（アプローチは良くないですが）、それは動作します：

<Window.Resources> 
    <DataTemplate x:Key="ItemTemplate"> 
     <Border x:Name="border" Background="AliceBlue"> 
      <Grid> 
       <TextBlock Text="{Binding }" /> 

       <Popup x:Name="ElementPopup" IsOpen="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=IsMouseOver,Mode=OneWay}" 
        StaysOpen="True" 
        Placement="Right" 
        PlacementTarget="{x:Null}" Focusable="False" 
        SnapsToDevicePixels="True"> 
        <Border Background="Orange" Width="50" Height="50"> 
         <TextBlock Text="{Binding }" Focusable="False" /> 
        </Border> 
       </Popup> 
      </Grid> 
     </Border> 
     <DataTemplate.Triggers> 
      <Trigger Property="IsMouseOver" 
       Value="True"> 
       <Setter TargetName="border" 
        Property="Background" 
        Value="Yellow" />     
      </Trigger> 
     </DataTemplate.Triggers> 
    </DataTemplate> 
</Window.Resources>  
<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" Width="100"> 
    <sys:String>X</sys:String> 
    <sys:String>Y</sys:String> 
    <sys:String>Z</sys:String> 
</ItemsControl> 

出力：