c# Как выделить элемент на странице WebBrowser при наведении мышкой?

Выделение элемента при наведении мышкой в WebBrowser

Из этой статьи вы узнаете, как выделить элемент в WebBrowser при наведении мышкой.

Как обычно начнём с создания нового проекта типа Windows Forms Application. Затем добавим на форму элемент управления WebBrowser (wb).

control webBrowser

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

И так для начала нужно загрузить страницу в WebBrowser. В данном примере это действие я буду выполнять в обработчике события Form.Load

private void Form1_Load(object sender, EventArgs e)
{
wb.Navigate("адрес сайта");
}

Затем необходимо дождаться полной загрузки страницы, для этого подписываемся на событие DocumentCompleted.

private void wb_DocumentCompleted(object sender,
WebBrowserDocumentCompletedEventArgs e)
{
}

Следующим шагом будет подписка на событие MouseOver, которое позволит отловить момент наведения мышки на элемент.

private voidwb_DocumentCompleted(object sender,
WebBrowserDocumentCompletedEventArgs e)
{
wb.Document.MouseOver +=
new HtmlElementEventHandler(Document_MouseOver);
}
void Document_MouseOver(object sender, HtmlElementEventArgs e)
{
throw new NotImplementedException();
}

Выделение элемента

Выделить элемент на странице можно несколькими способами, так например, в данной статье рассмотрим, как это можно сделать с помощью css стилей.

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

e.ToElement.Style = "border:2px solid red;";

результат

рамка вокруг элемента

2. Применение стиля будет происходить в обработчике события MouseOver.

void Document_MouseOver(object sender, HtmlElementEventArgs e)
{
if (e.ToElement != null & e.ToElement.Style == null)
{
e.ToElement.Style = "border: 2px solid red;";
}
}

Проверим, как работает данная часть кода. Запускаем приложение и начинаем наводить мышку на любые элементы на странице.

выделение элемента

В принципе всё работает, но хотелось бы сделать так, чтобы при переключении с одного элемента на другой, выделение (рамка) исчезало.

3. В обработчике события DocumentCompleted подписываемся на событие MouseLeave.

private void wb_DocumentCompleted(object sender,
WebBrowserDocumentCompletedEventArgs e)
{
wb.Document.MouseOver +=
new HtmlElementEventHandler(Document_MouseOver);
//добавить
wb.Document.MouseLeave +=
new HtmlElementEventHandler(Document_MouseLeave);
}

4. Присвоим свойству Style значение null и вместо ToElement укажем свойство FromElement.

void Document_MouseLeave(object sender,  HtmlElementEventArgs e)
{
e.FromElement.Style = null;
}

Снова запускаем приложение, теперь всё работает как надо. Если вам было, что-то не понятно, то посмотрите видео.

Читайте также:

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*