WPF - 単一の希望の画像ではなく、マウスベースのイベントをトリガーするすべての画像

Question

私にはわからないWPFアプリケーションでは少し問題があります。私のインターフェイスは、5つのオーバーラップする透明な画像で構成されています全ての画像は同じサイズであり、インタフェースの異なる要素が各画像を通して見える。私の問題は、一番上のイメージ（グリッドで最後に定義された最後のイメージ）とやりとりできることだけです。 MouseLeftButtonUp、MouseRightButtonUp、MouseEnter、およびMouseLeaveイベントハンドラを最上位のイメージにリンクしましたが、何らかの理由でアプリケーションを実行して他のイメージ（最前面のイメージの透明部分を介して）と対話すると、と述べた。 これはなぜですか、どのように修正できますか？

編集：

MouseProblem project file

編集：私は（スタックオーバーフローが、私は2つの以上のリンクを投稿することはできないだろう）、以下の対応する画像を添付しました：ここでは簡略化されたプロジェクトファイルへのリンクがあります

注：イベントをトリガーする唯一の時間は、マウスが最小、最も中央の円（Inner_Button）を入力、クリックまたは離れるときです。

次のように私のグリッドが設定されている

The 5 interface elements

：

<Grid> 
    <Image 
     x:Name="Frame" 
     Margin="5" 
     Source="Interface/Frame.png" 
     Height="250" 
     Width="250" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     /> 

    <Image 
     x:Name="Outer_Indicator" 
     Margin="5" 
     Source="Interface/Outer_Idle.png" 
     Height="250" 
     Width="250" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     /> 

    <Image 
     x:Name="Mouse_Indicator" 
     Margin="5" 
     Source="Interface/Mouse_Out.png" 
     Height="250" 
     Width="250" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     /> 

    <Image 
     x:Name="_Inner_Indicator" 
     Margin="5" 
     Source="Interface/Inner_Idle.png" 
     Height="250" 
     Width="250" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     RenderTransformOrigin="0.5,0.5" 
     > 
     <Image.RenderTransform> 
      <RotateTransform 
       x:Name="Interface_Rotation" 
       Angle="0" 
       /> 
     </Image.RenderTransform> 
    </Image> 

    <Image 
     x:Name="Inner_Button" 
     Margin="5" 
     Source="Interface/Inner_Button.png" 
     Height="250" 
     Width="250" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     Cursor="Hand" 
     MouseLeftButtonUp="leftClick" 
     MouseRightButtonUp="rightClick" 
     MouseEnter="mouseEnter" 
     MouseLeave="mouseLeave" 
     /> 
</Grid> 

Answer 1

私が正しくあなたの問題を理解していれば、それはあなたが上の任意のイベントをサブスクライブしていないイベントはすべての画像のためにトリガされているマウス（ではありませんトップ以外の画像） - 私はそのような振る舞いを再現することができませんでした。あなたが提供した画像から判断すると、あなたの問題は、マウスがトップ画像のどの部分にあってもトリガされるということですが、マウスが画像。

残念ながら、この機能はWPFで利用できません。今あなたが取ることができる2つの主なアプローチがあります。

マウスが画像の非透明画素を超えているだけにして、あなたのロジックを実行するかどうかを各マウスイベントハンドラで、私は

チェック（参考のためにthis questionを参照してください）アプローチ。しかし、画像が元のサイズで表示されていない場合、これは難しいかもしれません。

アプローチII

Imageの部分がヒットテストのための対象となるフレームワークを伝えるために、適切な幾何学付属Image.Clipプロパティを使用。

個人的には、Imageコントロールのサイズが一定であり（クリップのジオメトリがコントロールのサイズに自動的に拡大されないため）、画像コンテンツは基本的に円です。供給ジオメトリが完全にあなたのイメージと一致しないことにかかわら

<Image x:Name="Inner_Button" (...)> 
    <Image.Clip> 
     <EllipseGeometry Center="125,125" RadiusX="53" RadiusY="53" /> 
    </Image.Clip> 
</Image> 

注：ここでは、私はあなたが後にしている結果を得るべきだと思うものです。少なくともマウスの出来事を引き起こした透明ピクセルはほとんどありませんでしたが、それはほとんど目につきませんでした。