Progressbar Control Using WPF Window Based

Progressbar Control Using WPF Window Based

The ProgressBar tag in XAML represents a WPF ProgressBar control.
<ProgressBar></ProgressBar>

The Width and Height properties represent the width and the height of a ProgressBar. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a ProgressBar on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

Syntax of ProgressBar:

<ProgressBar Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="300" Height="30" />

Setting up ProgressBar Value :

The Value property of ProgressBar sets up the current value of a ProgressBar control. In the following code, I set the Value property to 60 .

<ProgressBar Margin="10,10,0,13" Name="PBar" HorizontalAlignment="Left"

                 VerticalAlignment="Top" Width="300" Height="30" Value="60" >           

        </ProgressBar>

Next up, we are going to add an animation that will automatically fill and unfill the progress bar. So we are going to add a Trigger that fires after our progress bar has loaded. That trigger will fire a storyboard with an animation. The animation will be set to increase the ProgressBar.Value from 0 to 100 over the course of 1 second. We set the autoreverse property to true, to allow the animation to go forwards and backwards. The xaml to do this would be:
 

.XAML Code:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid Background="Beige">

        <ProgressBar Margin="119,136,126,0" Name="ProgressBar1" Height="24" VerticalAlignment="Top">

            <ProgressBar.RenderTransform>

                <RotateTransform Angle="0" CenterX="75" CenterY="12" />

            </ProgressBar.RenderTransform>

            <ProgressBar.Triggers>

                <EventTrigger RoutedEvent="ProgressBar.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation
       
        Storyboard.TargetName="ProgressBar1" 
       
        Storyboard.TargetProperty="Value"
       
        From="0" To="100" Duration="0:0:1" 
       
        AutoReverse="True" RepeatBehavior="Forever" />

                            <DoubleAnimation
       
        Storyboard.TargetName="ProgressBar1" 
       
        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
       
        From="0" To="360" Duration="0:0:2" 
       
        AutoReverse="False" RepeatBehavior="Forever" />
                       </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ProgressBar.Triggers>
        </ProgressBar>
    </Grid>
</Window>