title: Z order in between Image and InkPresenter
body: <p>I have this CustomControl which contains an <code>InkPresenter</code> and an <code>Image</code>. The image has an <code>AdornerDecorator</code> as I plan to add an adorner to the image later on. I have set the <code>Canvas.ZIndex</code> of the <code>Image</code> to be higher than the <code>InkPresenter</code> so that the <code>InkPresenter</code> will be drawn over the Image. </p>
  
  <p>The problem is that when I try to collect and display ink from the <code>InkPresenter</code> the strokes are drawn underneath the image. (I have used to check the visual tree using Snoop and the <code>InkPresenter</code> is above the <code>Image</code>) I'm not sure why this is. Does anyone here know why the <code>Image</code> is drawn on top of the <code>InkPresenter</code>? Any help is much appreciated.</p>
  
  <p>My code is as follows:</p>
  
  <p><strong>Generic.xaml</strong></p>
  
  <pre><code>&lt;ResourceDictionary
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:HotSpotImage"&gt;
      &lt;Style TargetType="{x:Type local:HotSpotImage}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type local:HotSpotImage}"&gt;
                      &lt;ControlTemplate.Resources&gt;
                          &lt;local:StringtoImageSource x:Key="ImageSourceConverter"/&gt;
  
                      &lt;/ControlTemplate.Resources&gt;
                      &lt;Canvas Width="{TemplateBinding Width}" 
                              Height="{TemplateBinding Height}"&gt;    
                          &lt;InkPresenter Canvas.ZIndex="1"  
                                        x:Name="PART_InkPresenter"
                                        Width="{TemplateBinding Width}" 
                                        Height="{TemplateBinding Height}"/&gt;
                          &lt;Image Canvas.ZIndex="2"  x:Name="PART_Image" 
                                 Width="{TemplateBinding Width}" 
                                 Height="{TemplateBinding Height}" Source="{Binding 
                                  RelativeSource={RelativeSource TemplatedParent}, 
                                  Path=Source, 
                                  Converter={StaticResource ImageSourceConverter}}"/&gt;
                      &lt;/Canvas&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/ResourceDictionary&gt;
  </code></pre>
  
  <p>I have attached the <code>MouseDown</code>, <code>MouseUp</code>, <code>MouseMove</code> etc events to the <code>InkPresenter</code> as I plan to move the handling of these events to other classes later on.</p>
  
  <p>Unfortunately these events don't get captured because the <code>Image</code> is drawn on top of the <code>InkPresenter</code> so it gets the events rather than the <code>InkPresenter</code>. Does anyone know why this may be?</p>
  
  <p>Any help is much appreciated.</p>