如何创建动态菜单 WPF MVVM？答案

【问题标题】：How to create a dynamic menu WPF MVVM?如何创建动态菜单 WPF MVVM？
【发布时间】：2021-10-06 02:41:10
【问题描述】：

谁能解释一下如何在 WPF 中创建一个动态菜单（使用 MVVM）？首先，我在屏幕的一半显示三个带有设备的按钮（相机、锅炉、传感器）。该应用程序对每个按钮都有特殊的命令。例如，如果我按下相机按钮 - 我会在屏幕的第二部分显示相机屏幕。如果我按下锅炉按钮 - 我会显示锅炉屏幕而不是相机屏幕。

我已经完成了，但是对于每个设备，我在我的 XAML 中单独完成了。

<StackPanel>
    <Button Content="Camera"
            Command="{Binding NavigationCameraCommand}"
            Margin="5"
            Height="30"/>
     <Button Content="Boiler".../>
</StackPanel>

<ContentControl Grid.Column="1"  Content="{Binding CurrentViewModel}">
    <ContentControl.Resources>
        <DataTemplate DataType="{x:Type viewmodels:CameraViewModel}">
            <views:CameraView/>
        </DataTemplate>
             ...
 </ContentControl>

但是如果我添加一个新设备，我必须重写主窗体中的代码，因此我想动态地执行它。我在主视图模型中创建了设备集合并尝试在 XAML 中使用此集合。

<ItemsControl ItemsSource="{Binding Devices}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Path=Name}"
                    Command="{?}}}"
                    Margin="5" Height="30"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

但是我不知道如何将命令绑定到按钮。我的主视图模型中有三个命令（OpenCameraScreenCommand、OpenBoilerScreenCommand、OpenSensorScreenCommand），它在静态菜单中没有任何问题，但我不知道如何在动态菜单中使用它...

【问题讨论】：

标签： c# wpf mvvm

【解决方案1】：

有几种方法可以解决这个问题，但最“MVVM”的方法可能是创建一个 DeviceViewModel 来包装您的 Device 类并拥有一个 OpenCommand。然后，您将绑定到 DeviceViewModel 集合，而不是绑定到设备集合。

DeviceViewModel 类似于：

public class DeviceViewModel : INotifyPropertyChanged
{
    private _device;

    public Device Device
    {
        get { return _device; }
        set
        {
            _device = value;
            OnPropertyChanged("Device");
        }
    }

    public ICommand OpenScreenCommand
    {
        get
        {
            return new RelayCommand(OpenScreen, CanOpenScreen)
        }
    }

    private void OpenScreen(object param)
    {
        // open screen here
    }

    private bool CanOpenScreen(object param)
    {
        return true; // or whatever conditions you have...
    }
}

您的 Xaml 将如下所示：

<ItemsControl ItemsSource="{Binding DeviceViewModels}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Path=Device.Name}"
                    Command="{Binding Path=OpenScreenCommand}"
                    Margin="5" Height="30"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：