如何在WPF(MVVM)模式下实现动态生成视图，复用同构设备界面

1. 定义统一的基础数据模型 #

首先抽象出通用的控件配置模型，不用为每个设备单独定义View结构：

// 展示项模型：对应详情页的文本展示标签
public class DeviceDisplayItem
{
    public string Label { get; set; } // 左侧显示的标签名，比如"设备IP"、"当前状态"
    public string Value { get; set; } // 右侧展示的动态值
}

// 操作项模型：对应详情页的命令按钮
public class DeviceActionItem
{
    public string ButtonText { get; set; } // 按钮显示的文本，比如"打开摄像头"、"重启设备"
    public ICommand Command { get; set; } // 按钮绑定的命令
    public object CommandParameter { get; set; } // 可选：命令需要的参数
}

// 设备基类ViewModel，所有设备的VM都继承这个类
public abstract class DeviceViewModelBase : INotifyPropertyChanged
{
    public string DeviceId { get; set; }
    public string DeviceName { get; set; }
    public string DeviceType { get; set; }
    // 动态展示项集合
    public ObservableCollection<DeviceDisplayItem> DisplayItems { get; set; } = new();
    // 动态操作按钮集合
    public ObservableCollection<DeviceActionItem> ActionItems { get; set; } = new();

    // INotifyPropertyChanged实现省略，按需给属性加变更通知
}

补充：下面用到的RelayCommand是ICommand的极简实现，自己写一个即可，不需要依赖第三方框架：

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    public event EventHandler CanExecuteChanged;
    public RelayCommand(Action execute) => _execute = execute;
    public bool CanExecute(object parameter) => true;
    public void Execute(object parameter) => _execute?.Invoke();
}

2. 实现通用DeviceView #

仅需1个XAML文件，用ItemsControl动态生成所有控件，完全不需要为单个设备写单独View：

<UserControl x:Class="YourNamespace.DeviceDetailView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer Padding="16">
        <StackPanel Spacing="12">
            <!-- 设备基础信息头部 -->
            <TextBlock FontSize="18" FontWeight="Bold" Text="{Binding DeviceName}"/>
            <TextBlock Foreground="Gray" Text="{Binding DeviceType}"/>
            
            <!-- 动态生成展示项区域 -->
            <ItemsControl ItemsSource="{Binding DisplayItems}" Margin="0 8">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0 4">
                            <TextBlock Width="120" Text="{Binding Label}"/>
                            <TextBlock Text="{Binding Value}"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <!-- 分割线 -->
            <Separator/>

            <!-- 动态生成操作按钮区域 -->
            <ItemsControl ItemsSource="{Binding ActionItems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" Spacing="8"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button 
                            Content="{Binding ButtonText}"
                            Command="{Binding Command}"
                            CommandParameter="{Binding CommandParameter}"
                            Padding="12 6"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ScrollViewer>
</UserControl>

如果不同设备需要特殊控件（比如文本输入框、下拉选择框），可以额外加一个DataType字段在基础项模型里，配合DataTemplateSelector动态匹配不同控件模板即可。

3. 主界面关联逻辑 #

主ViewModel里新增选中设备属性，类型为基类DeviceViewModelBase：

public class MainViewModel : INotifyPropertyChanged
{
    // 你的设备列表
    public ObservableCollection<DeviceViewModelBase> DeviceList { get; set; } = new();
    
    private DeviceViewModelBase _selectedDevice;
    // 选中的设备，列表选中项绑定到这个属性
    public DeviceViewModelBase SelectedDevice
    {
        get => _selectedDevice;
        set 
        { 
            _selectedDevice = value;
            OnPropertyChanged();
        }
    }
}

主界面的详情区域直接放通用DeviceDetailView，绑定DataContext到SelectedDevice即可：

<!-- 主界面布局，左侧列表右侧详情 -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- 左侧设备列表 -->
    <ListBox 
        Grid.Column="0"
        ItemsSource="{Binding DeviceList}"
        SelectedItem="{Binding SelectedDevice}"
        DisplayMemberPath="DeviceName"/>
    <!-- 右侧通用详情View -->
    <local:DeviceDetailView
        Grid.Column="1"
        DataContext="{Binding SelectedDevice}"/>
</Grid>

4. 具体设备的使用示例 #

以相机设备为例，仅需继承基类VM，初始化对应的数据即可，不需要写单独View：

public class CameraDeviceViewModel : DeviceViewModelBase
{
    public CameraDeviceViewModel()
    {
        DeviceType = "相机设备";
        // 初始化展示项
        DisplayItems.Add(new DeviceDisplayItem { Label = "IP地址", Value = "192.168.1.101" });
        DisplayItems.Add(new DeviceDisplayItem { Label = "当前分辨率", Value = "1920*1080" });
        DisplayItems.Add(new DeviceDisplayItem { Label = "存储容量", Value = "128G" });
        // 初始化操作按钮
        ActionItems.Add(new DeviceActionItem { ButtonText = "开启预览", Command = new RelayCommand(OpenPreview) });
        ActionItems.Add(new DeviceActionItem { ButtonText = "抓拍", Command = new RelayCommand(Capture) });
        ActionItems.Add(new DeviceActionItem { ButtonText = "重启设备", Command = new RelayCommand(Reboot) });
    }

    private void OpenPreview()
    {
        // 开启预览逻辑
    }
    private void Capture()
    {
        // 抓拍逻辑
    }
    private void Reboot()
    {
        // 重启逻辑
    }
}

内容的提问来源于stack exchange，提问作者alexei.sorokin