title: Playing with the Z-Index of controls - how to bring to the front or the back
body: <p>Before you tell me that this question has been answered, please allow me to explain. I have read many answers regarding this but none of them (that I've read) solve my problem.</p>
  
  <p>My project is a WPF project which uses C#, XAML and MVVM Light within Visual Studio 2010.</p>
  
  <p>What I have is a ListBox. Each element of the ListBox is a canvas (rather than the default StackPanel). Each Canvas contains one 'Node' - basically a Thumb control with a style attached, and a Path control. The Path uses a MultiBinding on a list of Nodes in the view model to generate some lines between Nodes. When you drag one Node around (using DragDelta), the lines are updated.</p>
  
  <p>A visual might help out:</p>
  
  <p><a href="https://i.stack.imgur.com/W76Rh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W76Rh.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see, some lines are above nodes and some are below. Typically it seems that the lines that come from a node are below that node, but what I want is for all lines to be below all nodes.</p>
  
  <p>I think the ListBox's ItemTemplate is the main thing here:</p>
  
  <pre><code>&lt;ListBox.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                      &lt;Canvas&gt;
                          &lt;Path Stroke="Black" Canvas.ZIndex="1"&gt;
                              &lt;Path.Data&gt;
                                  &lt;MultiBinding Converter="{StaticResource NodeToPathDataConverter}"&gt;
                                      &lt;Binding Path="NodeListViewModel.NodeList" Source="{StaticResource Locator}" /&gt;
                                      &lt;Binding /&gt;
                                  &lt;/MultiBinding&gt;
                              &lt;/Path.Data&gt;
                          &lt;/Path&gt;
                          &lt;Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}" Canvas.ZIndex="2"&gt;
  
                              &lt;i:Interaction.Triggers&gt;
                                  &lt;i:EventTrigger EventName="DragDelta"&gt;
                                          &lt;cmd:EventToCommand Command="{Binding NodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/&gt;
                                  &lt;/i:EventTrigger&gt;
  
                              &lt;/i:Interaction.Triggers&gt;
                          &lt;/Thumb&gt;
                      &lt;/Canvas&gt;
  
                  &lt;/DataTemplate&gt;
          &lt;/ListBox.ItemTemplate&gt;
  </code></pre>
  
  <p>As you can see, I have tried using Canvas.ZIndex in the controls, but that just seems to set their z order <strong>in relation to each other</strong>, not related to the other nodes and/or lines.</p>
  
  <p>Is there a way to tell is to put all Nodes above all Paths? Thanks.</p>