WPF UI Waiting for server animated with dependency control.

Writing a WPF application often requires communicating with Server. When the WPF application requires to contact with server, we would like to show a neat animation on the UI like Internet explorer.






This listing shows a way to create an userControl which can be used in applications like

view plainprint?

1. <window <brbr="">.....  
2.   
3.  xmlns:WA="clr-namespace:WaitingAnimated" .... />  
4.   
5.   
6.   
7.         <wa:frontendwaiting width="25" height="25" x:name="animatedIcon" <brbr="">        Margin="200, 50, 300, 300"/>  
8.   
9. </wa:frontendwaiting></window>  

.....

 xmlns:WA="clr-namespace:WaitingAnimated" .... />



        		Margin="200, 50, 300, 300"/>

In the source code attached I have a toggle button which starts/stops the animation by setting the value of IsAnimated to true or false...

view plainprint?

1. private void Button_Click(object sender, RoutedEventArgs e)  
2.   
3.         {  
4.   
5.   
6.   
7.             animatedIcon.IsAnimated = !animatedIcon.IsAnimated;  
8.   
9.         }  

private void Button_Click(object sender, RoutedEventArgs e)

        {



            animatedIcon.IsAnimated = !animatedIcon.IsAnimated;

        }

Going thru XAML in the user control which is not rocket science but still...

The Grid.Resources has a storyboard, the repeat behavior of animation is forever and the storyboard target property is Angle of the path.

view plainprint?

1. <grid.resources>  
2.   
3.      <storyboard x:key="OnLoaded">  
4.   
5.          <doubleanimationusingkeyframes <brbr="">                BeginTime="00:00:00"  
6.   
7.          Storyboard.Target="{Binding ElementName=path}"   
8.   
9.          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"  
10.   
11.          RepeatBehavior="Forever">  
12.   
13.              <splinedoublekeyframe keytime="00:00:00.7000000" value="360">  
14.   
15.          </splinedoublekeyframe></doubleanimationusingkeyframes>  
16.   
17.      </storyboard>  
18.   
19.  </grid.resources>  

       

            

                                BeginTime="00:00:00"

                Storyboard.Target="{Binding ElementName=path}" 

                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"

                RepeatBehavior="Forever">

                    

                

            

        

Path is the union of two circles. The important things in path are the rendertransform origin which translates the origin to the corresponding value, i typically define rendertransform and add all children even if i dont use to keep code extensible. Path fill is the color in the circular path which is filled .

view plainprint?

1. <path stretch="Fill" stroke="#7F505050" <brbr="">      Data="........"   
2.   
3.               RenderTransformOrigin="0.5,0.5" x:Name="path">  
4.   
5.             <path.rendertransform>  
6.   
7.                 <transformgroup>  
8.   
9.                     <scaletransform scalex="1" scaley="1">  
10.   
11.                     <skewtransform anglex="0" angley="0">  
12.   
13.                     <rotatetransform angle="0">  
14.   
15.                     <translatetransform x="0" y="0">  
16.   
17.                 </translatetransform></rotatetransform></skewtransform></scaletransform></transformgroup>  
18.   
19.             </path.rendertransform>  
20.   
21.             <path.fill>  
22.   
23.                 <lineargradientbrush endpoint="50,100" startpoint="50,0" spreadmethod="Pad" mappingmode="Absolute">  
24.   
25.                     <gradientstop color="#E500FF00" offset="0">  
26.   
27.                     <gradientstop color="#3F2BBF2B" offset="1">  
28.   
29.                     <gradientstop color="#9B020C02" offset="0.32">  
30.   
31.                     <gradientstop color="#FFFFFFFF" offset="0.641">  
32.   
33.                 </gradientstop></gradientstop></gradientstop></gradientstop></lineargradientbrush>  
34.   
35.             </path.fill>  
36.   
37.         </path>  

		 Data="........" 

              RenderTransformOrigin="0.5,0.5" x:Name="path">

            

                

                    

                    

                    

                    

                

            

            

            	

            		

            		

            		

            		

            	

            

        

Source code here.