Question

I have this CustomControl which contains an InkPresenter and an Image. The image has an AdornerDecorator as I plan to add an adorner to the image later on. I have set the Canvas.ZIndex of the Image to be higher than the InkPresenter so that the InkPresenter will be drawn over the Image.

The problem is that when I try to collect and display ink from the InkPresenter the strokes are drawn underneath the image. (I have used to check the visual tree using Snoop and the InkPresenter is above the Image) I’m not sure why this is. Does anyone here know why the Image is drawn on top of the InkPresenter? Any help is much appreciated.

My code is as follows:

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:HotSpotImage">
    <Style TargetType="{x:Type local:HotSpotImage}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:HotSpotImage}">
                    <ControlTemplate.Resources>
                        <local:StringtoImageSource x:Key="ImageSourceConverter"/>

                    </ControlTemplate.Resources>
                    <Canvas Width="{TemplateBinding Width}" 
                            Height="{TemplateBinding Height}">    
                        <InkPresenter Canvas.ZIndex="1"  
                                      x:Name="PART_InkPresenter"
                                      Width="{TemplateBinding Width}" 
                                      Height="{TemplateBinding Height}"/>
                        <Image Canvas.ZIndex="2"  x:Name="PART_Image" 
                               Width="{TemplateBinding Width}" 
                               Height="{TemplateBinding Height}" Source="{Binding 
                                RelativeSource={RelativeSource TemplatedParent}, 
                                Path=Source, 
                                Converter={StaticResource ImageSourceConverter}}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

I have attached the MouseDown, MouseUp, MouseMove etc events to the InkPresenter as I plan to move the handling of these events to other classes later on.

Unfortunately these events don’t get captured because the Image is drawn on top of the InkPresenter so it gets the events rather than the InkPresenter. Does anyone know why this may be?

Any help is much appreciated.

Answer 1

You are thinking about z-order backwards. The higher values are closer to the user, thus the image with value 2 is drawn over the ink with value 1.

See MSDN