none
How can I make SilverLight object hit test transparent?

    Question

  • I have an SilverLight control on the page having transparent background. So I want to make it hit test transparent, so transparent part of the control should not block mouse events. Is it possable?


    <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
              <param name="onError" value="onSilverlightError" />
              <param name="background" value="Transparent" />
              <param name="pluginbackground" value="Transparent" />



    <UserControl x:Class="WebSiteAdviser.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400"
                 Width="Auto" Height="Auto"
                 Background="Transparent"
                 IsHitTestVisible="False"
                 >
    
        <Grid x:Name="LayoutRoot" Background="Transparent" IsHitTestVisible="False">
            <TextBlock Text="Sample Text" VerticalAlignment="Center"  HorizontalAlignment="Center" IsHitTestVisible="False"/>
        </Grid>
    </UserControl>


    • Moved by mbanavige Tuesday, August 31, 2010 7:29 AM Migration data
    Monday, August 30, 2010 7:02 PM

Answers

  • Hi,

    I guess what you want is to fire mouse event for your HTML controls which are covered by the Silverlight control. As I know, there is no better way to accomplish what you want.

    But, you could create a container (such as div) to contain the Silverlight and set attribute z-index of the container to -1 so that expose the HTML controls to the top layer. Then you can fire the event.

    Hope this helps.

     

    Regards

    Friday, September 03, 2010 3:23 AM

All replies

  • What are you trying to accomplish?  The IsHitTestVisible property will allow you to define whether the element will be able to register a hit test event. You have defined everything with that property to false. What element(s) do you want to have a mouse event area?

    You can try a layered approach, where the background has the IsHitTestVisible property and the second layer doesn't. You can accomplish this approach with a Grid.

    <Grid>
        <Grid x:Name="Layer1">
            <TextBlock />
        </Grid>
        <Grid x:Name="Layer2" IsHitTestVisible="False" Margin="0" />
    </Grid>


     

    Tuesday, August 31, 2010 10:39 AM
  • Read my post carefully, I asked explisetly about SilverLight control on HTML page.


    Tuesday, August 31, 2010 10:59 AM
  • Add the windowless parameter to the object tag.

    <param name="windowless" value="true" />


     

    Tuesday, August 31, 2010 12:51 PM
  • I did this, it does not help

    My version is SilverLight 4.0.

    Are you sure that it should work?

        <form id="form1" runat="server" style="height:100%">
        <div class="content" id="myParentDiv" style="position: absolute; left:000px;  top:000px; width:100%; height:100%; overflow: visible;">
           <a href="http://www.cnn.com/">Any background text Any background textareaAny background textareaAny background textareaAny background textareaAny background textareaAny background text</a>
        </div>
        <div id="silverlightControlHost" style="position: absolute; left:000px;  top:000px; width:100%; height:100%; overflow: visible;">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"  >
    		  <param name="source" value="ClientBin/Sample.xap"/>
    		  <param name="onError" value="onSilverlightError" />
              <param name="enablehtmlaccess" value="true"/>
    		  <param name="background" value="#00FFFFFF" />
                <param name="pluginbackground" value="#00FFFFFF" />
                <param name="windowless" value="true" />  
    		  <param name="minRuntimeVersion" value="4.0.50401.0" />
    		  <param name="autoUpgrade" value="true" />
    		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
     			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
    		  </a>
    	    </object>
            <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
        </form>


    Tuesday, August 31, 2010 1:30 PM
  • Change the color values to Transparent in the HTML parameters.

    <param name="background" value="Transparent" /> 
    <param name="pluginbackground" value="Transparent" /> 
    


     

    Tuesday, August 31, 2010 4:26 PM
  • If you check my first post, you would see that I already tried it and it did not work. Do you have any working sample?


    Tuesday, August 31, 2010 5:57 PM
  • Hi,

    I guess what you want is to fire mouse event for your HTML controls which are covered by the Silverlight control. As I know, there is no better way to accomplish what you want.

    But, you could create a container (such as div) to contain the Silverlight and set attribute z-index of the container to -1 so that expose the HTML controls to the top layer. Then you can fire the event.

    Hope this helps.

     

    Regards

    Friday, September 03, 2010 3:23 AM
  • Hello

    Yes, your solution is the most appropriate, but I already abandon this idea, I expected less complicated and more reliable solution. I consider that it is better to do everything in Java Script, instead of trying to make such integration of SilverLight application.

    Thanks for your reply.

    Probably it would be helpful to somebody else.

    Andrey

    Friday, September 03, 2010 9:58 AM