WPF MVVM模式下如何在XAML中遍历Control集合并判断类型显示控件

Absolutely you can pull this off in XAML! Since you’re working with an ObservableCollection<Control> in your MVVM WPF app, there are a couple of clean, maintainable approaches to render each control based on its type. Let’s break them down:

Method 1: Use a DataTemplateSelector (for flexible custom logic) #

This approach gives you full control over which template to use for each control type, perfect if you need extra conditional logic beyond just type checking.

First, create a custom DataTemplateSelector class in your project:

public class ControlTemplateSelector : DataTemplateSelector
{
    public DataTemplate ButtonTemplate { get; set; }
    public DataTemplate RadioButtonTemplate { get; set; }
    public DataTemplate TextBoxTemplate { get; set; }
    public DataTemplate DefaultTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return item switch
        {
            Button => ButtonTemplate,
            RadioButton => RadioButtonTemplate,
            TextBox => TextBoxTemplate,
            _ => DefaultTemplate
        };
    }
}

Then, define your templates and the selector instance in XAML resources, and use it with an ItemsControl to bind your collection:

<Window.Resources>
    <!-- Template for Buttons -->
    <DataTemplate x:Key="ButtonTemplate">
        <Button Content="{Binding Content}" 
                Command="{Binding Command}"
                Margin="4" />
    </DataTemplate>

    <!-- Template for RadioButtons -->
    <DataTemplate x:Key="RadioButtonTemplate">
        <RadioButton Content="{Binding Content}" 
                     IsChecked="{Binding IsChecked}"
                     Margin="4" />
    </DataTemplate>

    <!-- Template for TextBoxes -->
    <DataTemplate x:Key="TextBoxTemplate">
        <TextBox Text="{Binding Text}"
                 Margin="4"
                 Width="200" />
    </DataTemplate>

    <!-- Fallback for unsupported controls -->
    <DataTemplate x:Key="DefaultTemplate">
        <TextBlock Text="Unsupported control type"
                   Foreground="Gray"
                   Margin="4" />
    </DataTemplate>

    <!-- Instantiate our selector and assign templates -->
    <local:ControlTemplateSelector x:Key="ControlSelector"
                                   ButtonTemplate="{StaticResource ButtonTemplate}"
                                   RadioButtonTemplate="{StaticResource RadioButtonTemplate}"
                                   TextBoxTemplate="{StaticResource TextBoxTemplate}"
                                   DefaultTemplate="{StaticResource DefaultTemplate}" />
</Window.Resources>

<Grid>
    <!-- Bind your collection and use the selector -->
    <ItemsControl ItemsSource="{Binding controls_lst}"
                  ItemTemplateSelector="{StaticResource ControlSelector}" />
</Grid>

Method 2: Use DataType-matched DataTemplates (clean, automatic matching) #

If you don’t need custom conditional logic, WPF can automatically match controls to templates based on their type. This is more concise and requires no code-behind selector.

Just define DataTemplates in your resources with the DataType property set to each control type:

<Window.Resources>
    <DataTemplate DataType="{x:Type Button}">
        <Button Content="{Binding Content}" 
                Command="{Binding Command}"
                Margin="4" />
    </DataTemplate>

    <DataTemplate DataType="{x:Type RadioButton}">
        <RadioButton Content="{Binding Content}" 
                     IsChecked="{Binding IsChecked}"
                     Margin="4" />
    </DataTemplate>

    <DataTemplate DataType="{x:Type TextBox}">
        <TextBox Text="{Binding Text}"
                 Margin="4"
                 Width="200" />
    </DataTemplate>

    <!-- Fallback for any other Control type -->
    <DataTemplate DataType="{x:Type Control}">
        <TextBlock Text="Unsupported control type"
                   Foreground="Gray"
                   Margin="4" />
    </DataTemplate>
</Window.Resources>

<Grid>
    <!-- WPF automatically picks the right template for each item -->
    <ItemsControl ItemsSource="{Binding controls_lst}" />
</Grid>

Quick Notes: #

• If you’re directly storing WPF Control instances in your ObservableCollection (instead of viewmodel classes representing their state), the bindings here work because we’re binding to the control’s own properties (like Content, Text, etc.).
• For proper MVVM best practices, consider creating viewmodel classes (e.g., ButtonViewModel, TextBoxViewModel) instead of storing UI controls in your viewmodel. You’d then use the same template approaches but bind to viewmodel properties instead of control properties.
• Make sure your viewmodel implements INotifyPropertyChanged so property updates are reflected in the UI.

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