title: Dynamically add a UserControl from ViewModel to View
body: <p>I have a View that is just a ListBox or ItemsControl (tried both) I'm trying to add multiple instances of a usercontrol to the ListBox from the ViewModel. I'm trying this :</p>
  
  <p>I have an ObservableCollection of the UserControl ViewModel in my Main ViewModel.</p>
  
  <pre><code>&lt;Controls:MetroWindow.Resources&gt;
    &lt;DataTemplate x:Key="{x:Type local2:TorrentControlViewModel}"&gt;
          &lt;local:TorrentControl /&gt;
      &lt;/DataTemplate&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  &lt;ItemsControl ItemsSource="{Binding TorrentControlViewModels}"  VerticalAlignment="Top"&gt;
  </code></pre>
  
  <p>All I get is a string in the ListBox:
  Namespace.ViewModels.TorrentControlViewModel</p>
  
  <p>The Binding seems to work but the UserControl is never Initialized.
  I need to add an unknown number of these controls to the listbox.</p>
  
  <p><a href="https://stackoverflow.com/questions/6373973/wpf-mvvm-how-to-add-a-user-control-to-a-view-from-a-collection-in-a-viewmodel">(WPF MVVM) How to add a user control to a View from a collection in a ViewModel</a></p>
  
  <p>The Control</p>
  
  <pre><code>&lt;UserControl x:Class="Music.Views.TorrentControl"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:local="clr-namespace:Music"
           xmlns:converters="clr-namespace:Music.Converters"
           xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
           xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
           xmlns:behaviors="clr-namespace:Music.Behaviors"
           mc:Ignorable="d" d:DesignWidth="900" Height="300" Width="Auto"&gt;
  &lt;UserControl.Resources&gt;
      &lt;Style x:Key="ButtonHype" TargetType="{x:Type Hyperlink}"&gt;
          &lt;Setter Property="TextDecorations" Value="None" /&gt;
      &lt;/Style&gt;
      &lt;converters:BoolToVisibilityConverter x:Key="BoolToVisConverter" /&gt;
      &lt;converters:ReverseBooleanConverter x:Key="ReverseBooleanConverter" /&gt;
      &lt;Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}"&gt;
          &lt;Setter Property="Background" Value="Transparent" /&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment,
          RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,
           RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /&gt;
          &lt;Setter Property="Padding" Value="2,0,0,0" /&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ListBoxItem}"&gt;
                      &lt;Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
                          Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"&gt;
                          &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsSelected" Value="true"&gt;
                              &lt;Setter Property="Background" Value="Transparent" /&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/UserControl.Resources&gt;
  &lt;Grid VerticalAlignment="Top" Width="Auto" Height="Auto" MinWidth="400" x:Name="MainGrid"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="Auto" /&gt;
          &lt;ColumnDefinition Width="Auto" /&gt;
          &lt;ColumnDefinition Width="*" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto" MaxHeight="40" /&gt;
          &lt;RowDefinition Height="Auto" /&gt;
          &lt;RowDefinition Height="100" /&gt;
          &lt;!--&lt;RowDefinition Height="Auto" /&gt;--&gt;
          &lt;!--&lt;RowDefinition Height="Auto" /&gt;--&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Image HorizontalAlignment="Center"  Grid.Row="0" Grid.Column="0"
          Source="{Binding RootSource}" RenderOptions.BitmapScalingMode="HighQuality" Height="30"
          Margin="10,0,10,0" Stretch="Uniform"
          RenderTransformOrigin=".5,.5" Cursor="Hand" VerticalAlignment="Center"&gt;
          &lt;Image.RenderTransform&gt;
              &lt;RotateTransform x:Name="AnimatedRotateTransform" Angle="0" /&gt;
          &lt;/Image.RenderTransform&gt;
          &lt;Image.Triggers&gt;
              &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
                              Storyboard.TargetProperty="Angle"
                              By="0"
                              To="360"
                              Duration="0:0:0.3"
                              RepeatBehavior="2x"
                              FillBehavior="Stop" /&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger&gt;
          &lt;/Image.Triggers&gt;
      &lt;/Image&gt;
      &lt;!--&lt;Viewbox Stretch="UniformToFill" StretchDirection="Both" Grid.Row="0" Grid.Column="1"&gt;--&gt;
      &lt;TextBlock x:Name="TorrentNameText" HorizontalAlignment="Left"  Grid.Row="0" Grid.Column="1"
          Text="{Binding TorrentName}" VerticalAlignment="Center" Grid.ColumnSpan="1"
          Margin="4,-5,0,0" TextTrimming="CharacterEllipsis"
          FontSize="26" Width="Auto" Foreground="White"&gt;
  
          &lt;TextBlock.Triggers&gt;
              &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation
                              Storyboard.TargetName="TorrentNameText"
                              Storyboard.TargetProperty="(UIElement.Opacity)"
                              From="0.0" To="1" Duration="0:0:4"
                              AutoReverse="False" RepeatBehavior="1x" /&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger&gt;
          &lt;/TextBlock.Triggers&gt;
      &lt;/TextBlock&gt;
      &lt;!--&lt;/Viewbox&gt;--&gt;
      &lt;!--&lt;Rectangle x:Name="LineRect" Height="2"  VerticalAlignment="Bottom" Fill="Gray" Grid.Row="2" Grid.RowSpan="3"
                         Margin="-1000,0,0,0" Grid.Column="2" Grid.ColumnSpan="2" Visibility="Collapsed"&gt;
      &lt;/Rectangle&gt;--&gt;
  
      &lt;Border x:Name="CDImageBorder" BorderBrush="#F80271" BorderThickness="2" Grid.Row="0" Grid.Column="2"
              MaxHeight="175" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.RowSpan="3"
              Width="Auto"
              Margin="44,0,0,0" Visibility="Visible"&gt;
          &lt;Border.Effect&gt;
              &lt;DropShadowEffect Opacity="50" Color="#FF9933" BlurRadius="10" /&gt;
          &lt;/Border.Effect&gt;
          &lt;Image x:Name="CDImage" Grid.Row="0" Grid.Column="3"
              RenderOptions.BitmapScalingMode="HighQuality" Height="175"
              Stretch="Uniform" HorizontalAlignment="Left" Margin="0,0,0,0"
              RenderTransformOrigin=".5,.5" VerticalAlignment="Top" Grid.RowSpan="3"
             Source="{Binding CDImageSource}" Visibility="Visible" /&gt;
      &lt;/Border&gt;
      &lt;Controls:ProgressRing x:Name="ProgressRing" Grid.Row="0" Grid.Column="2" Height="38" Width="40"
                             IsActive="{Binding IsWorking}" Foreground="#F80271" Margin="30,4,0,0" HorizontalAlignment="Left" /&gt;
  
      &lt;ListBox Grid.Row="2" Grid.Column="1" Width="Auto"
               Margin="0 0 0 0" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="Auto"
                ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" ItemsSource="{Binding SubDirectories}"&gt;
          &lt;i:Interaction.Behaviors&gt;
              &lt;behaviors:ScrollIntoViewBehavior /&gt;
          &lt;/i:Interaction.Behaviors&gt;
          &lt;ListBox.Style&gt;
              &lt;Style TargetType="{x:Type ItemsControl}"&gt;
                  &lt;Style.Resources&gt;
                      &lt;Style TargetType="{x:Type ListBoxItem}"&gt;
                          &lt;Setter Property="FocusVisualStyle" Value="{x:Null}" /&gt;
                          &lt;Setter Property="Background" Value="Transparent" /&gt;
                          &lt;Setter Property="BorderBrush" Value="Transparent" /&gt;
                          &lt;Setter Property="Template"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;ControlTemplate TargetType="{x:Type ListBoxItem}"&gt;
                                      &lt;Grid Margin="0,0,0,0"&gt;
                                          &lt;Border Background="{TemplateBinding Background}"
                                              BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
                                              SnapsToDevicePixels="True" /&gt;
                                          &lt;ContentPresenter Margin="8,5" /&gt;
                                      &lt;/Grid&gt;
                                      &lt;ControlTemplate.Triggers&gt;
                                          &lt;MultiTrigger&gt;
                                              &lt;MultiTrigger.Conditions&gt;
                                                  &lt;Condition Property="IsMouseOver" Value="True" /&gt;
                                              &lt;/MultiTrigger.Conditions&gt;
                                              &lt;Setter Property="Background" Value="#F80271" /&gt;
                                              &lt;Setter Property="BorderBrush" Value="Black" /&gt;
                                          &lt;/MultiTrigger&gt;
                                      &lt;/ControlTemplate.Triggers&gt;
                                  &lt;/ControlTemplate&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
                      &lt;/Style&gt;
                  &lt;/Style.Resources&gt;
  
                  &lt;Setter Property="Background" Value="Transparent" /&gt;
                  &lt;Setter Property="BorderThickness" Value="0" /&gt;
                  &lt;Setter Property="ItemsPanel"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;StackPanel&gt;
                                  &lt;i:Interaction.Behaviors&gt;
                                      &lt;ei:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.3"&gt;
                                          &lt;ei:FluidMoveBehavior.EaseX&gt;
                                              &lt;CircleEase EasingMode="EaseOut" /&gt;
                                          &lt;/ei:FluidMoveBehavior.EaseX&gt;
                                      &lt;/ei:FluidMoveBehavior&gt;
                                  &lt;/i:Interaction.Behaviors&gt;
                              &lt;/StackPanel&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/ListBox.Style&gt;
          &lt;!--&lt;ListBoxItem&gt;
              &lt;/ListBoxItem&gt;--&gt;
      &lt;/ListBox&gt;
      &lt;StackPanel Grid.Column="1" Grid.Row="1" Background="Transparent" Height="Auto" Width="Auto"
                 Grid.ColumnSpan="1" Orientation="Horizontal" Margin="10,0,0,0"/&gt;
      &lt;Grid  Width="Auto" Grid.Column="1" Grid.Row="1" Margin="5,0,0,0"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Image  Grid.Row="0" Grid.Column="0"
              RenderOptions.BitmapScalingMode="HighQuality" Height="25" ToolTip="Torrent Complete"
              Stretch="Uniform" HorizontalAlignment="Left" Margin="0,0,0,0"
              RenderTransformOrigin=".5,.5" VerticalAlignment="Center"
              Visibility="Visible" Source="{Binding CheckSource}"/&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="1"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="2"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="3"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="4"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="5"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="6"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
          &lt;TextBlock DockPanel.Dock="Top"  Grid.Row="0" Grid.Column="7"&gt;&lt;Hyperlink Command="{Binding UTorrentClientControlCommands}" Style="{StaticResource ButtonHype}"
                    CommandParameter="StartTorrent" &gt;&lt;InlineUIContainer&gt;
                      &lt;Image Source="{Binding StartSource}" VerticalAlignment="Center" Stretch="Uniform"
                          RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin=".5,.5"
                          ToolTip="Start Torrent" HorizontalAlignment="Center"
                          Margin="0,10,0,0" Height="32"  /&gt;
                  &lt;/InlineUIContainer&gt;&lt;/Hyperlink&gt;&lt;/TextBlock&gt;
  
      &lt;/Grid&gt;
  
      &lt;StackPanel /&gt;
  
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>