Another progress bar in WPF

WPF and XAML is very easy and flexible to manipulate and customize geometric shapes. It also has extensive and rich support for many types of brushes. Here I present you a very simple progress bar similar to those that you are now seeing more and more in many “modern-looking” applications. You can try the following XAML:


<Grid>

<!– The progress bar background –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5 x:Name=ProgressBarBackground>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=WhiteOffset=0 />

<GradientStop Color=Gray Offset=1/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<!–The progress bar foreground –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5

x:Name=ProgressBarForeground HorizontalAlignment=Left>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=#FF023501Offset=1.0/>

<GradientStop Color=#FFB6F9B4Offset=0/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Viewbox>

<!– The progress bar text display –>

<TextBlock TextAlignment=CenterBackground=TransparentFontFamily=Times

Foreground=Black x:Name=ProgressTextMargin=2,2,2,2> 0%

</TextBlock>

</Viewbox>

</Grid>


This will give you something like the following:


You can customize the color tone by changing the color stops. I like green so I painted the progress bar in a greenish fashion. Feel free to change it. To update the progress status, you can add property triggers (You need to create DependentProperty for this control first!) or event triggers to update the progress bar through XAML or you can add some (little) C# code-behind to update this progress bar or re-use it in your XAML-based applications. Sometimes I find that C# code can comes in handy in these situations. Let me know what you think about this little progress bar.


Btw, if you happen to know how to easily embed syntax-highlighted C# code and XAML code in WordPress.com, I’d appreciate if you can share it with me🙂 It appears that copy-and-paste the source code from Visual Studio 2005 to WordPress Blog Writer doesn’t work😦

3 Responses to Another progress bar in WPF

  1. […] weeks ago I posted a sample progress bar using rectangle overlay to achieve gradient looking and text overlay. But that control was C# […]

  2. Jayaveer says:

    Hi, I am trying to have a progress bar which looks like a pipe(mean “L” shape rather than a straight line), can i get some help on how to proceed? I am using paths for “L” shape but am struck on how to fill the progress. Support will be helpful.
    Thanks,
    Jayaveer

  3. biosys says:

    doesn’t work… have no idea why:/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: