将画布放在前面而不是图像

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最高的控件将出现在最前面，然后您可以对其进行所需的操作。

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