Progression or Scoring Bar

Displaying a bar of score, like that of the Google Toolbar or an indicator of progression, that supposes an interaction between the drawing 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

One places it 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 one does not lay out any more a "sender" pointer since one reaches the widget from outside, and one will find the widget using the DOM:

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

where agControl1 is the name of the widget in the HTML page.
Then one reaches the elements 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

See the code

• The Javascript code.
• The XAML code.