Implementation of custom Busyindicator in Silverlight and WPF

When developing a Silverlight or WPF project, when we call a Web service to load some data, it takes a long time for the user to wait, to give the user friendly hints and to prevent users from repeating the data as it is loaded. We usually use the Busyindicator control to lock the current page. However, sometimes busyindicator the style of this control and our interface style does not match, and the change is more troublesome, today we will write a Busyindicator control, to implement a custom busy prompt.

The source download will be provided later.

first, the realization of the basic principle and the final effect

Let's start by looking at the code below,

We added three rectangles in the grid, and we set the width and height of the rectangle, so how does the rectangle appear? Display from top to bottom? No! No, let's take a look at the results:

Three rectangles are stacked together, in the order of the code, from bottom to top, and the last rectangle in the code is displayed at the topmost level. This is a feature of the grid, of course, in the canvas can also be stacked display, but not the center display, is the right-hand alignment display. If it is StackPanel, it is displayed from top to bottom.

Based on this feature, we know that UI elements added after the grid are displayed at the top of other elements, so we can dynamically add elements to the grid at run time through code, and this element is at the top level, so that other page elements can be obscured.

Let's take a look at the final implementation effect:

Is there a kind of Chinese wind flavor Ah! Let's describe the implementation method in detail below.

Ii. Specific implementation of custom Busyindicator

Here I am using Silverlight to demonstrate that it is the same with WPF. Start by creating a new project, adding a Silverlight user Control, where my name is load and the page XAML code is as follows:

<UserControlx:class= "Silverlightbusy.load"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:ed= "Http://schemas.microsoft.com/expression/2010/drawing"mc:ignorable= "D"D:designheight= "+"D:designwidth= "The ">   <usercontrol.resources>      <Storyboardx:name= "Fadestoryboard">         <DoubleAnimationx:name= "Fadeanimation"BeginTime= "00:00:00"Storyboard.TargetName= "LayoutRoot"Storyboard.TargetProperty= "Opacity" from= "0.9" to= "0"Duration= "0:0:01">         </DoubleAnimation>      </Storyboard>   </usercontrol.resources>        <Gridx:name= "LayoutRoot"Background= "#cccccc"Opacity= "0.9">      <grid.resources>         <Storyboardx:name= "Fadeimgstoryboard">            <DoubleAnimationx:name= "Fadeimganimation"BeginTime= "00:00:00"Storyboard.TargetName= "Loadimg"Storyboard.TargetProperty= "Opacity" from= "1" to= "0"Duration= "0:0:01">            </DoubleAnimation>         </Storyboard>      </grid.resources>      <Imagex:name= "Loadimg"Source= "/silverlightbusy;component/images/loading.png"Width= " +"Height= " +">      </Image>      <TextBlockx:name= "Txtloading"Width= "$"VerticalAlignment= "Center"HorizontalAlignment= "Center"Text= "Loading ..."/>   </Grid></UserControl>

In fact, this page is very simple, is a grid, an image and a TextBlock, add two storyboard is to have a transition effect, so look smoother, directly hide the image and TextBlock, it will make people feel a flash. Its Design view

The following table code is as follows:

 Public Partial classLoad:usercontrol {Private int_counter =0; PrivateDispatcherTimer timer =NewDispatcherTimer (); PrivateRotateTransform RT =NewRotateTransform (); Private BOOL_isbusy =false;  Public BOOLIsBusy {Get         {            return_isbusy; }         Set{_isbusy=value; if(value) { This. Layoutroot.visibility =visibility.visible;  This. Layoutroot.opacity =0.9; Timer.            Start (); }            Else            {               //Hide The image first, hide the transparent background layer after the image is hidden. Fadeimgstoryboard.begin (); Fadeimgstoryboard.completed+ = (sender, e) = ={txtloading.visibility=visibility.collapsed;               Fadestoryboard.begin ();               }; Fadestoryboard.completed+ = (sender, e) = ={timer.                  Stop ();  This. Layoutroot.visibility =visibility.collapsed;            }; }         }      }       PublicLoad () {InitializeComponent (); Timer. Interval=NewTimeSpan (200000); Timer. Tick+=NewEventHandler (Timer_tick); Timer.      Start (); }      voidTimer_tick (Objectsender, EventArgs e) {_counter++; //Set the rotation center point, set according to the picture size, the value is picture size/2.Rt. CenterX = -; Rt. CenterY= -; Rt. Angle-=Ten;//Rotate picture, rotate 10 degrees each time, can customize the direction of rotationLoadimg.rendertransform =RT; //let the loading behind the flash not too fast .         if(_counter%8==0)         {            if(TxtLoading.Text.Equals ("Loading ...") ) {Txtloading.text="Loading."; }            Else if(TxtLoading.Text.Equals ("Loading.") ) {Txtloading.text="Loading ."; }            Else if(TxtLoading.Text.Equals ("Loading .") ) {Txtloading.text="Loading ..."; }         }      }   }

Background code mainly control the picture rotation animation and problem animation, as well as the data loading is complete, hide the page elements.

third, call in the page

Add a button in MainPage to add the Click event with the following code:

 Public Partial classMainpage:usercontrol {PrivateLoad Load =NULL;  PublicMainPage () {InitializeComponent (); }      Private voidButton1_Click (Objectsender, RoutedEventArgs e) {Load=NewLoad (); LAYOUTROOT.CHILDREN.ADD (load);//add load to the page and it will be displayed at the top levelLoad. IsBusy =true; //called in the thread, otherwise it causes the UI threads to block.          NewSystem.Threading.Thread (() =         {             for(inti =0; I <Ten; i++) {System.Threading.Thread.Sleep ( -); }             This. Dispatcher.begininvoke (() ={load. IsBusy=false;         }); }).      Start (); }   }

Once added, press F5 to execute, we can see the effect by clicking the button on the open page.

Of course, this only achieves the same effect as busyindicator, and if you imagine using busyindicator, we need to further encapsulate it.

Click to download the source code

Cloud drizzling

QQ Exchange Group: 243633526

Blog Address: http://www.cnblogs.com/yunfeifei/

Disclaimer: The original text of this blog only represents my work in a certain time to summarize the views or conclusions, and my unit does not have a direct interest in the relationship. Non-commercial, unauthorized, post please keep the status quo, reprint must retain this paragraph statement, and in the article page obvious location to the original connection.

If you feel that my blog is helpful to everyone, please recommend supporting one, give me the motivation to write.

Implementation of custom Busyindicator in Silverlight and WPF