Windows Phone development and learning-progressoverlay reminder

In Windows Phone development, it is inevitable that you have to interact with the server or perform local data processing. At this time, the system must have a good prompt function to tell the user not to think that the system has crashed, it's like the progress bar tells us the progress when installing the software. The small green bar gives us peace of mind. On the mobile phone, we should also implement such a function so that it can be regarded as a friendly interface design.

First, the implementation result is provided, as shown in:

As you can see, the current interface consists of two parts, one is the background and the other is the foreground progressoverlay. Here, my background is actually a simple textblock. When progressoverlay appears, the background is automatically dimmed and hidden in the backend. This is a very good interface design. If it is superimposed on the textblock, the interface will be like this:

Do you still want to see what the progress SS prompts?

For more examples, download:

Http://www.windowsphonegeek.com/upload/articles/ProgressOverlayDemo.zip

The following describes the implementation:

1. First download coding4fun this class library, http://coding4fun.codeplex.com/This is definitely a big good thing

2. Add the DLL to the project, as described in the previous article, as follows:

3. Different from toastpromote, here we do not call it in the page background. CS file, but directly put it in the front-end XAML file.

Add a namespace in XAML

Xmlns: Controls = "CLR-namespace: coding4fun. Phone. controls; Assembly = coding4fun. Phone. Controls"
 

Then use the control.

 
<Controls: progressoverlay name = "progressoverlay"> <controls: progressoverlay. content> <textblock> never come to Beijing for national day. People are crowded. </textblock> </controls: progressoverlay. content> </controls: progressoverlay>
 

Note that the added ControlCodeYou can hide the previous widget in the background only after other widgets. For example, the position of the widget is as follows:

<Grid X: Name = "layoutroot" background = "Transparent"> <textblock Height = "691" horizontalalignment = "Left" margin = ", 45, 0, 0 "name =" text "text =" I am Chinese, Diaoyu Islands is China "verticalignment =" TOP "width =" 447 "/> <controls: progressoverlay name = "progressoverlay"> <controls: progressoverlay. content> <textblock> never come to Beijing for national day. People are crowded. </textblock> </controls: progressoverlay. content> </controls: progressoverlay> </GRID>
 

So the first result above is implemented in this way.

Of course, I can assure that many people have not implemented this effect according to my method. I am confused after reading the sample code. Why am I the same as the sample code, but it cannot be implemented? In the coding4fun discussion board, I also saw a group of foreigners discussing this progressoverlay issue that cannot be displayed. In the end, I found that the original code sample uses the old DLL, And the implementation method of the updated dll has changed. Through the query, I found a solution. There are actually technologies on Sina Blog.Article, Let me sweat: http://blog.sina.com.cn/s/blog_94000f5201012t56.html

The solution is:

I. Add reference and namespace

Xmlns: sltoolkit = "CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone. controls. toolkit "xmlns: c4f =" CLR-namespace: coding4fun. phone. controls; Assembly = coding4fun. phone. controls "xmlns: converters =" CLR-namespace: coding4fun. phone. controls. converters; Assembly = coding4fun. phone. controls"
 

Ii. Write the Control Code as follows:

 
C4f: progressoverlay name = "progressoverlay" visibility = "{binding overlayvis}"> <c4f: progressoverlay. resources> <converters: visibilitytobooleanconverter X: Key = "vistoboolconverter"/> </c4f: progressoverlay. resources> <stackpanel> <textblock horizontalalignment = "center"> loading </textblock> <sltoolkit: performanceprogressbar isindeterminate = "{binding elementname = progressoverlay, Path = visibility, converter = {staticresource vistoboolconverter} "/> </stackpanel> </c4f: progressoverlay>
 

I want to make the correction so that the results can be realized.

Of course, some people may wonder that this is useless. After all, this is a dead part of the page, and it is not as appropriate as clicking a button, event-triggered results are available. So I think I should do this:

1. Create a user control page and use the progressoverlay control on the user control page.

The Xmal code is as follows:

<Usercontrol X: class = "usercontrols. progresscontrol "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns: sltoolkit =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone. controls. toolkit "xmlns: c4f =" CLR-namespace: coding4fun. phone. controls; Assembly = coding4fun. phone. controls "xmlns: converters =" CLR-namespace: coding4fun. phone. controls. converters; Assembly = coding4fun. phone. controls "MC: ignorable =" D "fontfamily =" {staticresource phonefontfamilynormal} "fontsize =" {staticresource quota} "foreground =" {staticresource phoneforegroundbrush} "D: designheight = "768" D: designwidth = "480"> <grid X: name = "layoutroot" background = "Transparent" width = "480" Height = "800"> <c4f: progressoverlay name = "progressoverlay" visibility = "{binding overlayvis}"> <c4f: progressoverlay. resources> <converters: visibilitytobooleanconverter X: Key = "vistoboolconverter"/> </c4f: progressoverlay. resources> <stackpanel> <textblock layout = "center" name = "textblockstatus"> loading </textblock> <sltoolkit: performanceprogressbar isindeterminate = "{binding elementname = progressoverlay, Path = visibility, converter = {staticresource vistoboolconverter} "/> </stackpanel> </c4f: progressoverlay> </GRID> </usercontrol>

The background. CS code is as follows:

 
Using system; using system. windows; using system. windows. controls; using system. windows. controls. primitives; namespace usercontrols {public partial class progresscontrol: usercontrol {public progresscontrol () {initializecomponent ();} internal popup childwindowpopup {Get; private set;} public void setmessage (string message) {textblockstatus. TEXT = message;} public void show () {If (this. childwindowpopup = nu Ll) {This. childwindowpopup = new popup (); try {This. childwindowpopup. child = This;} catch (argumentexception) {Throw new invalidoperationexception ("the control is already shown. ") ;}} if (this. childwindowpopup! = NULL & application. Current. rootvisual! = NULL) {This. childwindowpopup. isopen = true ;}} public void hide () {// restore system traythis. childwindowpopup. isopen = false ;}}}
 

2. Use the control in the event function that needs to call the control. For example, when I call the control during synchronization, add reference and create the object.

// Execute the Synchronous Response Function public class synchandler {progresscontrol progressdialog; // progressindicator progressdialog; doendeventhandler doendhandler; Public synchandler (includoend) {doendhandler = doend ;} public void handlemessage (Object sender, synceventargs e) {// asynchronous call displays the output deployment. current. dispatcher. begininvoke () =>{ if (progressdialog = NULL) {progressdialog = new progresscontrol ();} progressdialog. show (); If (E. msgid = syncservice. begin_sync_msg) {progressdialog. setmessage ("START synchronization");} else if (E. msgid = syncservice. begin_google_sync) {progressdialog. setmessage ("start to synchronize Google Calendar");} else if (E. msgid = syncservice. begin_365_sync) {progressdialog. setmessage ("START synchronization");} else if (E. msgid = syncservice. sync_google_error) {var toast = new toastprompt {message = "Google Calendar synchronization error",}; toast. show ();} else if (E. msgid = syncservice. end_sync_msg) {progressdialog. hide (); var toast = new toastprompt {message = "synchronization completed",}; toast. show (); doendhandler ();} else if (E. msgid = syncservice. start_rec_msg) {progressdialog. setmessage ("Processing Section" + E. number + "entries");} else if (E. msgid = syncservice. end_rec_msg) {progressdialog. setmessage ("data processing completed");} else if (E. msgid = syncservice. sync_send_num) {progressdialog. setmessage ("sending" + E. number + "entries");} else if (E. msgid = syncservice. sync_rec_num) {progressdialog. setmessage ("receiving" + E. number + "entries");} else if (E. msgid = syncservice. sync_no_network) {var toast = new toastprompt {message = "unable to access the network. Check the network connection" ,}; toast. show ();} else if (E. msgid = syncservice. sync_no_cred) {var toast = new toastprompt {message = "account authentication failed. Please check 365 account settings" ,}; toast. show ();} else if (E. msgid = syncservice. start_calendar_sync) {progressdialog. setmessage ("start to synchronize Calendar");} else if (E. msgid = syncservice. start_schedule_sync) {progressdialog. setmessage ("START synchronization schedule");} else if (E. msgid = syncservice. start_note_sync) {progressdialog. setmessage ("START synchronization to do");} else if (E. msgid = syncservice. google_token_error) {var toast = new toastprompt {message = "Google authentication failed",}; toast. show (); accountentity account = accountcontrol. getaccount (); account. googleaccountstate = accountentity. google_user_token_invalidate; accountcontrol. saveaccount (account);} else if (E. msgid = syncservice. show_slow_sync) {var toast = new toastprompt {message = "synchronizing all data",}; toast. show (); // MessageBox. show ("synchronizing all data");} else if (E. msgid = syncservice. sync_running) {var toast = new toastprompt {message = "Running synchronization in the background",}; toast. show (); // MessageBox. show ("Running synchronization in the background");} else {progressdialog. setmessage ("error, dear ");}});}}

This is all done, and the background page can be hidden before progressoverlay can appear on any page. At the same time, you can call toastpromote at the end of progressoverlay to achieve better user interaction.