title: How to give multiple ItemsControl knowledge of each other's z-index? WPF
body: <p>I have two ItemsControls within my XAML, both binding to a list of shapes with different coordinates, height, width etc... </p>
  
  <p>The shapes within the same list seem to have knowledge of each other's z-index - as in I can hover over the shape and it brings it to the front of the other shapes as intended. </p>
  
  <p>I wish for the rectangles in List1 to have knowledge of the z-index of the rectangles in List2, which they don't seem to have at the minute. Is there an easy way of setting up my XAML to achieve this? Thanks in advance.</p>
  
  <p>My XAML: </p>
  
  <pre><code>&lt;Grid&gt;
          &lt;ItemsControl ItemsSource="{Binding List1}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas /&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
  
          &lt;ItemsControl.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Rectangle Height="{Binding Height}" Width="{Binding Width}" Fill="{Binding Fill}" &gt;&lt;/Rectangle&gt;
              &lt;/DataTemplate&gt;
          &lt;/ItemsControl.ItemTemplate&gt;
  
          &lt;ItemsControl.ItemContainerStyle&gt;
              &lt;Style TargetType="{x:Type ContentPresenter}"&gt;
                  &lt;Style.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter Property="Panel.ZIndex" Value="99" /&gt;
                      &lt;/Trigger&gt;
  
                  &lt;/Style.Triggers&gt;
                  &lt;Setter Property="Canvas.Top" Value="{Binding YPos}"&gt;&lt;/Setter&gt;
                  &lt;Setter Property="Canvas.Left" Value ="{Binding XPos}"&gt;&lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/ItemsControl.ItemContainerStyle&gt;
      &lt;/ItemsControl&gt;
  
      &lt;ItemsControl ItemsSource="{Binding List2}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas /&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
  
          &lt;ItemsControl.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Rectangle Height="{Binding Height}" Width="{Binding Width}" Fill="{Binding Fill}" &gt;&lt;/Rectangle&gt;
              &lt;/DataTemplate&gt;
          &lt;/ItemsControl.ItemTemplate&gt;
  
          &lt;ItemsControl.ItemContainerStyle&gt;
              &lt;Style TargetType="{x:Type ContentPresenter}"&gt;
                  &lt;Style.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter Property="Panel.ZIndex" Value="99" /&gt;
                      &lt;/Trigger&gt;
  
                  &lt;/Style.Triggers&gt;
                  &lt;Setter Property="Canvas.Top" Value="{Binding YPos}"&gt;&lt;/Setter&gt;
                  &lt;Setter Property="Canvas.Left" Value ="{Binding XPos}"&gt;&lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/ItemsControl.ItemContainerStyle&gt;
      &lt;/ItemsControl&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>My ViewModel where I define my rectangles: </p>
  
  <pre><code>public class ViewModel {
  
          public List&lt;Rect&gt; List1 { get; set; }
          public List&lt;Rect&gt; List2 { get; set; }
  
          public ViewModel() {
              List1 = new List&lt;Rect&gt;();
              List2 = new List&lt;Rect&gt;();
              PopulateList1();
              PopulateList2();
          }
  
          private void PopulateList2() {
              List1.Add(new Rect { Width = 30, Height = 50, XPos = 40, YPos = 50, Fill = "Blue" });
              List1.Add(new Rect { Width = 70, Height = 120, XPos = 60, YPos = 100, Fill = "Green" });
              List1.Add(new Rect { Width = 70, Height = 120, XPos = 30, YPos = 45, Fill = "Yellow" });
  
  
          }
  
          private void PopulateList1() {
              List2.Add(new Rect { Width = 50, Height = 100, XPos = 40, YPos = 100, Fill = "Red" });
              List2.Add(new Rect { Width = 50, Height = 100, XPos = 300, YPos = 100, Fill = "Green" });
              List2.Add(new Rect { Width = 50, Height = 100, XPos = 320, YPos = 75, Fill = "Blue" });
  
          }
  
  
      }
  
  </code></pre>
  
  <p>Rectangle Model: </p>
  
  <pre><code>public class Rect {
          public decimal Width { get; set; }
          public decimal Height { get; set; }
          public decimal XPos { get; set; }
          public decimal YPos { get; set; }
          public string Fill { get; set; }
      }
  </code></pre>
  
  <p>EDIT: <a href="https://imgur.com/a/1dzYYKc" rel="nofollow noreferrer">https://imgur.com/a/1dzYYKc</a> To clarify, here are the rectangles being shown. Currently when I hover over the shapes in their own list they come forward as expected, but overlapping shapes from other lists don't come forward, as they have no knowledge of each other's z-index presumably. </p>