title: C#/XAML/WPF Simple node editor
body: <p>I am working on a simple node editor, something like <a href="https://stackoverflow.com/questions/15579069/graph-nodes-coordinates-evaluation/15580293">this</a> (for me it is a model program). I have two windows in XAML with different solutions. In the first case (still not completed, but for demonstration), I am using templates inside grid: </p>
  
  <pre><code>&lt;Window
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:Grafika"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Grafika.MainWindow"
      Title="MainWindow" Height="350" Width="525"&gt;
  
  &lt;Window.Resources&gt;
      &lt;DataTemplate DataType="{x:Type local:Node}"&gt;
          &lt;Thumb Width="{Binding Width}" Height="{Binding Height}" DragDelta="Thumb_DragDelta"&gt;
              &lt;Thumb.Template&gt;
                  &lt;ControlTemplate&gt;
                      &lt;Border Background="CadetBlue"/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Thumb.Template&gt;
          &lt;/Thumb&gt;
  
      &lt;/DataTemplate&gt;
      &lt;DataTemplate DataType="{x:Type local:Connector}"&gt;
          &lt;Line Name="Connection" Stroke="Red" StrokeThickness="3"  X1="{Binding StartX}" Y1="{Binding StartY}" X2="{Binding StopX}" Y2="{Binding StopY}"/&gt;
      &lt;/DataTemplate&gt;    
  
  &lt;/Window.Resources&gt;
  
  &lt;Window.DataContext&gt;
      &lt;local:ViewModel/&gt;
  &lt;/Window.DataContext&gt;
  
  &lt;Grid x:Name="mrizka"&gt;
  
      &lt;Border x:Name="obrys" Width="200" Height="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua" BorderBrush="Red" d:IsHidden="True"/&gt;
      &lt;Path Data="M 25,25 H 250 V 250" Stroke="Black" d:IsHidden="True"/&gt;
  
      &lt;ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"&gt;
          &lt;Border&gt;
              &lt;Border.Background&gt;
                  &lt;VisualBrush TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute" Viewbox="0,0,50,50" ViewboxUnits="Absolute"&gt;
                      &lt;VisualBrush.Visual&gt;
                          &lt;Rectangle Stroke="Black" StrokeThickness="1" Height="50" Width="50"/&gt;
                      &lt;/VisualBrush.Visual&gt;
                  &lt;/VisualBrush&gt;
              &lt;/Border.Background&gt;
          &lt;/Border&gt;
      &lt;/ScrollViewer&gt;
  
      &lt;ItemsControl ItemsSource="{Binding NodeList}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
          &lt;ItemsControl.ItemContainerStyle&gt;
              &lt;Style&gt;
                  &lt;Setter Property="Canvas.Left" Value="{Binding X}"/&gt;
                  &lt;Setter Property="Canvas.Top" Value="{Binding Y}"/&gt;
              &lt;/Style&gt;
          &lt;/ItemsControl.ItemContainerStyle&gt;
      &lt;/ItemsControl&gt;
  
      &lt;ItemsControl ItemsSource="{Binding Connections}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
      &lt;/ItemsControl&gt;
  
  &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1xQbG.png" rel="nofollow noreferrer">with output</a></p>
  
  <p>In second case, I am taking templates into <code>ListBox</code> (with combination of <code>CompositeCollection</code>) and I thought it would work since the previous case worked correctly. However, when I launch the program <a href="https://i.stack.imgur.com/vDreK.png" rel="nofollow noreferrer">nothing shows</a>.</p>
  
  <p>Code: </p>
  
  <pre><code>&lt;Window x:Class="Grafika.Test1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:Grafika"
      mc:Ignorable="d"
      Title="Test1" Height="600" Width="800" x:Name="view" &gt;
  
  &lt;Window.Resources&gt;
      &lt;Style TargetType="Control" x:Key="EmptyStyle"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate&gt;
  
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/Window.Resources&gt;
  
  &lt;Window.DataContext&gt;
      &lt;local:ViewModel/&gt;
  &lt;/Window.DataContext&gt;
  
  &lt;Grid Margin="10"&gt;
      &lt;Grid.Resources&gt;
          &lt;CompositeCollection x:Key="Col"&gt;
              &lt;CollectionContainer Collection="{Binding DataContext.NodeList, Source={x:Reference view}}"/&gt;
              &lt;CollectionContainer Collection="{Binding DataContext.Connections, Source={x:Reference view}}"/&gt;
          &lt;/CompositeCollection&gt;
  
          &lt;!-- --&gt;
          &lt;DataTemplate DataType="{x:Type local:Node}"&gt;
              &lt;Thumb DragDelta="Thumb_DragDelta"&gt;
                  &lt;Thumb.Template&gt;
                      &lt;ControlTemplate TargetType="Thumb"&gt;
                          &lt;Canvas Margin="-10,-10,10,10"&gt;
                              &lt;Border Height="{Binding Height}" Width="{Binding Width}" x:Name="rect" Background="Red"  /&gt;
                          &lt;/Canvas&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Thumb.Template&gt;
              &lt;/Thumb&gt;
          &lt;/DataTemplate&gt;
          &lt;!-- --&gt;
  
          &lt;!-- --&gt;
          &lt;DataTemplate DataType="{x:Type local:Connector}"&gt;
              &lt;Line Stroke="Blue" StrokeThickness="3" X1="{Binding Start.X}" Y1="{Binding Start.Y}" X2="{Binding Stop.X}" Y2="{Binding Stop.Y}" x:Name="Con"/&gt;
              &lt;DataTemplate.Triggers&gt;
                  &lt;DataTrigger Binding="{Binding Stop}" Value="{x:Null}"&gt;
                      &lt;Setter TargetName="Con" Property="Visibility" Value="Collapsed"/&gt;
                  &lt;/DataTrigger&gt;
              &lt;/DataTemplate.Triggers&gt;
          &lt;/DataTemplate&gt;
          &lt;!-- --&gt;
      &lt;/Grid.Resources&gt;
  
      &lt;ListBox&gt;
          &lt;ListBox.Template&gt;
              &lt;ControlTemplate&gt;
                  &lt;Border&gt;
                      &lt;Border.Background&gt;
                          &lt;LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3"&gt;
                              &lt;GradientStop Color="Azure" Offset="0"/&gt;
                              &lt;GradientStop Color="Yellow" Offset="1"/&gt;
                          &lt;/LinearGradientBrush&gt;
                      &lt;/Border.Background&gt;
  
                      &lt;ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto"&gt;
                          &lt;Border&gt;
                              &lt;Border.Background&gt;
                                  &lt;VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute"&gt;
                                      &lt;VisualBrush.Visual&gt;
                                          &lt;Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/&gt;
                                      &lt;/VisualBrush.Visual&gt;
                                  &lt;/VisualBrush&gt;
                              &lt;/Border.Background&gt;
                          &lt;/Border&gt;
                      &lt;/ScrollViewer&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/ListBox.Template&gt;
  
          &lt;ListBox.ItemsSource&gt;
              &lt;StaticResource ResourceKey="Col"/&gt;
          &lt;/ListBox.ItemsSource&gt;
  
          &lt;ListBox.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ListBox.ItemsPanel&gt;
  
          &lt;ListBox.ItemContainerStyle&gt;
              &lt;Style TargetType="ListBoxItem"&gt;
                  &lt;Setter Property="Canvas.Left" Value="{Binding X}"/&gt;
                  &lt;Setter Property="Canvas.Top" Value="{Binding Y}"/&gt;
                  &lt;Setter Property="FocusVisualStyle" Value="{StaticResource EmptyStyle}"/&gt;
              &lt;/Style&gt;
          &lt;/ListBox.ItemContainerStyle&gt;
      &lt;/ListBox&gt;
  &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>My question is simple: Why is nothing displayed in the second case? Is there anything wrong in XAML or potentionally some binding missing? I don't think that code behind is at fault, since the first case is working.</p>