画像の代わりにキャンバスを前面に表示

Question

こんにちは私は画像を読み込んでキャンバスに矩形を追加する簡単なプログラムをやっています。

私は何をしようとしている。このXAMLコード

<Grid> 
      <Image x:Name="img" Source="{Binding ImagePath, Source={x:Static vm:DrawingVM.instance}, Converter={StaticResource nullImageConverter}}" Stretch="None"> 
      </Image> 

      <ItemsControl ItemsSource="{Binding ListRectangle, Source={x:Static vm:DrawingVM.instance}}" > 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Canvas x:Name="cnvas" Width="{Binding ElementName=img, Path=ActualWidth}" 
         Height="{Binding ElementName=img,Path=ActualHeight}" 
         LayoutTransform="{Binding ElementName=img, Path=LayoutTransform}"> 
          <!--MouseDown="cnvas_MouseDown" MouseLeftButtonDown="cnvas_MouseLeftButtonDown"--> 
          <i:Interaction.Triggers> 

           <i:EventTrigger EventName="MouseDown"> 
            <ei:CallMethodAction MethodName="MouseDownDrawing" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 
           <i:EventTrigger EventName="MouseMove"> 
            <ei:CallMethodAction MethodName="MouseMoveDrawing" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 

           <i:EventTrigger EventName="PreviewMouseLeftButtonDown" > 
            <ei:CallMethodAction MethodName="OnLeftButtonClicked" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 
           <i:EventTrigger EventName="MouseLeftButtonDown" > 
            <ei:CallMethodAction MethodName="MouseLeftButtonDownClicked" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 

           <i:EventTrigger EventName="PreviewMouseLeftButtonUp" > 
            <ei:CallMethodAction MethodName="DragFinishedMouseHandler" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 


          </i:Interaction.Triggers> 


         </Canvas> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemContainerStyle> 
        <Style TargetType="ContentPresenter"> 
         <Setter Property="Canvas.Left" Value="{Binding X}"/> 
         <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
        </Style> 
       </ItemsControl.ItemContainerStyle> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Blue" Fill="Transparent" /> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </Grid> 

を持っているがキャンバス内の矩形が、マウスを描画することです。 ImageはUPPERなのでイベントを実行しません。 CANVASがUPPERになるようにIMAGEの位置を設定するにはどうすればよいですか？私はマウスを使用して矩形を描画するようなイベントを実行できます。

Answer 1

グリッドではなくCanvasとして親を作成し、ZIndexプロパティをCanvas内のコントロールに設定すると、ZIndexが最も高くなるコントロールが表示されます。必要な操作を実行することができます。

 <Canvas> 
      <Image x:Name="img" Source="{Binding ImagePath, Source={x:Static vm:DrawingVM.instance}, Converter={StaticResource nullImageConverter}}" Stretch="None" Panel.ZIndex="0"> 
      </Image> 

      <ItemsControl ItemsSource="{Binding ListRectangle, Source={x:Static vm:DrawingVM.instance}}" Panel.ZIndex="1"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Canvas x:Name="cnvas" Width="{Binding ElementName=img, Path=ActualWidth}" 
         Height="{Binding ElementName=img,Path=ActualHeight}" 
         LayoutTransform="{Binding ElementName=img, Path=LayoutTransform}"> 
          <!--MouseDown="cnvas_MouseDown" MouseLeftButtonDown="cnvas_MouseLeftButtonDown"--> 
          <i:Interaction.Triggers> 

           <i:EventTrigger EventName="MouseDown"> 
            <ei:CallMethodAction MethodName="MouseDownDrawing" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 
           <i:EventTrigger EventName="MouseMove"> 
            <ei:CallMethodAction MethodName="MouseMoveDrawing" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 

           <i:EventTrigger EventName="PreviewMouseLeftButtonDown" > 
            <ei:CallMethodAction MethodName="OnLeftButtonClicked" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 
           <i:EventTrigger EventName="MouseLeftButtonDown" > 
            <ei:CallMethodAction MethodName="MouseLeftButtonDownClicked" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 

           <i:EventTrigger EventName="PreviewMouseLeftButtonUp" > 
            <ei:CallMethodAction MethodName="DragFinishedMouseHandler" TargetObject="{Binding Source={x:Static vm:ResizerVM.instance}}" /> 
           </i:EventTrigger> 


          </i:Interaction.Triggers> 


         </Canvas> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemContainerStyle> 
        <Style TargetType="ContentPresenter"> 
         <Setter Property="Canvas.Left" Value="{Binding X}"/> 
         <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
        </Style> 
       </ItemsControl.ItemContainerStyle> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Blue" Fill="Transparent" /> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </Canvas> 

Answer 2

グリッドの後の子として表示される項目は、前の要素の上にある必要があります。したがって、入力する必要があります。ただし、入力を盗む別のアイテムがある場合は、そのアイテムにIsHitTestVisible="False"を設定することができ、クリックできなくなるはずです。

イメージが問題の原因となっている要素ではない場合は、他の要素をチェックしたい場合があります。他の要素が入力を消費していないことを確認するには、他の要素にイベントハンドラを配置し、それらがトリガするかどうかを確認してください。