WPF MVVM Schema Step by Step (3) (move background code into a class)

Original: WPF MVVM schema Step by Step (3) (move background code into a class)

I think most developers should already know how to solve this problem. It is generally a matter of moving the backend code (GLUE) to a class library. This class library is used to represent the properties and behavior of the UI. Any code that is moved to a class library can be compiled into a DLL, which can then be referenced in any type of. NET project. So let's create an example of a very simple MVVM after which we'll upgrade our example to make him a professional MVVM example.

We first create a "Customerviewmodel" class to contain all of the "GLUE code". The Customerviewmodel class is used to represent your UI, so we should keep the properties in this class synchronized with the naming rules of the UI. We can see that the Customerviewmodel class has properties such as txtcustomername mapping to CustomerName, txtamount mapping to amount, and so on.

The following is the specific code in this class:

 Public classCustomerviewmodel {PrivateCustomer obj =NewCustomer ();  Public stringTxtcustomername {Get{returnobj. CustomerName; }            Set{obj. CustomerName =value;} }         Public stringTxtamount {Get{returnconvert.tostring (obj. Amount); }            Set{obj. Amount =convert.todouble (value);} }         Public stringLblamountcolor {Get            {                if(obj. Amount > -)                {                    return "Blue"; }                Else if(obj. Amount > the)                {                    return "Red"; }                return "Yellow"; }        }         Public BOOLismarried {Get            {                if(obj. married = ="married")                {                    return true; }                Else                {                    return false; }            }        }    }

Some highlights about the Customerviewmodel category:

• A property is named by a UI naming convention, such as Txtcustomercode, so that the class looks like a copy of a real UI.
• This class will contain the type-handling code, which can also make the UI lighter. You can see the Txtamount property, the amount property is a numeric type but the type conversion is already done in the view model class. In other words, this class is responsible for all the UI things that make the code behind the UI seem dispensable.
• All of the conversion code is like the Lblamountcolor,ismarried property.
• The data types of all properties remain simple string types, so they can be used in many different UI technologies. You can see the Lblamountcolor property it exposes a color value that is of type string, which makes the class reusable in any UI if we all follow the most concise data type guidelines.

Now that the Customerviewmodel class contains all the background logic, we can create the object of this class and then bind the object to the UI element. You can see that the following code has only the mapping code and no Conversion logic (GLUE) code.

Private void Displayui (Customerviewmodel o)        {            = o.txtcustomername;             = O.txtamount;             New Brushconverter ();              as SolidColorBrush;             = o.ismarried;        }

　　

　　

WPF MVVM Schema Step by Step (3) (move background code into a class)