WPF：不同用户控件的DataTemplate绑定答案

【问题标题】：WPF: DataTemplate binding for different usercontrolWPF：不同用户控件的DataTemplate绑定
【发布时间】：2021-08-10 13:59:03
【问题描述】：

我是 WPF 的新手，我正在尝试弄清楚如何使用不同类型的用户控件实现绑定。用户单击按钮后，窗口中会添加一个用户控件（矩形或椭圆等简单形状）。

我正在尝试使用 MVVM 方法，因此 xaml 如下所示：

    ...
    Title="{Binding Path=Titolo}"
    Height="450" Width="800"
    d:DataContext="{d:DesignInstance vm:MainWindowViewModel}">


<Canvas>
    <Button Content="Add Shape" Command="{Binding TestCommand}"/>
    <ItemsControl ItemsSource="{Binding RectCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <uc:MyCustomRectangle/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding xLT}" />
                <Setter Property="Canvas.Top" Value="{Binding yLT}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Canvas>

一切正常，但我想使用相同的按钮（例如，随机添加矩形或椭圆）添加不同类型的 UserControl（不仅是 MyCustomRectangle）。一个可能的解决方案是复制 ItemsControl 部分并选择不同的绑定集合：

<Canvas>
    <Button Content="Add Shape" Command="{Binding TestCommand}"/>
    <ItemsControl ItemsSource="{Binding RectCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <uc:MyCustomRectangle/> <!-- bind to my usercontrol -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding xLT}" />
                <Setter Property="Canvas.Top" Value="{Binding yLT}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
 
    <ItemsControl ItemsSource="{Binding EllipseCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <uc:MyCustomEllipse/>  <!-- bind to my usercontrol -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding xLT}" />
                <Setter Property="Canvas.Top" Value="{Binding yLT}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Canvas>

我认为这不是正确的解决方案，尤其是因为我要添加许多不同类型的形状（以及文本和图像）。那么，如果存在，将数据模板绑定到不同类型的用户控件的正确方法是什么？ MVVM 是解决这个问题的正确方法吗？

【问题讨论】：

标签： c# wpf

【解决方案1】：

您可以做的是绑定到一个包含所有形状的全局列表。

然后你可以为不同的类型定义不同的DataTemplates。

像这样：

<ItemsControl.Resources>
    <DataTemplate DataType="{x:Type MyType1}">
        ...
    </DataTemplate>
    <DataTemplate DataType="{x:Type MyType2}">
        ....
    </DataTemplate>
</ItemsControl.Resources>

【讨论】：