Главная » Silverlight » Полупрозрачные элементы управления

0

До сих пор мы рассматривали создание полупрозрачных элементов, сквозь которые видны другие элементы Silverlight. Однако возможен и другой подход: область содержи­мого Silverlight можно вывести без окна, в результате чего сквозь элементы Silverlight бу­дет видно содержимое HTML.

Конфигурирование Silverlight на вывод содержимого без окна состоит из несколь­ких этапов. В первую очередь нужно отредактировать разметку XAML, удалив из нее непрозрачный фон. Обычно при создании новой страницы в программе Visual Studio она добавляет в разметку единственный контейнер Grid, заполняющий всю страницу. Контейнер Grid является корневым элементом страницы, поэтому Visual Studio явно присваивает ему белый непрозрачный фон.

<Grid x:Name="LayoutRoot" Background= "White">

Чтобы страница была прозрачной, нужно удалить свойство Background. Тогда кон­тейнер Grid получит прозрачный фон, установленный для него по умолчанию.

Затем нужно отредактировать входную страницу HTML. Найдите элемент <div>, в котором размещена область содержимого Silverlight. Измените значение параметра

background с white на transparent и добавьте параметр windowless, присвоив ему зна­чение true.

<div id="silverlightControlHost"> <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="TransparentSilverlight.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="transparent" /> <param name="windowless" value="true" />

</object> ciframe

style=’visibility:hidden;height:0;width:0;border:Opx’> </iframe>

</div>

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

Безоконный режим Silverlight позволяет не только увидеть содержимое HTML сквозь содержимое Silverlight, но и вывести содержимое HTML поверх содержимого Silverlight. На рис. 9.8 этот эффект проявляется в том, что фраза Это текст HTML не затеняется содержимым Silverlight.

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

. SilverlightLeftPanel

{

background-image: url (’tiles5x5.png’);

background-repeat:repeat;

position: absolute;

top: 70px;

left: lOpx;

Рис. 9.8. Безоконная область со­держимого Silverlight

width: 142рх; border-width: lpx; border-style: solid; border-color: black; padding: 8px;

}

.HtmlLeftPanel {

background-color: Transparent; position: absolute; top: ЗООрх; left: Юрх; width: 142px; font-weight: bold; border-width: lpx; border-style: solid; border-color: black; padding: 8px;

}

В первом элементе <div> размещена область содержимого Silverlight, а во втором — перекрывающееся содержимое HTML.

<div class="SilverlightLeftPanel">

<div id="silverlightControlHost">…</div> </div>

Рис. 9.7. Обычный режим вывода содержимого Silverlight

<div class="HtmlLeftPanel" >

<р>Это текст HTML</p> </div>

Совет. Обычно безоконные элементы Silverlight используются для бесшовного совмещения непрямоугольного содержимого Silverlight с фоном нижележащей страницы HTML. Однако их можно использовать и в других целях. Например, для размещения элементов HTML и Silverlight рядом. Это особенно полезно, если элементы взаимодействуют (см. главу 14). В частности, при создании проигрывателя Silverlight с кнопками HTML рекомендуется использовать безоконный элемент Silverlight.. Использование безоконных областей содержимого Silverlight приводит

к дополнительным затратам времени и оперативной памяти (заметным при частой перерисовке изображения или применении анимации), поэтому добавляйте их в приложение только при необходимости. При использовании безоконной области содержимого не предполагайте, что элементу Silverlight автоматически присваивается белый фон. При выполнении приложения на компьютере Мае всегда используется безоконный режим, независимо от передаваемых параметров. Поэтому на входной странице должен быть явно установлен белый фон.

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

По теме:

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