How To Handle RightClick Mouse Event in Silverlight – Take 2

May 28, 2008

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

image

Source for this article here.

 

Enjoy,

Alex

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

8 comments

  1. NyxJuly 23, 2008 ב 12:36

    The sourcecode from the zip file are different to the examplecode on this page.

    sourcecode form zip
    int.Parse(evt.GetProperty(“ClientX”).ToString());

    example code
    int.Parse(evt.GetProperty(“clientX”).ToString());

    Only the example code work fine.

    Reply
  2. Alex GoleshJuly 23, 2008 ב 12:43

    Ups… Seems I forgot to update the link to newer sample… :)
    Thanks for pointing out – will be fixed.

    Alex

    Reply
  3. jpsSeptember 3, 2008 ב 23:36

    it no longer works as intended on SL2 Beta2. right-clicking pops the SL configuration menu.

    Reply
  4. jpsSeptember 4, 2008 ב 0:17

    sorry for my previous hasty post.

    it works well on beta2 after updating the code.

    Reply
  5. Kim DobranskiSeptember 24, 2008 ב 16:13

    Help, I get a Error on page when trying to run the project

    Line 45:
    Char 13
    Error ‘Content.ActualSilverlightControl’ is null or not an object
    Code: 0
    URL: http://localhost:/2219/RightClickSilverlight_web/Default.aspx

    Reply
  6. namelessNovember 2, 2008 ב 16:12

    in C# do the following on page load:

    System.Windows.Browser.HtmlPage.RegisterScriptableObject(“ActualSilverlightControl”, this);

    Reply
  7. BarryMarch 18, 2009 ב 8:27

    I downloaded the source code and opened it in VS2008 to run it, it does not work as intent, the silverlight menu still popups. my version is silverlight 2.

    Is there anything I missed?

    Reply
  8. blogs.microsoft.co.ilMay 23, 2011 ב 1:01

    How to handle rightclick mouse event in silverlight take 2.. Outstanding :)

    Reply