Wednesday 12 June 2013

Animated Progress Bar in WPF



WPF progress bars are conceptually the same as Windows progress bars; however, a very noticeable difference is that using standard coding techniques, the WPF Progress Bars do not update correctly while the application is processing.
Here i am going to give an example of animated progress bar in wpf. for this example i am using double animation in ellipse.


<Window x:Class="wpftheme.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">      
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>      
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers
    <Grid>
        <Ellipse x:Name="ellipse" Margin="55,49,54,38" StrokeThickness="15" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>  
                <TransformGroup>
                    <ScaleTransform/>         
                    <SkewTransform/>           
                    <RotateTransform/>
                </TransformGroup>   
            </Ellipse.RenderTransform>
            <Ellipse.Stroke> 
                <LinearGradientBrush EndPoint="0.445,0.997" StartPoint="0.555,0.003">
             
                    <GradientStop Color="White" Offset="0"/>         
                    <GradientStop Color="#FF0052FF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>
    </Grid>
</Window>


2 comments:

  1. Nice - thanks for sharing!

    ReplyDelete
  2. it is very nice but i want rectangle process bar with good animation

    ReplyDelete