Search This Blog

Thursday, July 23, 2015

WPF Busy Indicator

After reading Better WPF Circular Progress Bar I knew I could do this in XAML with no code behind.  So I stole the design for the oracular progress bar and reworked the animation.

 <UserControl Name="BusyIndicator" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">    
   <Viewbox Width="{Binding Width, ElementName=BusyIndicator}" Height="{Binding Height, ElementName=BusyIndicator}"      
        HorizontalAlignment="Center" VerticalAlignment="Center">  
     <Grid Background="Transparent" ToolTip="Searching...." HorizontalAlignment="Center" VerticalAlignment="Center">  
       <Canvas Name="Canvas1"  
         RenderTransformOrigin="0.5,0.5"  
         HorizontalAlignment="Center"         
         VerticalAlignment="Center" Width="120" Height="120">  
         <Canvas.RenderTransform>  
           <RotateTransform Angle="0" />  
         </Canvas.RenderTransform>  
         <Canvas.Style>  
           <Style TargetType="Canvas">  
             <Style.Triggers>  
               <Trigger Property="IsVisible" Value="True">  
                 <Trigger.EnterActions>  
                   <BeginStoryboard Name="Storyboard_Rotate">  
                     <Storyboard RepeatBehavior="Forever">  
                       <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"   
                          From="0" To="360" Duration="0:0:2"/>  
                     </Storyboard>  
                   </BeginStoryboard>  
                 </Trigger.EnterActions>  
                 <Trigger.ExitActions>  
                   <StopStoryboard BeginStoryboardName="Storyboard_Rotate" />  
                 </Trigger.ExitActions>  
               </Trigger>  
             </Style.Triggers>  
           </Style>  
         </Canvas.Style>  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="1.0" Canvas.Left="50" Canvas.Top="0" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.9" Canvas.Left="20.6107373853764" Canvas.Top="9.54915028125262" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.8" Canvas.Left="2.44717418524233" Canvas.Top="34.5491502812526" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.7" Canvas.Left="2.44717418524232" Canvas.Top="65.4508497187474" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.6" Canvas.Left="20.6107373853763" Canvas.Top="90.4508497187474" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.5" Canvas.Left="50" Canvas.Top="100" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.4" Canvas.Left="79.3892626146236" Canvas.Top="90.4508497187474" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.3" Canvas.Left="97.5528258147577" Canvas.Top="65.4508497187474" />  
         <Ellipse Width="20" Height="20" Stretch="Fill" Fill="Black" Opacity="0.2" Canvas.Left="97.5528258147577" Canvas.Top="34.5491502812526" />  
       </Canvas>  
     </Grid>  
   </Viewbox>  
 </UserControl>  

License
I got the idea from the Code Project article linked above.  They use the The Code Project Open License (CPOL) and I derived my work from that and make no claim of ownership at all.

3 comments:

  1. Hey there, I would like to use this code (with slight modifications) in my project. Anything I should know license-wise? (see https://github.com/rubberduck-vba/Rubberduck/pull/809) - thanks!

    ReplyDelete