Building a progress or score bar in XAML

Displaying a bar of score, like that of the Google Toolbar or an indicator of progression, requires an interaction between the display and a program.
Thus between Javascript and XAML.
The simplest version, that of the green bar, would consist in drawing a rectangle of a size defined at the start, but to have a widget of a more general usage, one will rather define a bar which can evolve after the display according to a parameter coming from the user.

The steps will be as follows:

  1. Displaying a colored rectangle.
  2. Entering of a value.
  3. Modification of the rectangle according to a given value.

Drawing the rectangle

It is placed within a border, which requires two overlapping rectangles. It was seen how to combine components inside Canvas in the chapter on the button.
In option, one will place also the value in numerical form in the middle of the bar.

<Canvas>
    <Canvas 
		x:Name="Widget"
	>
        <Rectangle x:Name="border" />
        <Rectangle x:Name="bar" />
        <TextBlock x:Name="digit" Text="00" />
     </Canvas>
</Canvas>

Script

For this demonstration, a value is given through a form and it is given as parameter of a JavaScript function which changes the size of the bar.
In the real application, it is the user's program which will determine the value provided to the JavaScript function.

Initialization of the indicator

One defines the size of the green rectangle at loading:

function barInit(sender, args)
{
	var obj = sender.FindName("bar");       // green bar
        obj["Width"] = 0;

	var txt = sender.FindName("digit");	// text
	txt.Text  = String(0);
}

For that, one adds the Loaded event to the top Canvas:

<Canvas 
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Loaded="javascript:barInit"
>

Modification of the indicator

A simple form allows to enter a value from 0 to 100. This value is interpolated with the maximum size of the bar, which is 296 pixels in the example:

var value = document.enter.user.value;
value = value  * 296 / 100;

Note that a "sender" pointer is not any laid out more since the widget is reached from outside, and the widget is found through the DOM:

var app = document.getElementById("myControl");

where agControl1 is the name of the widget in the HTML page.
Then the elements are reached like previously:

var txt = app.content.FindName("digit");	
txt.Text  = String(value);

value = value  * 296 / 100;
	
var bar = app.content.FindName("bar");
bar["Width"] = value;

Demonstration

Enter a value, between 0 and 100:

See the code

See also