MVVM 架构 WPF [英] MVVM architecture WPF

问题描述

我在 WPF 中使用 MVVM 有一点架构问题.我有 View，其中包含使用计算机 的相机编写一些代码或扫描 QRCode 的选项.如果用户选择不扫码，我可以绑定Command`，没有问题.

I have a little architecture problem with MVVM in WPF. I am having View which contains option to write some code or scan QRCode with computers camera. If user choose to not scan the code, I can bindCommand` and there is no problem.

用户选择扫描二维码时出现问题.当用户按下扫描代码时，屏幕的一部分正在折叠并且相机显示在屏幕上.我必须在后面的 View 代码中完成，所以我在 View 中得到的代码在 MVVM 中并不好.

Problem is there when user choose to scan qrcode. When user press scan code part of screen is being collapsed and camera shows on the screen. I have to do it in View code behind, so the code I am getting in View which is not good in MVVM.

View 的代码如下所示:

Here how View`s code look like:

private void Scan_Click(object sender, RoutedEventArgs e)
        {
            if (_finalVideo.IsRunning)
            {
                _finalVideo.Stop();
            }

            _finalVideo = new VideoCaptureDevice(_cameraDevices[CamerasList.SelectedIndex].MonikerString);

            _finalVideo.NewFrame += (s, a) =>
            {
                try
                {
                    System.Drawing.Image img = (Bitmap)a.Frame.Clone();
                    var ms = new MemoryStream();
                    img.Save(ms, ImageFormat.Bmp);
                    ms.Seek(0, SeekOrigin.Begin);
                    var bitmapImage = new BitmapImage();
                    bitmapImage.BeginInit();
                    bitmapImage.StreamSource = ms;
                    bitmapImage.EndInit();
                    bitmapImage.Freeze();
                    Dispatcher.BeginInvoke(new ThreadStart(() =>
                    {
                        CameraStream.Source = bitmapImage;
                        ReadQrCode(bitmapImage);
                    }));
                }
                catch
                {
                    //exc
                }
            };

            _finalVideo.Start();
        }

我如何用 MVVM 解决这个问题?

How I can solve that problem with MVVM?

推荐答案

这很简单，一旦您掌握了它并知道用户控件"和视图之间的区别.

That's quite simple, once you get the grip of it and know the difference between a "user control" and a view.

第一条语句是，理想情况下，视图后面的代码应该是空的.这是真的.

The first statement is, that ideally the code behind should be empty for a view. This is true.

但是，这不适用于用户控件.用户控件可以而且应该有代码隐藏，因为它们需要自给自足，并且没有将它们的逻辑提取到某个视图模型类中.

However, this do not apply for user controls. User controls can and should have code behind, because they need to work self-sustained and do not have their logic extracted into some view model class.

那么用户控件和视图之间有什么区别呢?是的，它们通常都是基于 UserControl 派生的，但是默认情况下这不会使视图成为用户控件.重要的是，视图是为一个应用程序制作的非常具体的 UI 片段，不太可能在其他应用程序中重用.

So what's the difference between a user control and a view? Yes, they both generally derive on UserControl, but this do not make a view a user control by default. What matters is that, a view is very specific piece of UI made for one application which is very unlikely to be reused in other application.

例如，应用程序 A 中的 CustomerDetailView 或 CustomerDetailPage 将与应用程序 B 的相同视图不同，因为应用程序 B 可能对CustomerDetailView.

For example, a CustomerDetailView or CustomerDetailPage in Application A is going to be different than the same view for Application B, because Application B will likely have different requirements for a CustomerDetailView.

另一端的用户控件旨在跨应用程序重复使用，例如 DatePicker、CalendarControl 或 CameraControl.例如，此控件可用于可能需要摄像头的多个应用程序中.

A user control on the other side is meant to be reusable across applications, for example DatePicker, CalendarControl or a CameraControl. This control can be used in multiple applications that may need a camera for example.

这里重要的是，用户控件"不知道您的应用程序结构，因此没有视图模型，没有业务/域模型等.如果您想让 ViewModels 绑定到您的用户控件(ICommand 例如用于启动和回调，或者将生成的图片绑定到 ViewModel)，然后将依赖属性放入用户控件中.

Important thing here is, that the "user control" has no knowledge of your application structure, so no viewmodels, no business/domain models etc. If you want to allow ViewModels to bind to your user control (ICommand for starting and call backs for example, or bind the resulting picture to the ViewModel), then you put dependency properties into your user control.

当您在应用程序中使用此用户控件时，您只需将视图模型绑定到这些依赖项属性 (DP) 即可获得抽象.

When you use this user control in your application, you just bind your view model to these dependency properties (DP) and you got your abstraction.

TL;博士:隐藏在视图中的代码糟糕，隐藏在用户控件中的代码必要.

TL;DR: Code behind in a view is bad, code behind in a user control is necessary.

这篇关于MVVM 架构 WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！