title: WPF-Canvas doesn't show bound items of ObservableCollection
body: <p>I am working on a small state chart editor.
  I try to implement it in the MVVM pattern.</p>
  
  <p>What I got so far:</p>
  
  <p>My main view</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;vm:StateChartViewModel x:Key="StateChartViewModel"/&gt;
      &lt;DataTemplate DataType="{x:Type vm:StateViewModel}"&gt;
          &lt;views:StateWidget/&gt;
      &lt;/DataTemplate&gt;
      &lt;DataTemplate DataType="{x:Type vm:TransitionViewModel}"&gt;
          &lt;views:TransitionWidget/&gt;
      &lt;/DataTemplate&gt;
  &lt;/UserControl.Resources&gt;
  
  
  &lt;Canvas Background="Transparent"
          DataContext="{StaticResource StateChartViewModel}"&gt;
      &lt;i:Interaction.Triggers&gt;
          &lt;i:EventTrigger EventName="MouseLeftButtonDown"&gt;
              &lt;command:EventToCommand Command="{Binding  CreateStateCommand}" PassEventArgsToCommand="True"/&gt;
          &lt;/i:EventTrigger&gt;
      &lt;/i:Interaction.Triggers&gt;
  
      &lt;ItemsControl Canvas.Left="0"
                    Canvas.Top="0" 
                    ItemsSource="{Binding Transitions}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas IsItemsHost="True"/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
          &lt;ItemsControl.ItemContainerStyle&gt;
              &lt;Style TargetType="ContentPresenter"&gt;
                  &lt;Setter Property="Canvas.Left" Value="0" /&gt;
                  &lt;Setter Property="Canvas.Top" Value="0" /&gt;
              &lt;/Style&gt;
          &lt;/ItemsControl.ItemContainerStyle&gt;
      &lt;/ItemsControl&gt;
  
      &lt;ItemsControl Canvas.Left="0"
                    Canvas.Top="0"
                    ItemsSource="{Binding States}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;Canvas IsItemsHost="True"/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
          &lt;ItemsControl.ItemContainerStyle&gt;
              &lt;Style TargetType="ContentPresenter"&gt;
                  &lt;Setter Property="Canvas.Left" Value="0"/&gt;
                  &lt;Setter Property="Canvas.Top" Value="0"/&gt;
              &lt;/Style&gt;
          &lt;/ItemsControl.ItemContainerStyle&gt;
      &lt;/ItemsControl&gt;
  
  &lt;/Canvas&gt;
  </code></pre>
  
  <p>The DataTemplates which I have set for the StateViewModel and the TransitionViewModel are views of these viewModels</p>
  
  <p>StateView (StateWidget)</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;vm:StateViewModel x:Key="StateViewModel"/&gt;
  &lt;/UserControl.Resources&gt;
  &lt;Grid x:Name="XMainGrid"
        DataContext="{StaticResource StateViewModel}"&gt;
      &lt;Rectangle Fill="CornflowerBlue" 
                 RadiusX="5" RadiusY="5" 
                 ClipToBounds="True"&gt;
      &lt;/Rectangle&gt;
      &lt;StackPanel Orientation="Horizontal"  Margin="10"&gt;
          &lt;TextBox Text="{Binding Path=State.Name}" 
                   Background="Transparent"/&gt;            
          &lt;Polygon Points="0,0 20,0 10,10" 
                   Fill="DarkSlateGray" 
                   Margin="10,5,0,0"/&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>TransitionView (TransitionWidget)</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;vm:TransitionViewModel x:Key="TransitionViewModel"/&gt;
  &lt;/UserControl.Resources&gt;
  &lt;Canvas DataContext="{StaticResource TransitionViewModel}"&gt;
      &lt;Line X1="{Binding SourceState.Position.X}"
            Y1="{Binding SourceState.Position.Y}"
            X2="{Binding TargetState.Position.X}"
            Y2="{Binding TargetState.Position.Y}"
            Stroke="DarkGreen"
            StrokeThickness="4"
            /&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p>In the StateChartViewModel I have 2 ObservableCollections with StateViewModels and TransitionModels</p>
  
  <pre><code>    private ObservableCollection&lt;StateViewModel&gt; _states;
      public ObservableCollection&lt;StateViewModel&gt; States
      {
          get
          {
              if (_states == null)
                  _states = new ObservableCollection&lt;StateViewModel&gt;();
  
              return _states;
          }
      }
  
      private ObservableCollection&lt;TransitionViewModel&gt; _transitions;
      public ObservableCollection&lt;TransitionViewModel&gt; Transitions
      {
          get
          {
              if (_transitions == null)
                  _transitions = new ObservableCollection&lt;TransitionViewModel&gt;();
  
              return _transitions;
          }
      }
  
      private RelayCommand&lt;MouseEventArgs&gt; _createStateCommand; 
      public ICommand CreateStateCommand
      {
          get
          {
              if (_createStateCommand == null)
                  _createStateCommand = new RelayCommand&lt;MouseEventArgs&gt;(AddNewState);
  
              return _createStateCommand;
          }
      }
  
      private void AddNewState(MouseEventArgs e)
      {
          var newState = new StateViewModel();
          _states.Add(newState);
      }
  </code></pre>
  
  <p>My problem is that the canvas in the main view doesn't show any of that items when I add StateViewModels to States aswell with the transitions. When adding SateWidgets directly to the canvas' children they are appear in the canvas. But I think there have to be a solution without doing it manually. </p>
  
  <h2>Edit</h2>
  
  <p>The StateView (StateWidget) and the TransitionView (TransitionWidget) should both be displayed in the same canvas!
  StateViewModels should be displayed as StateWidgets and TransitionViewModels as Transitionwidgets.</p>
  
  <pre><code>  MainCanvas
  
    /--------------\    TransitionWidget    /--------------\
    | StateWidget1 |------------------------| StateWidget2 |
    \--------------/                        \--------------/
  </code></pre>