将画布置于前面而不是图像

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>

我要做的是在画布上画一个矩形但是鼠标。但它不执行事件，因为图像是UPPER。 如何设置IMAGE的位置，以便CANVAS为UPPER？，这样我就可以像使用鼠标绘制矩形一样执行事件

Answer 1

如果某个项目显示为网格的后续子项，则它应该位于以前的元素之上，因此应该输入。但是，如果有其他项目窃取输入，您可以在项目上设置IsHitTestVisible="False"，它不应再可以点击。

如果图像没有成为导致问题的元素，您可能需要检查其他元素。要检查另一个元素是否正在消耗输入，请尝试将事件处理程序放在其他元素上，并查看它们是否触发。

Answer 2

您可以通过将父项设置为Canvas而不是Grid来实现所需的结果，然后将ZIndex属性设置为Canvas中的控件，具有最高ZIndex的Control将出现在前面，然后您可以对其执行所需的操作。

        <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>