Create reusable icommand implementation classes for Windows Phone mango mvvm applications

In this articleArticleIn Windows Phone 7.1 mango, I will talk about how to implement an icommand implementation class: delegatecommand and how to use it in the mvvm mango application.

When talking about commands, command has two functions:

A: execute a special behavior: the main function of command.

B: Determine the visual STATE OF A uielement. For example, determine whether a button is available.

Delegatecommand-icommand reusable implementation class

Delegatecommand: Implements icommand. This class can be used when command is required. (Mostly in viewmodel)

The icommand is composed of the following:

The icommand members are as follows:

A: The canexecutechanged event and the canexecute method are used to determine the visual state of the control applied by the command. They work like this: when a command is applied to a control, the control calls the canexecute method, to determine the initial visual State. If the caller is a button and the canexecute method returns false, the button is disabled. Button also subscribes to the canexecutechanged event. When the canexecutechanged event is triggered, canexecute is called again to determine whether to modify the visual status.

B: The execute method is straightforward: When you need to perform some behavior operations, the control will call it. For example, when a button is pressed.

Below is the delegatecommand'sCodeList:

 Delegatecommand  Using System; Using System. net; Using System. windows; Using System. Windows. controls; Using System. Windows. documents; Using System. Windows. Ink; Using System. Windows. input; Using System. Windows. Media; Using System. Windows. Media. animation;Using System. Windows. shapes; Namespace Wp7mangodelegatecommandmvvm { Public   Class Delegatecommand: icommand {func < Object , Bool > Canexecute; Action < Object > Executeaction; Public Delegatecommand (Action < Object > Executeaction ): This (Executeaction, Null ){} Public Delegatecommand (Action < Object > Executeaction, func < Object , Bool > Canexecute ){ If (Executeaction = Null ){ Throw   New Argumentnullexception (" Executeaction ");} This . Executeaction = executeaction;This . Canexecute = canexecute ;} Public   Bool Canexecute ( Object Parameter ){ Bool Result = True ; Func < Object , Bool > Canexecutehandler = This . Canexecute; If (Canexecutehandler! = Null ) {Result = canexecutehandler (parameter );} Return Result ;} Public   Event Eventhandler canexecutechanged; Public   Void Raisecanexecutechanged () {eventhandler handler = This . Canexecutechanged; If (Handler! = Null ) {Handler ( This , New Eventargs ());}} Public   Void Execute ( Object Parameter ){ This . Executeaction (parameter );}}}

Windows Phone mango mvvm application example:

To demonstrate the use of delegatecommand, we use mvvm mode to create a Windows Phone 7.1 mango application.ProgramCreate view, viewmodel, and model.

Model

At this time, create the person class, which contains a string type attribute:

Public ClassPerson {Public StringName {Get;Set;}}
 

View Model

 

This is the most important part, using the newly created delegatecommand class. I will create the personviewmodel class to expose the datasource attribute of the observablecollection <person> type and the loaddatacommand attribute of the icommand type.

 

   Public   Class Personviewmodel {Private Observablecollection <person> persondatasource; Private Icommand loaddatacommand; Public Personviewmodel (){ This . Persondatasource = New Observablecollection <person> (); This . Loaddatacommand = New Delegatecommand ( This . Loaddataaction );} Private   Void Loaddataaction ( Object P ){ This . Datasource. Add ( New Person () {name =" John "}); This . Datasource. Add ( New Person () {name =" Kate "}); This . Datasource. Add ( New Person () {name =" Sam "});} Public Icommand loaddatacommand { Get {Return   This . Loaddatacommand ;}} Public Observablecollection <person> datasource { Get { Return   This . Persondatasource ;}}}

 

View

In this section, I will add some UI elements and connect them to the data through viewmodel. First, we need to set datacontext for the view, for the sake of simplicity, I only set datacontext as a personviewmodel instance in the view constructor.

// ConstructorPublicMainpage () {initializecomponent ();// Simple way to bind the view to the view ModelThis. Datacontext =NewPersonviewmodel ();}
 

Next, bind the command to the button.

  <Stackpanel X: Name =" Contentpanel "Grid. Row =" 1 "Margin =" 12, 0, 12, 0 "> <Button content =" Loaddata "Command =" {Binding loaddatacommand} "/> <ListBox itemssource =" {Binding datasource} "<Div Class =" Wlwritereditablesmartcontent "Id =" SCID: fb3a1972-4489-4e52-abe7-25a00bb07fdf: 214b4eb9-c519-4afd-ad6d-bed191_debf "Style =" Padding-Right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px "> <P> <a href =" Http://www.windowsphonegeek.com/upload/articles/WP7MangoDelegateCommand%20%282%29.zip "Target =" _ Blank "> Wpmangodelegatecommandmvvm </a> </P> </div> <ListBox. itemtemplate> <datatemplate> <textblock text =" {Binding name} "/> </Datatemplate> </ListBox. itemtemplate> </ListBox> </stackpanel>

For more information about commands, see the msdn documentation:

• Commands
• Icommand Interface

Translated from: windowsphonegeek