Silverlight and DOM events
I want to demonstrate this by showing the mouse’s X and Y coordinates in a Silverlight Grid. The DOM event to connect to is the MouseMove event. I will connect to the BODY HTML MouseMove event. This means anywhere the user moves their mouse, it will display the corresponding X and Y coordinates. This can all happen thanks to the HtmlWindow.AttachEvent method. This method attaches a .NET Framework event handler to an event on the current Document Object Model (DOM).
To begin with open Visual Studio 2008 and choose File > New > Project > Silverlight > Silverlight Application. In the web application open the SilverlightApplication1TestPage.aspx markup and replace the body tag with the following code:
Assigning an id to the body tag allows us to program against this tag. That’s all we need to do for the web application. Open the Silverlight project and add the following xaml to the Page UserControl:
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="Mouse Coordinates" Margin="5" FontSize="14" Foreground="Blue" />
<TextBlock x:Name="txtClientX" Width="50" Height="25" Text="ClientX:" />
<TextBlock x:Name="txtClientXValue" Width="50" Height="25" Foreground="Red" />
<TextBlock x:Name="txtClientY" Width="50" Height="25" Text="ClientY:" />
<TextBlock x:Name="txtClientYValue" Width="50" Height="25" Foreground="Red" />
In the xaml above I have created a parent StackPanel that contains three children StackPanel’s. The last two StackPanel’s both contain two TextBlock controls and these will display the X and Y mouse coordinates.
The next step is to add code that attaches to the DOM event and handle the event with a .NET event handler. Open the Page.xaml.cs file and add the following code to the constructor:
HtmlElement element = HtmlPage.Document.GetElementById("htmlBody");
if (element != null)
element.AttachEvent("mousemove", new EventHandler<HtmlEventArgs>(RaiseHtmlEvent));
Public Sub New()
Dim element As HtmlElement = HtmlPage.Document.GetElementById("htmlBody")
If element IsNot Nothing Then
element.AttachEvent("mousemove", New EventHandler(Of HtmlEventArgs)(AddressOf RaiseHtmlEvent))
The GetElementById property returns an HtmlElement object which is the BODY tag in the ASPX page. To connect to the MouseMove event, you call the AttachEvent method. The first parameter is the name of the event in the DOM object. The second parameter is a delegate that will be called each time the event is fired. For the event names, the MSDN help file states:
· For Internet Explorer: If eventName does not start with the string "on", the string is prepended to the event name (for example, "click" is changed to "onclick"). This enables developers who want to use Firefox naming conventions to attach their events automatically in Internet Explorer.
· For other browsers: If eventName starts with the string "on", the string is removed from the event name to support browsers that have different naming conventions. (For example, "onclick" is changed to "click, and "onblur" is changed to "blur".)
You should be aware that if the DOM event is not found, nothing will happen, so it is a good idea to familiarise yourself with the DOM events. You can look here for more information about DOM events.
Returning to the code, add the following code to create the RaiseHtmlEvent delegate:
public void RaiseHtmlEvent(object sender, HtmlEventArgs e)
txtClientXValue.Text = e.ClientX.ToString();
txtClientYValue.Text = e.ClientY.ToString();
Public Sub RaiseHtmlEvent(ByVal sender As Object, ByVal e As HtmlEventArgs)
txtClientXValue.Text = e.ClientX.ToString()
txtClientYValue.Text = e.ClientY.ToString()
The RaiseHtmlEvent method receives the HtmlEventArgs parameter. The HtmlEventArgs parameter provides details about the event that was raised. The HtmlEventArgs object contains two properties, ClientX and ClientY, that returns the x and y coordinate mouse position in pixels relative to the client area of the window. These will be displayed to the user and updated each time they move their mouse. Run the project and move the mouse around the page. You’ll see your X and Y mouse coordinates.
The source code of this article can be downloaded from here
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Purchase this eBook at a Discounted Price!