Component Name : Spinner/ Loader Control
Limitations/ Known Bugs : Spinner gets displayed properly if the Image Url is correct and image gets downloaded from the net. If somehow the link is not correct or broken or image doesn't get downloaded then the image will not be loaded in the image control and Spinner will never go off. It will continuously be displayed.
Basic Functionality :
The basic functionality of this control is to use it as a loader while loading image in image control. It can also be used for making user understand that some long background task is in progress. When we give a web source to image control it takes some time to download the image from the web and display it in the image control. The download and display takes considerate amount of time which depends on the connectivity strength. So to make user understand that some process is going on in background we can show loader over the image control till then and as soon as original image gets downloaded and displayed loader is overlapped by original image.
Similar kind of scenario we can show loader for long running background tasks.
Similar kind of scenario we can show loader for long running background tasks.
Input: N/A
Output: N/A
How To Use :
To use this loader/spinner first we need to add reference to external library "Code 4 Fun Toolkit" which can be directly installed from the Packet Manager console. Steps to install Code 4 Fun toolkit are:
1. Go to "Tools" in Visual Studio click on "Nuget Packet manager" then click on "Packet Manager Console".
2. A small packet manager console will get opened in the bottom screen. Inside this Packet manager console in front of " PM> " write " Install-Package Coding4Fun.Toolkit.Complete " and select the project from the Default Project drop down and press enter.
3. Code 4 Fun toolkit is now installed and add in references of the project.
1. Go to "Tools" in Visual Studio click on "Nuget Packet manager" then click on "Packet Manager Console".
2. A small packet manager console will get opened in the bottom screen. Inside this Packet manager console in front of " PM> " write " Install-Package Coding4Fun.Toolkit.Complete " and select the project from the Default Project drop down and press enter.
3. Code 4 Fun toolkit is now installed and add in references of the project.
Further steps are described below:
1. Create a xaml page and add reference to Code 4 Fun toolkit in the page resources like given below in the snapshot
2. Add a list box control in the page. Inside the List box Item template create a data template and in that data template put a image control and a progress overlay which is present in the Code 4 fun toolkit dll.
Also inside Progress overlay content add a "Spinner" control which is present in the "xPWMLib" project which can be used by referencing like given in the above snapshot.
The sample snapshot of above step is given below
Also inside Progress overlay content add a "Spinner" control which is present in the "xPWMLib" project which can be used by referencing like given in the above snapshot.
The sample snapshot of above step is given below
3. Now from code bind the data to the list box such that Image control gets the source URL. We here have used Jet Image loader to download the image from the web.(Jet Image Loader is another library project which is used to perform delay download and display of images ).
All the basic steps have been performed till now. If we run the application now then till the time Image gets rendered in the image control of each list item inside the list box , a spinner is shown till that time. Once the image is fully rendered the original image overlaps with the spinner control and it gets hidden. So user feels like loader has vanished.
Comments : This control has some more work around that needs to be done which we will be working on in the next phase.Limitations/ Known Bugs : Spinner gets displayed properly if the Image Url is correct and image gets downloaded from the net. If somehow the link is not correct or broken or image doesn't get downloaded then the image will not be loaded in the image control and Spinner will never go off. It will continuously be displayed.