Larger ProgressBar rectangles on Windows Phone

Normally you'd want to use a standard size of rectangles in an indeterminate ProgressBar. However, in case that you need larger rectangles, there's an easy way to accomplish that!

A standard way of adding a ProgressBar is just to define it in XAML and say that it's indeterminate by setting the IsIndeterminate property. In MVVM architecture you'd probably bind Visibility property to a property in your ViewModel (probably a boolean, then convert it with a converter to appropriate Visibility value) to show and hide it depending on some ongoing action.

  <ProgressBar IsIndeterminate="True" />

Nothing new really. It results in a standard ProgressBar.

Standard indeterminate ProgressBar

However, if you try to change the size of those little rectangles by setting Width and Height of the ProgressBar, it doesn't really work - that only makes the control larger, not the inner elements.

So, to get the bigger ProgressBar rectangles, you need to override some resources, specifically:

  <x:Double x:Key="ProgressBarThemeMinHeight">12</x:Double>
  <x:Double x:Key="ProgressBarIndeterminateRectagleThemeSize">12</x:Double>

The default value is otherwise 3.5.

Note that it actually works even if you override just the ProgressBarIndeterminateRectagleThemeSize, but I've seen ProgressBarThemeMinHeight being used too, so no harm done if you override both.

This results in larger ProgressBar rectangles:

ProgressBar with larger rectangles

About Igor Ralic

Software engineer at Microsoft. Running for Office. Passionate about making an impact with great apps & services. Stays close to coffee and away from coriander. Opinions expressed here are my own.