ProgressBar Style in Silverlight

This article demonstrate how we can create the ProgressBar style in silverlight.

We can create the ProgressBar style in silverlight.we can make animation for progressbar.

Step 1: Create progressbar style in silverlight,we use the Path for designing the progressbar in Silverlight.

<Path x:Name="p1" Data="M31.841005,0.91992986 L0.99700367,1.0039299 M0.99700308,0.5 L0.99700308,35.167 M0.5,35.211964 L27.365,34.961964" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.712" Margin="41.826,0,0,32.375" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="32.341"/>
                                <Path x:Name="p2" Data="M17.489609,0.5 L0.90660876,26.833 M0.5,26.711184 L28.992409,44.526543 M28.920765,45.149155 L43.9277,21.397367" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.649" Margin="59.136,0,0,19.766" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.428" RenderTransformOrigin="0.207035454459477,0.299381056904622">
                                <Path.RenderTransform>
                                    <CompositeTransform Rotation="-1.953"/>
                                </Path.RenderTransform>
                            </Path>
                                <Path x:Name="p3" Data="M0.5,13.620011 L15.875,40.745014 M15.582001,41.208 L45.166,23.250002 M45.33799,23.708 L30.962992,0.50000018" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="41.708" Margin="77.87,0,0,38.625" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.838"/>
                                <Path x:Name="p4" Data="M0.5,34.729992 L31.291998,34.687992 M30.839996,35.104 L30.715998,0.50000131 M31.215004,1.1250029 L3.9030046,0.50000286" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.604" Margin="78.16,0,0,67.959" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="31.792"/>
                                <Path x:Name="p5" Data="M27.667776,44.807255 L43.417778,17.869255 M43.913776,17.995205 L14.373775,0.8912034 M14.711559,0.50000089 L0.50000042,25.070505" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.307" Margin="47.872,0,0,70.168" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.414"/>
                                <Path x:Name="p6" Data="M44.835003,27.916033 L29.168001,0.83203191 M29.500002,0.5 L0.5,18.084 M0.5000006,17.687012 L14.158,42.687012" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="43.187" Margin="28.665,0,0,53.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.335" />

Step 2: Use above path design in progressbar style as below.

        <Style TargetType="ProgressBar" x:Key="pStyle">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="IsIndeterminate" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Determinate"/>
                                    <vsm:VisualState x:Name="Indeterminate">
                                    <Storyboard x:Name="borsoryboard" AutoReverse="True" RepeatBehavior="forever" BeginTime="0:0:0.10" Duration="0:0:2.4" >

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="eclispse" Storyboard.TargetProperty="Opacity">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:1.35" Value="1"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:1.67" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p1" Storyboard.TargetProperty="Opacity">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.45" Value="1"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:1.25" Value="1"/>
                                            <LinearDoubleKeyFrame KeyTime="0:0:1.35" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p2" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.30" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.41" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.50" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.61" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p3" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.45" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.56" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.65" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.76" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p4" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.60" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.71" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.80" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.91" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p5" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.75" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.86" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.95" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:2.06" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p6" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.80" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.99" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:2.110" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:2.0" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                    </Storyboard>
                                </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid >
                                <Ellipse Opacity="0" x:Name="eclispse" Fill="Green" HorizontalAlignment="Left" Height="6" Margin="73,0,0,65" Stroke="Black" VerticalAlignment="Bottom" Width="6" RenderTransformOrigin="0.6,-0.167"/>
                                <Path x:Name="p1" Data="M31.841005,0.91992986 L0.99700367,1.0039299 M0.99700308,0.5 L0.99700308,35.167 M0.5,35.211964 L27.365,34.961964" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.712" Margin="41.826,0,0,32.375" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="32.341"/>
                                <Path x:Name="p2" Data="M17.489609,0.5 L0.90660876,26.833 M0.5,26.711184 L28.992409,44.526543 M28.920765,45.149155 L43.9277,21.397367" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.649" Margin="59.136,0,0,19.766" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.428" RenderTransformOrigin="0.207035454459477,0.299381056904622">
                                <Path.RenderTransform>
                                    <CompositeTransform Rotation="-1.953"/>
                                </Path.RenderTransform>
                            </Path>
                                <Path x:Name="p3" Data="M0.5,13.620011 L15.875,40.745014 M15.582001,41.208 L45.166,23.250002 M45.33799,23.708 L30.962992,0.50000018" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="41.708" Margin="77.87,0,0,38.625" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.838"/>
                                <Path x:Name="p4" Data="M0.5,34.729992 L31.291998,34.687992 M30.839996,35.104 L30.715998,0.50000131 M31.215004,1.1250029 L3.9030046,0.50000286" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.604" Margin="78.16,0,0,67.959" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="31.792"/>
                                <Path x:Name="p5" Data="M27.667776,44.807255 L43.417778,17.869255 M43.913776,17.995205 L14.373775,0.8912034 M14.711559,0.50000089 L0.50000042,25.070505" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.307" Margin="47.872,0,0,70.168" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.414"/>
                                <Path x:Name="p6" Data="M44.835003,27.916033 L29.168001,0.83203191 M29.500002,0.5 L0.5,18.084 M0.5000006,17.687012 L14.158,42.687012" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="43.187" Margin="28.665,0,0,53.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.335" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Step 3: OutPut look like as below.