Showing posts with label progress bar. Show all posts
Showing posts with label progress bar. Show all posts

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>