Главная » Silverlight » Размещение элемента управления Silverlight рядом с элементом HTML

0

С помощью свойств стилей можно изменять не только размеры элемента управления Silverlight, но и его позицию. Для этого используется стиль CSS, задающий абсолютные координаты элемента управления Silverlight или контейнера <div>, в который он вло­жен. Координаты элемента управления Silverlight устанавливаются с помощью свойств стилей, определяющих смещение относительно левой и верхней границ контейнера.

На рис. 14.9 показан вывод приложения Silverlight во всплывающем окне поверх со­держимого страницы рядом с заданным элементом HTML, отмеченным темным фоном. Позиция отмеченного элемента HTML зависит от размеров окна браузера. Поэтому для размещения содержимого Silverlight в нужном месте необходимо динамически позицио­нировать его с помощью кода.

Рис. 14.9. Позиционирование содержимого Silverlight рядом с заданным элементом

Необходимо создать стиль, определяющий абсолютную позицию элемента управле­ния Silverlight. Чтобы элемент управления не был выведен при загрузке страницы, пра­вила стиля должны задавать нулевые значения ширины и высоты. То же самое можно сделать с помощью свойства видимости, тогда свойствам ширины и высоты динамиче­ски будут присвоены значения, равные размерам страницы Silverlight. Поскольку они вначале равны нулю, результат будет тот же.

#silverlightControlHost

{

position: absolute; width: Opx; height: Opx;

}

Область содержимого Silverlight не появится, пока пользователь не наведет указа­тель на отмеченный элемент HTML. В данном примере отмечен элемент <span>, рас­положенный в абзаце.

<div>

<р>Это обычная страница HTML.</p>

<р>Элемент управления Silverlight находится в скрытом

контейнере.</р> <р>Скрытый контейнер размещен на основе абсолютных координат. При наведении указателя на <span id="target">cnoBO</span>, отмеченное темным

фоном, элемент управления Silverlight будет выведен и автоматически позиционирован рядом с ним.</р> </div>

С помощью стиля элементу <span> присвоен желтый цвет фона.

? target

{

background-color: Yellow;

}

При загрузке страницы Silverlight код находит целевой элемент <span> и подключает к нему обработчик события onmouseover, генерируемого в среде JavaScript.

private void Page Loaded(object sender, RoutedEventArgs e)

{

HtmlElement target =

HtmlPage.Document.GetElementByld("target"); target.AttachEvent("onmouseover", element_MouseOver);

}

Когда пользователь наводит указатель на элемент, обработчик element_MouseOver () с помощью свойств of f setLef t и of f setTop модели DOM HTML находит текущую позицию элемента и размещает рядом контейнер Silverlight с помощью свойств left и top стиля.

private void element_MouseOver(object sender, HtmlEventArgs e)

{

// Получение текущей позиции элемента <span> HtmlElement target =

HtmlPage.Document.GetElementByld("target"); double targetLeft =

Convert.ToDouble(target.GetProperty("offsetLeft")) – 20; double targetTop =

Convert.ToDouble(target.GetProperty("offsetTop")) – 20;

// Извлечение и позиционирование контейнера Silverlight HtmlElement silverlightControl = HtmlPage.Document.

GetElementByld("silverlightControlHost") ; silverlightControl.SetStyleAttribute("left", targetLeft.ToString () + "px"); silverlightControl.SetStyleAttribute("top", targetTop.ToString () + "px");

// Установка размеров контейнера Silverlight silverlightControl.SetStyleAttribute("width", this.Width + "px");

silverlightControl.SetStyleAttribute("height", this.Height + "px");

}

Область содержимого Silverlight скрывается с помощью обработчика события MouseLeave, генерируемого верхнеуровневым пользовательским элементом управления.

private void Page_MouseLeave(object sender, MouseEventArgs e)

HtmlElement silverlightControl = HtmlPage.Document.

GetElementByld("silverlightControlHost"); silverlightControl.SetStyleAttribute("width", "Opx"); silverlightControl.SetStyleAttribute("height", "Opx");

}

Для вывода области содержимого Silverlight используется анимация, которая изме­няет прозрачность верхнеуровневого контейнера от 0 до 1 за полсекунды.

<UserControl.Resources> <Storyboard x:Name="fadeUp"> <DoubleAniraation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" From="0" To="l" Duration="0:0:0.5" /> </Storyboard>

</UserControl.Resources>

Для запуска анимации в конец обработчика element MouseOver () добавлен оператор

fadeUp. Begin ().

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии