MVVM Show View Pattern 1 View Code Behind

3 minute read

Think about the pattern to display View

When I started studying MVVM, I didn’t know how to write the code at all. Where should I write the code to display the View?
They are still ambiguous, so I’ll write this article for clarity.
However, when I looked it up, there were more things I didn’t understand.
We would appreciate your feedback.

New order

The order of new V / VM / M also differs depending on the pattern. Keep that in mind.

Combine / reference?

In MVVM, it is assumed that Model does not know ViewModel and ViewModel does not know View.
I don’t know this, because ** I only know the name, do I know or not? I’m not sure about this point. ** **
For example, if you want to display a new SubView.xaml, do you know if the code only has the definite name SubView? about it.
We will consider this with the Command parameter of pattern 2.

code

https://github.com/mikihiro-t/MVVMPattern

Development environment

Build with .NET Core 3.1 + ReactiveProperty.

Pattern 1 View code behind

The first View when launching the app is specified in StartupUri in App.xaml.
The subsequent views are displayed from the view’s code-behind.

File structure

The order of New is

New ViewModel from View
From the New ViewModel, New the Model.

The order is V → VM → M.

Project structure

Window at start

MainView.xaml is specified for StartupUri of App.xaml.

<Application
    x:Class="ShowView1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ShowView1"
    StartupUri="View/MainView.xaml">

MainView code behind

New MainViewModel.
Set vm in DataContext. You can also specify the VM in XAML instead of here.
However, if you sometimes call VM methods in the View code-behind, you may find it useful to specify them here.

  public partial class MainView : Window
    {
        MainViewModel vm = new MainViewModel();
        public MainView()
        {
            InitializeComponent();
            this.DataContext = vm;
        }

ViewModel
New and keep Model

    class MainViewModel : INotifyPropertyChanged, IDisposable
    {
        public MainManager Model { get; }

        public MainViewModel()
        {
            Model = new MainManager();

Display a new view with the click of a button

To display another view by clicking the button

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var cls = new MainView();
            cls.Show();
        }

View code-behind should be fine.
Here, we are displaying the second MainView.

Relationship between View and other Views

Here, the main view is displayed further by clicking the button, but it is the same for displaying other views.

If there is a SubView,

MainView button click
Show SubView

Will be.
In this case, MainView knows SubView. I know the name SubView and I also refer to it. As an MVVM, I don’t know if that’s fine.

Assuming that View1 may perform the process of displaying View2 (also closing process?) In View1, for example, the DialogResult of View2 is received in View1 and processed in Model via ViewModel and ViewModel. That may be OK.

Pros and cons of View code-behind

There is an idea to write as little code as possible in View, but I think it is better to write code in View under the following conditions.

Things related to View
Processing with View code is easier than processing with ViewModel or Model

Writing in XAML and writing in View in code-behind are the same processing in View. It’s just a matter of whether the language is XAML or C #.
https://stackoverflow.com/a/37294259/9924249

I feel that it is overwhelming to get complicated code when trying to process with only XAML. Also, since it will be easier to test the UI, trying to process with only XAML would be overwhelming as well.

Similar example

Handle it in the view
https://stackoverflow.com/a/5829704/9924249

private void AddCustomerView_Click(object sender, RoutedEventArgs e)
{
    AddCustomerView view = new AddCustomerView(data);
    view.Show();
}

It has become. Here, data is passed as an argument when Newing View, but this data should be model data. Is it like MVVM to pass it from View? This is also a point I do not understand.

Summary of questions

Is it okay for View to know other Views as MVVM?
How to pass the argument (Model data) when displaying View from View?

It seems to be a simple process, and I have more questions. Let’s use this pattern as a basis and compare it with other patterns.

Article schedule

Pattern 1 View code behind (this article)
Pattern 2 Command parameter
Pattern 3 Prism Dialog Service
Pattern 4 Pass arguments (planned)

Twitter Facebook LinkedIn