XAML Progress Bar or Indicator

Combine XAML code and event management to create a new graphics component.

The display of the points bar, such as the Google Toolbar or the download indicator, implies interaction between the picture and the program. So between JavaScript and XAML.
The simplest option - the green panel - is to draw a rectangle of the initial size, but for a more general graphic element, a panel will instead be defined, which can be developed after displaying in accordance with user parameters.

The steps will be as follows:

  1. Displays a colored rectangle.
  2. Enter a value.
  3. Changes the rectangle to the specified value.

Draw a rectangle

It is framed, making two nested rectangles. We saw how to combine components inside Canvas in a chapter on a button.
Alternatively, the numeric value will also be placed in the middle of the panel.

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

Director's script

For this demonstration, we will select a value from the form and set this value as a parameter to a JavaScript function that resizes the panel. In a practical application, it is the user program that will determine the value provided to the JavaScript function.

Indicator initialization

The size of the green rectangle is determined during loading:

function barInit(sender, args)
{
	var obj = sender.findName("bar");       // la barre verte
	obj["Width"] = 0;

	var txt = sender.findName("digit");	// le texte
	txt.Text  = String(0);
}

To do this, the Loaded event is added to the Global canvas:

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

Changing the indicator

The classic form allows you to enter a value between 0 and 100. This value is interpolated at the maximum band size, which in the example is 296 pixels:

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

Note that you no longer have a "sender" as you access the widget from outside, but you will find the widget using the DOM:

var barcontrol = document.getElementById("agControl1");

where agControl1 is the name of the widget on the HTML page.
Then the elements are accessed, as before:

var txt = barcontrol.findName("digit");	
txt.Text  = String(value);

value = value  * 296 / 100;
	
var bar = barcontrol.findName("bar");
bar["Width"] = value;

Demo...

Enter a value between 0 and 100:

 

View code