WPF Web Based

R4R^®

WPF with C#

WPF Web Based Tutorials

WPF Examples

WPF

WPF Projects

WPF Project

WPF Interview Materials

WPF subjective question

WPF Interview question

WPF Objective question

WPF FAQS

ProgressBar Control In WPF Web Base

Home

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:

<Page x:Class="WpfBrowserApplication5.Page4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page4" Loaded="Page_Loaded">
<Grid Background="Beige">
<ProgressBar Margin="64,118,0,0" Name="ProgressBar1"
        HorizontalAlignment="Left" Width="150" 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>
</Page>

First Output:

After Rotation: