Screenshot of HtmlPlaceHolder

[Haris]

Hi,

I am struggling with the same old z-index issue of Iframe. I wanted to check the following:

In short, is it possible to get the screenshot of the whole page that includes a HtmlPlaceHolder?

Details:
I am trying to find a work around to fix the z-index issue of HtmlPlaceHolder found at these links:
http://www.telerik.com/community/forums/silverlight/htmlplaceholder/silverlight-menu-opens-behind-the-htmlcontentplaceholder.aspx
http://www.telerik.com/community/forums/silverlight/htmlplaceholder/timepicker-is-hiding-because-of-placeholder.aspx

A solution suggested at this link is feasible for me:
http://www.telerik.com/community/forums/silverlight/htmlplaceholder/silverlight-menu-opens-behind-the-htmlcontentplaceholder.aspx#1007503

I am using the following code to get the image:

System.Windows.Media.Imaging.WriteableBitmap image = new
WriteableBitmap(Convert.ToInt32(this.uxRadHtmlPlaceHolder.ActualWidth), Convert.ToInt32(this.uxRadHtmlPlaceHolder.ActualHeight));

image.Render(this.LayoutRoot, new MatrixTransform());
image.Invalidate();
this.uxImage.Source = image;

The area for Iframe of HtmlPlaceHolder always come up blank.

I've searched for a while on different forums but without any luck.

Looking forward for your reply.

Thanks

- Haris

[Petar Mladenov]

Hello Haris,

Could you please elaborate more on your purpose? Do you really need a snapshot of the browser`s content or you insist on creating an Image? If snapshot, then you can just use a Rectangle with a WebBrowserBrush Fill:

<Rectangle Width="300" Height="300" x:Name="browserWrapperRectangle">
               <Rectangle.Fill>
                   <WebBrowserBrush SourceName="browser" x:Name="webbrush"/>
               </Rectangle.Fill>
           </Rectangle>

where browser points to a non visible WebBrowser. On the other hand, there are some security limitations when trying to create an Image from WebBrowser or  from Rectangle with WebBrowserBrush.

Kind regards,
Petar Mladenov
the Telerik team

[Haris]

Please find the attached image as the structure of the page. I know the fact that because of the IFrame used in RadHtmlPlaceHolder, Menu Item (Green) cannot be on top of RadHtmlPlaceHolder.

So for the work-around I thought of the following situation:

1. When the mouse is hovered over the Menu (Red):
   1. Set the visibility of the RadHtmlPlaceHolder to Collapsed.
   2. Get the “Screen Shot” of the RadHtmlPlaceHolder
   3. Put it in an Image and display it.
2. When the mouse goes out of the Menu(Red):
   1. Set the visibility of the RadHtmlPlaceHolder to Visible
   2. Hide the image

This is a part of requirement I need. The actual requirement is a little different as different modules are loaded. But I believe I can achieve it if I can get the “Screen Shot” of the RadHtmlPlaceHolder.

Hope this will help you to help me get the solution J

Thanks in advance.

[Kiril Stanoev]

Hello Haris,

Thank you very much for elaborating more on your scenario. Unfortunately this is not supported in-browser scenario. It all boils down to the fact that RadHtmlPlaceholder, being an IFrame, is rendered on top of the whole Silverlight plugin. Therefore any attempts to take a screenshot of RadHtmlPlaceholder will fail. The only possible scenario in which you can take a screenshot of RadHtmlPlaceholder is if you application is Out-Of-Browser.

Best wishes,
Kiril Stanoev
the Telerik team