在其他视图中查看 (WPF/MVVM)

Question

I have this UserControl called ControlButtonsView

<Grid>
    <Button Style="{StaticResource MinimizeButton}" Command="{Binding MinimizeAppCommand}" Height="40" Width="120" VerticalAlignment="Top" HorizontalAlignment="Right"/>
    <Button Content="X" Style="{StaticResource ExitButton}" Command="{Binding ExitAppCommand}" Height="40" Width="60" VerticalAlignment="Top" HorizontalAlignment="Right"/>
</Grid>

and ControlButtonsViewModel

class ControlButtonsViewModel
{
    private MainWindow _mainWindow;

    public ICommand MinimizeAppCommand { get; set; }
    public ICommand ExitAppCommand { get; set; }

    public ControlButtonsViewModel(MainWindow mainWindow)
    {
        _mainWindow = mainWindow;

        MinimizeAppCommand = new BaseICommand(MinimizeApp);
        ExitAppCommand = new BaseICommand(ExitApp);
    }

    public void MinimizeApp(object obj)
    {
        _mainWindow.WindowState = System.Windows.WindowState.Minimized;
    }

    public void ExitApp(object obj)
    {
        _mainWindow.Close();
    }
}

In my MainWindow.xaml.cs

this.DataContext = new AppManagerViewModel();

AppManagerViewModel controls the switching between Views

What I want is to be able to use this ControlButtonsView with its ControlButtonsViewModel in multiple other Views, this view is a UserControl with a minimize and a maximize buttons and I want to use them in multiple Views, in LogInView, MenuView etc.

If there is an easier way to do this please tell me) Thank you.

Answer 1

1. In AppManagerViewModel , add a property of ControlButtonsViewModel .

   public ControlButtonsViewModel ControlButtonsViewModel {get; set;}

2. In the constructor of AppManagerViewModel , add ControlButtonsViewModel = new ControlButtonsViewModel();

3. In Xaml of AppManagerView ,

   <ControlButtonsView DataContext="{Binding ControlButtonsViewModel}"... />

Answer 2

Window logic does not belong to the view model. View model does not care about UI. You must always implement the view model pretending like there is no UI, only a model.

Therefore having a reference of MainWindow in you view model will lead to a tight coupling of the application to the view/UI.

The goal of MVVM is to remove this tight coupling. Obviously, due to the tight coupling you have introduced, you are currently not implementing the MVVM pattern (you are implementing it wrong).
For example, you won't be able to test the view model without creating a view.

Injecting the view as constructor dependency makes it even worse.

Because the commands execute UI logic (close, minimize), they have to be moved to a control - to the view component from a MVVM point of view.

To make those commands available throughout your view or globally relative to the actual visual tree, you should implement those commands as routed commands eg on your MainWindow , which you want to control via commanding.

Since routed commands are static, they can be referenced by every other control. Because they are routed, they can be used everywhere in the same visual tree that the command target (the MainWindow ) belongs to.

Internally the command, once executed, will raise a routed event which will traverse the visual tree until it finds a handler.

Commanding Overview

In your case, MainWindow will register the Execute and CanExecute handler to close or minimize itself .

The following example implements only the logic to close the Window .
You can follow the pattern to provide additional logic eg to maximize the Window :

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public static readonly RoutedUICommand CloseWindowRoutedCommand = new RoutedUICommand(
    "Closes the application.", 
    nameof(MainWindow.CloseWindowRoutedCommand), 
    typeof(MainWindow));


  public MainWindow()
  {
    InitializeComponent();

    this.CommandBindings.Add(
      new CommandBinding(MainWindow.CloseWindowRoutedCommand, 
        ExecuteCloseWindow, 
        CanExecuteCloseWindow));
  }

  private void CanExecuteCloseWindow(object sender, CanExecuteRoutedEventArgs e) => e.CanExecute = true;

  private void ExecuteCloseWindow(object sender, ExecutedRoutedEventArgs e) => Close();
}

ControlButtonsView.xaml

<Grid>
  <-- ICommand traverse visual tree until handler(s) is found -->
  <Button Content="X" Command="{x:static MainWindow.CloseWindowRoutedCommand}" />
</Grid>