动态添加用户控件

Question

你好 Whosebugers。

我想在屏幕上动态显示一些元素。我有一个 OverlayElement 基础 class 和一些 children classes。 OverlayElement 基础 class 包含一个 FrameworkElement，它对应于定义如何绘制我的 OverlayElement 的小型用户控件。

我有一个 OverlayViewModel，它包含 OverlayElement 的集合，绑定到视图中的 Itemcontrol。

以下是 OverlayElement 的摘录和 child。

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 视图（在 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

您可以简单地将视图放入 ContentControl:

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

但请确保 View 是一个属性，否则它将无法使用数据绑定。

动态添加用户控件

Add dynamically user controls

c#

data-binding

wpf

user-controls

mvvm