Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Объединение содержимого Silverlight и HTML

151

При объединении элементов HTML и Silverlight в одном и том же визуальном пространстве необходимо приложить дополнительные усилия для правильной компоновки содержимого. Обычно для этого используются стили CSS.

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

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

Управление размерами элемента Silverlight

Тестовая страница, создаваемая по умолчанию программой Visual Studio, заполняет областью содержимого Silverlight все окно браузера. Размеры области содержимого можно изменять, но вы все еще будете вынуждены явно присваивать значения размеров. В противном случае содержимое Silverlight получит размеры на основе размеров элемента UserControl, однако страница будет отсечена рамкой:

<UserControl ...
    Width="400" Height="175" ...
Размеры элемента управления Silverlight, установленные по умолчанию

Было бы удобно иметь способ задать автоматическую установку размеров области содержимого на основе размеров страницы Silverlight. Для этого нужно подождать, пока страница загрузится, а затем найти на ней соответствующий элемент <object> и установить его размеры на основе размеров HTML-страницы.

Ниже приведен обработчик события загрузки, устанавливающий размеры элемента управления Silverlight с помощью свойств ширины и высоты:

private void Page_Loaded(object sender, RoutedEventArgs e)
{
     HtmlElement element = 
           HtmlPage.Document.GetElementsByTagName("object").First() as HtmlElement;
     element.SetStyleAttribute("width", this.Width + "px");
     element.SetStyleAttribute("height", this.Height + "px");
}
Задание размеров области Silverlight

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

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

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

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

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

html, body {
    }
body {
	padding: 0;
	margin: 0;
}
#silverlightControlHost {
	position: absolute;
    width: 0px;
    height: 0px;
}
#target 
{
	background-color: Yellow;
}

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

<div>
        <p>Это обычная HTML-страница.</p>
        <p>Элемент управления Silverlight находится в скрытом контейнере.</p>
        <p>Скрытый контейнер позиционирован на основе абсолютных координат. При наведении 
        указателя на <span id="target">слово</span>, 
        отмеченное желтым фоном, элемент управления Silverlight будет 
        выведен и автоматически позиционирован рядом с ним.</p>
</div>

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

private void Page_Loaded(object sender, RoutedEventArgs e)
{
           HtmlElement target = HtmlPage.Document.GetElementById("target");
           target.AttachEvent("onmouseover", element_MouseOver);
}

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

private void element_MouseOver(object sender, HtmlEventArgs e)
{
            // Получение текущей позиции элемента 
            HtmlElement target = HtmlPage.Document.GetElementById("target");
            double targetLeft = Convert.ToDouble(target.GetProperty("offsetLeft")) - 20;
            double targetTop = Convert.ToDouble(target.GetProperty("offsetTop")) + 20;

            // Извлечение и позиционирование контейнера Silverlight
            HtmlElement silverlightControl = HtmlPage.Document.GetElementById("silverlightControlHost");
            silverlightControl.SetStyleAttribute("left", targetLeft.ToString() + "px");
            silverlightControl.SetStyleAttribute("top", targetTop.ToString() + "px");
            silverlightControl.SetStyleAttribute("width", this.Width + "px");
            silverlightControl.SetStyleAttribute("height", this.Height + "px");

            fadeUp.Begin();
}

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

<UserControl ...
    Loaded="Page_Loaded" Width="175" Height="90" MouseLeave="Page_MouseLeave">
    <UserControl.Resources>
        <Storyboard x:Name="fadeUp">
            <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                     Storyboard.TargetProperty="Opacity" 
                     From="0" To="1" Duration="0:0:0.8" />
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Stroke="Blue" StrokeThickness="1.5"
             RadiusX="5" RadiusY="5" Fill="#8888AAFF" />
        <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Margin="10">В этом всплывающем окне находиться содержимое Silverlight.</TextBlock>
    </Grid>
</UserControl>

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

private void Page_MouseLeave(object sender, MouseEventArgs e)
{
            // Скрыть область содержимого
            HtmlElement silverlightControl = HtmlPage.Document.GetElementById("silverlightControlHost");
            silverlightControl.SetStyleAttribute("width", "0px");
            silverlightControl.SetStyleAttribute("height", "0px");
}
Позиционирование содержимого Silverlight рядом с заданным элементом
Пройди тесты