Показатель или индикатор прогресса в XAML

Сочетание кода XAML и управления событиями для создания нового графического компонента.

Отображение панели баллов, например, панели инструментов Google Toolbar или индикатора загрузки, предполагает взаимодействие между рисунком и программой. Так что между JavaScript и XAML.
Самый простой вариант - зеленая панель - заключается в рисовании прямоугольника начального размера, но для более общего графического элемента вместо этого будет определена панель, которая может развиваться после отображения в соответствии с параметрами пользователя.

Шаги будут следующие:

  1. Отображение цветного прямоугольника.
  2. Введите значение.
  3. Изменение прямоугольника в соответствии с заданным значением.

Рисование прямоугольника

Его помещают в рамку, что делает два вложенных прямоугольника. Мы видели, как объединить компоненты внутри Canvas в главе на кнопке.
Как вариант, значение в цифровой форме также будет размещено в середине панели.

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

Режиссерский сценарий

Для этой демонстрации мы выберем значение из формы и зададим это значение в качестве параметра функции JavaScript, которая изменяет размер панели. В практическом приложении именно пользовательская программа определит значение, предоставленное функции JavaScript.

Инициализация индикатора

Размер зеленого прямоугольника определяется при погрузке:

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);
}

Для этого в Глобальный холст добавляется событие Loaded:

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

Изменение индикатора

Классическая форма позволяет ввести значение от 0 до 100. Это значение интерполируется при максимальном размере полосы, который в примере составляет 296 пикселей:

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

Обратите внимание, что у вас больше нет «sender», так как вы получаете доступ к виджету извне, но вы найдете виджет с помощью DOM:

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

где agControl1 - имя виджета на HTML-странице.
Далее осуществляется доступ к элементам, как и ранее:

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

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

Демо...

Введите значение от 0 до 100 :

 

Посмотреть код