动态添加用户控件

时间:2016-08-30 10:08:04

标签: c# wpf mvvm data-binding user-controls

Hello stackoverflowers。

我想在屏幕上动态显示一些元素。我有一个OverlayElement基类和一些子类。 OverlayElement基类包含一个FrameworkElement,它对应于一个小的usercontrol,它定义了如何绘制我的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>

1 个答案:

答案 0 :(得分:1)

您只需将视图放入<DataTemplate DataType="{x:Type local:OverlayElement}"> <ContentControl Content="{Binding View}" /> </DataTemplate>

即可
View

但请确保a[7][1]是属性,否则无法使用数据绑定。