WPF MVVM：如何将集合绑定到DataTemplate并动态创建控件？

嘿，这个场景我之前在项目里碰到过，要给ObservableCollection里的每个MyValuePair动态生成绑定控件，WPF里用ItemsControl就能轻松搞定，给你几个实用的方案：

这是最直接的方式，因为你的MyPairs是ObservableCollection<MyValuePair>，正好适配ItemsControl的ItemsSource属性，能自动同步集合的增删变化。

首先得确保你的ViewModel和数据类都实现了INotifyPropertyChanged（这是双向绑定的核心基础）：

public class MyValuePair : INotifyPropertyChanged
{
    private string _description;
    public string Description
    {
        get => _description;
        set { _description = value; OnPropertyChanged(); }
    }

    private object _value; // 用object兼容多种数据类型
    public object Value
    {
        get => _value;
        set { _value = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class MyData : INotifyPropertyChanged
{
    public ObservableCollection<MyValuePair> MyPairs { get; set; } = new ObservableCollection<MyValuePair>();
    // 你的其他属性...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<MyData> MainCollection { get; set; } = new ObservableCollection<MyData>();

    private MyData _selectedData;
    public MyData SelectedData
    {
        get => _selectedData;
        set { _selectedData = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后在XAML里绑定ItemsControl到SelectedData.MyPairs，定义每个项的控件模板：

<!-- 假设你的Window/UserControl的DataContext已经设置为MainViewModel -->
<ItemsControl ItemsSource="{Binding SelectedData.MyPairs}">
    <!-- 每个MyValuePair的控件模板 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="0,4,0,4" Spacing="8">
                <!-- 显示描述文本 -->
                <TextBlock Text="{Binding Description}" Width="120" VerticalAlignment="Center"/>
                <!-- 双向绑定Value的TextBox -->
                <TextBox Text="{Binding Value, Mode=TwoWay}" Width="200"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <!-- 可以自定义布局容器，比如用WrapPanel实现自动换行 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

如果你的MyValuePair的Value有多种类型（比如bool、数字、字符串），想要对应不同的控件（CheckBox、NumericUpDown、TextBox），可以用DataTemplateSelector来实现动态匹配：

先创建一个模板选择器类：

public class ValueControlTemplateSelector : DataTemplateSelector
{
    public DataTemplate TextBoxTemplate { get; set; }
    public DataTemplate CheckBoxTemplate { get; set; }
    public DataTemplate NumericTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is not MyValuePair pair) return base.SelectTemplate(item, container);

        return pair.Value switch
        {
            bool => CheckBoxTemplate,
            int or double or float => NumericTemplate,
            string => TextBoxTemplate,
            _ => TextBoxTemplate // 默认用TextBox处理未知类型
        };
    }
}

然后在XAML里定义不同类型的模板并实例化选择器：

<Window.Resources>
    <!-- 字符串类型控件模板 -->
    <DataTemplate x:Key="TextBoxTemplate">
        <StackPanel Orientation="Horizontal" Margin="0,4,0,4" Spacing="8">
            <TextBlock Text="{Binding Description}" Width="120" VerticalAlignment="Center"/>
            <TextBox Text="{Binding Value, Mode=TwoWay}" Width="200"/>
        </StackPanel>
    </DataTemplate>

    <!-- 布尔类型控件模板 -->
    <DataTemplate x:Key="CheckBoxTemplate">
        <StackPanel Orientation="Horizontal" Margin="0,4,0,4" Spacing="8">
            <TextBlock Text="{Binding Description}" Width="120" VerticalAlignment="Center"/>
            <CheckBox IsChecked="{Binding Value, Mode=TwoWay}" VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>

    <!-- 数字类型控件模板（这里用WPF Toolkit的IntegerUpDown，也可以用原生TextBox加验证） -->
    <DataTemplate x:Key="NumericTemplate">
        <StackPanel Orientation="Horizontal" Margin="0,4,0,4" Spacing="8">
            <TextBlock Text="{Binding Description}" Width="120" VerticalAlignment="Center"/>
            <xctk:IntegerUpDown Value="{Binding Value, Mode=TwoWay}" Width="200"/>
        </StackPanel>
    </DataTemplate>

    <!-- 实例化模板选择器 -->
    <local:ValueControlTemplateSelector x:Key="ValueSelector"
                                        TextBoxTemplate="{StaticResource TextBoxTemplate}"
                                        CheckBoxTemplate="{StaticResource CheckBoxTemplate}"
                                        NumericTemplate="{StaticResource NumericTemplate}"/>
</Window.Resources>

<!-- 使用模板选择器的ItemsControl -->
<ItemsControl ItemsSource="{Binding SelectedData.MyPairs}"
              ItemTemplateSelector="{StaticResource ValueSelector}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

• 一定要确保所有数据类都实现INotifyPropertyChanged接口，不然集合变化或者属性更新时，UI不会同步刷新。
• 如果你的MyValuePair.Value是自定义类型，可以给该类型单独定义DataTemplate并设置DataType属性，这样Selector会自动匹配，不用手动判断类型。
• 要是需要更复杂的布局（比如每行多个控件、网格布局），可以把ItemsPanel换成WrapPanel或者UniformGrid。
• 记得给MainCollection绑定一个选择控件（比如ListBox），把SelectedItem绑定到SelectedData，这样切换选中项时，ItemsControl会自动更新显示对应的MyPairs。

内容的提问来源于stack exchange，提问作者creativeDev