Доступ к HTML DOM (Document Object Model) из Silverlight
Для этого в секцию usings C# файла Page.xaml.cs добавим:
using System.Windows.Browser
Давайте теперь добавим на страницу Page.xaml кнопку, которая будет иметь имя "mainButton", и зададим событие нажатия на кнопку. Вот исходный код страницы:
<UserControl x:Class="MySilverlightApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button Click="Button_Click" Content="Изменить цвет"
Width="250" Height="50" x:Name="mainButton"/>
</Grid>
</UserControl>
Откроем страницу MySilverlightApplicationTestPage.aspx в ASP.NET приложении и посмотри на код внедрения Silverlight плагина.
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%"
InitParameters="startPage=Page"/>
</div>
Тег asp:Silverlight находится внутри тега тега div. Зададим для div имя "myDIV" и изменим стиль.
<div id="myDIV" style="background:blue; width:100%; height:100%">
Также установим для Silverlight плагина ширину, Width="50%", а не 100%.
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="50%" Height="100%"
InitParameters="startPage=Page"/>
Теперь напишем код обработчика нажатия на кнопку:
private void Button_Click(object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById("myDIV");
div.SetStyleAttribute("background", "green");
}
Данным кодом мы получаем HTML документ, находим элемент внутри HTML документа и задаём стиль для этого элемента. Таким образом, внутри Silverlight приложения мы имеем богатые возможности по изменению внешнего вида и содержимого HTML страницы.
Более того, мы можем обрабатывать события HTML страницы в нашем C# коде. Для этого в обработчик нажатия на кнопку, Button_Click добавим код:
div.AttachEvent("onclick", new EventHandler((o, x) =>
{
div.SetStyleAttribute("background", "yellow");
})); Мы присоединяемся к событию клика по свободному пространству элемента div. При таком клике цвет фона меняется на жёлтый. Здесь для обработчика события используется лямбда выражение. Вот полный код обработчика нажатия кнопки:
private void Button_Click(object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById("myDIV");
div.AttachEvent("onclick", new EventHandler((o, x) =>
{
div.SetStyleAttribute("background", "yellow");
}));
div.SetStyleAttribute("background", "green");
}
Так как это тестовый пример, то при каждом нажатии на кнопку происходит подписывание на событие. В реальных приложениях так делать нельзя и надо выносить данный код в раздел инициализации. Например, так:
public Page()
{
InitializeComponent();
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById("myDIV");
div.AttachEvent("onclick", new EventHandler((o, x) =>
{
div.SetStyleAttribute("background", "yellow");
}));
}
private void Button_Click(object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById("myDIV");
div.SetStyleAttribute("background", "green");
}
Здесь мы в конструкторе страницы подписываемся на нужное нам событие.
Запустим данное приложение. Нажмём на кнопку. Синее пространство станет зелёным. Теперь нажмём на зелёное пространство, и оно станет жёлтым.
Хочется отметить, что можно запретить доступ к HTML странице из Silverlight приложения. Для этого надо установить свойство HtmlAccess="Disabled" у серверного элемента управления asp:Silverlight. Разрешён ли доступ к HTML странице и скриптам можно проверить из Silverlight приложения благодаря свойству HtmlPage.IsEnabled.