动态添加用户控件

Question

Hello stackoverflowers.

I would like to display dynamically some elements on the screen. I have a OverlayElement base class, and some children classes. The OverlayElement base class contains a FrameworkElement that correspond to a small usercontrol that defines how to draw my OverlayElement.

I have an OverlayViewModel which contain a collection of OverlayElements, binded to an Itemcontrol in the View.

Here are excerpts of OverlayElement and a child.

public abstract class OverlayElement : INotifyPropertyChanged
{
  public UserControl View;
}


public class ImageOverlayElement : OverlayElement
{
     public ImageOverlayElement(Point start, Point end)
     {
        View = new ImageOverlayElementView();
     }
}

Here is an exemple of ImageOverlayElementView

<UserControl x:Class="Client.ImageOverlayElementView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             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:Client"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             d:DataContext="{d:DesignInstance local:ImageOverlayElement}">
    <Grid>
            <Image 
                Source="{Binding ImageSource}"
                Height="{Binding Height}"
                Width="{Binding Width}"/>
    </Grid>
</UserControl>

And this is how i try to use these elements. My problem is that i don't know how to insert my UserControl View from OverlayElement (initialized in the child class) :

<ItemsControl
         ItemsSource="{Binding OverlayElementsList}"
         Background="Transparent">

 <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <Canvas/>
      </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>

 <ItemsControl.Resources>

    <DataTemplate DataType="{x:Type elements:OverlayElement}">
       <!-- Need help for here, how can I insert my UserControl View from OverlayElement ? (initialized in the child class) -->
    </DataTemplate>

 </ItemsControl.Resources>   
</ItemsControl>

Answer 1

You can simply put the view in ContentControl :

<DataTemplate DataType="{x:Type local:OverlayElement}">
    <ContentControl Content="{Binding View}" />
</DataTemplate>

But make sure View is a property, otherwise it won't work with data binding.