Some time ago, I've posted article about how to handle RightClick mouse event in Silverlight. At the time of the post, there were Silverlight 1.1 alpha.
Now we at Silverlight 2 Beta 1 (and approaching Beta 2 sometime soon), and here is update to my previous article.
This update is closely related to previous post, thus this one will have only changes...
Here we go.
First of all, my XAML page is still very simple
1: <UserControl x:Class="RightClickSilverlight.Page"
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Loaded="UserControl_Loaded"
5: Width="640" Height="480">
6: <Canvas x:Name="LayoutRoot">
7: <Canvas.Background>
8: <LinearGradientBrush StartPoint="0.5,-1" EndPoint="0.5,1">
9: <GradientStop Color="#FF718398" Offset="0"/>
10: <GradientStop Color="#FFFFFFFF" Offset="1"/>
11: </LinearGradientBrush>
12: </Canvas.Background>
13: <TextBlock Canvas.Top="10" Canvas.Left="10" x:Name="txt" Text="Silverlight" FontFamily="Segoe" FontSize="25" FontWeight="Bold" Foreground="Blue"/>
14: </Canvas>
15: </UserControl>
This time I've decided to with Web Site, which hosts my Silverlight control. Here is very simple Default.aspx:
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:
5: <html xmlns="http://www.w3.org/1999/xhtml">
6: <head runat="server">
7: <title>Silverlight Project Test Page </title>
8:
9: <script type="text/javascript" src="Silverlight.js"></script> 1:
2: <style type="text/css">
3: .silverlightHost { width: 640px; height: 480px; position:absolute; } 4: </style>
5:
6: <script type="text/javascript">
7: function createSilverlight()
8: { 9: Silverlight.createObjectEx({ 10: source: "ClientBin/RightClickSilverlight.xap",
11: parentElement: document.getElementById("SilverlightControlHost"), 12: id: "SilverlightControl",
13: properties: { 14: width: "100%",
15: height: "100%",
16: version: "2.0",
17: enableHtmlAccess: "true",
18: isWindowless: "true"
19: },
20: events: {} 21: });
22:
23: // Give the keyboard focus to the Silverlight control by default
24: document.body.onload = function() { 25: var silverlightControl = document.getElementById('SilverlightControl'); 26: if (silverlightControl)
27: silverlightControl.focus();
28: }
29: }
30:
31: function ReactOnClickEvent(e)
32: {
if (!e) e = window.event;
33: var silverlightControl = document.getElementById("SilverlightControl"); 34:
35: if(silverlightControl)
36: silverlightControl.Content.ActualSilverlightControl.ProcessMouseEvent(e);
37: }
38:
</script> 1:
2: </head>
3: <body oncontextmenu="return false;">
4: <div id="SilverlightControlHost" class="silverlightHost" style="position:absolute; left:0px; top:0px;" onmousedown="ReactOnClickEvent(event);">
5: <script type="text/javascript">
6: createSilverlight();
7:
</script>
10: </div>
11: </body>
12: </html>
This time I have no separate JS file, and my CreateSilverlight function in HTML this time. The changes there are only in Siverlight runtime version (2.0 vs 1.1) and source being changed from *.XAML file to *.XAP.
Finally, here is manage code changes:
1: [ScriptableType]
2: public partial class Page : UserControl
3: { 4: public Page()
5: { 6: InitializeComponent();
7: }
8:
9: private void UserControl_Loaded(object sender, RoutedEventArgs e)
10: { 11: //Register managed code to be accesible from JS
12: HtmlPage.RegisterScriptableObject("ActualSilverlightControl", this); 13: }
14:
15: [ScriptableMember]
16: public void ProcessMouseEvent(ScriptObject evt)
17: { 18: int button = int.Parse(evt.GetProperty("button").ToString()); 19: int clientX = int.Parse(evt.GetProperty("clientX").ToString()); 20: int clientY = int.Parse(evt.GetProperty("clientY").ToString()); 21:
22: txt.Text += "\n" + "Event from " + (button != 2 ? "Left" : "Right") + " mouse button on X=" + clientX + " Y = " + clientY;
23: }
24: }
The changes here are: new attributes and change in GetProperty syntax.
We done... Right click trick works also in Silverlight 2
Source for this article here.
Enjoy,
Alex