动态添加用户控件

Question

你好stackoverflowers。

我想在屏幕上动态显示一些元素。 我有一个OverlayElement基类，还有一些子类。 OverlayElement基类包含一个FrameworkElement，该FrameworkElement对应一个小的用户控件，该控件定义了如何绘制我的OverlayElement。

我有一个OverlayViewModel，其中包含一个OverlayElements集合，绑定到View中的Itemcontrol。

这是OverlayElement和一个孩子的节选。

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


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

这是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>

这就是我尝试使用这些元素的方式。 我的问题是我不知道如何从OverlayElement插入我的UserControl视图（在子类中初始化）：

<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

您可以简单地将视图放在ContentControl ：

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

但是请确保View是一个属性，否则它将不适用于数据绑定。