title: Binding data from view to ItemsPanelTemplate
body: <p>I have been developing my first MVVM WPF application, in which I want to draw a graph containing nodes and edges. Currently I am doing all drawing logic in the code behind of my view, iterating over the nodes, creating shapes accordingly and adding them to a canvas.</p>
  
  <p>Because I do not want to keep track of the shapes, and just want them to be drawn based on the data that is given (i.e. the nodes) I have decided to create an <code>ObservableCollection</code> of both the <code>Nodes</code> and <code>Edges</code>, and bind an <code>ItemsControl</code> to these in order to automatically draw the shapes.</p>
  
  <p>For now I am focussing on drawing the nodes, and came up with the following XAML code:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ItemsControl x:Name="ItemsControlCanvas" ItemsSource="{Binding Path=Nodes}"&gt;
      &lt;ItemsControl.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;Canvas&gt;
                  &lt;Canvas.LayoutTransform&gt;
                      &lt;ScaleTransform ScaleX="{Binding ?}" ScaleY="{Binding ?}"/&gt;
                  &lt;/Canvas.LayoutTransform&gt;
              &lt;/Canvas&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/ItemsControl.ItemsPanel&gt;
      &lt;ItemsControl.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;Ellipse Fill="Blue" Width="4" Height="4" /&gt;
          &lt;/DataTemplate&gt;
      &lt;/ItemsControl.ItemTemplate&gt;
      &lt;ItemsControl.ItemContainerStyle&gt;
          &lt;Style&gt;
              &lt;Setter Property="Canvas.Top" Value="{Binding Path=Position.Y}" /&gt;
              &lt;Setter Property="Canvas.Left" Value="{Binding Path=Position.X}" /&gt;
          &lt;/Style&gt;
      &lt;/ItemsControl.ItemContainerStyle&gt;
  &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>In my view, I have two properties <code>ScaleX</code> and <code>ScaleY</code> which I set when the user scrolls on the canvas. In my earlier code behind version, I would create a <code>ScaleTransform</code> with those properties, and apply it to the named canvas using a <code>LayoutTransform</code>.</p>
  
  <pre class="lang-cs prettyprint-override"><code>public partial class GraphOverview : Page
  {
      public double ScaleX { get; set; }
      public double ScaleY { get; set; }
  </code></pre>
  
  <p>The problem in this version is that I cannot get around to get it working in my new XAML only code. I would like for the <code>ScaleX</code> and <code>ScaleY</code> attributes of the <code>ScaleTransform</code> in the <code>ItemsPanelTemplate</code> to be bound to the properties in my view. Only, normal <code>ElementName</code> binding does not work for some reason. More clearly, the canvas is presumably not aware of the view, I assume because it is a template. Moreover, I cannot call the canvas from the code behind, even when it has a name.</p>
  
  <p>I have tried several solutions, fumbling with <code>RelativeResources</code> and the like, but I think I do not clearly understand why a <code>ItemsPanelTemplate</code> is so disconnected from everything else in the XAML code. Thanks in advance!</p>
  
  <p><strong>Update</strong></p>
  
  <p>Maybe I should clarify that this could be easily resolved by moving the <code>ScaleX</code> and <code>ScaleY</code> properties to the ViewModel, and bind to those properties. But in my opinion such View-specific properties should not reside in the ViewModel.</p>