Zooming HTML Content in UI for Silverlight HTMLPlaceHolder

Ali Rafiee

23 posts

Member since:
May 2010

Posted 29 Jun 2010 Link to this post

Hi,

I'm currently evaluting your software, and have a question.

I need to display html pages in my Silverlight application, which your HTMLPlaceHolder does well.

What I need to do is keep the relative size of the HTMLPlaceHolder constant based on the window size of the browser (It should occupy the same ratio of the screen at any size), and I need them all to show the same area of the HTML at these different size, therefore I need to zoom the content of the HTMLPlaceHolder control.
For example right now at 1024X768 it shows much more than it would at 800X600. I need to zoom the content in at 1024X768 to show the exact same thing as if the user was looking at it at 800X600.

Is there a way to zoom the content of the HTMLPlaceHolder control?

Thanks
Ali

Kiril Stanoev

Admin

1512 posts

Posted 02 Jul 2010 Link to this post

Hello Ali,

Thank you for contacting us. I assume that resizing the RadHtmlPlaceholder control itself doesn't do you any good? Probably you will have to zoom the content using JavaScript. Bellow are some articles that explain the javascript-managed code bridge.

Calling Javascript functions from RadHtmlPlaceholder

Walkthrough: Calling JavaScript from Managed Code

Walkthrough: Calling Managed Code from JavaScript

Have a look at them and let us know if they help.

On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverilght applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

Greetings,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Ali Rafiee

23 posts

Member since:
May 2010

Posted 02 Jul 2010 Link to this post

I'm looking for something like the zoom feature under Internet Explorer's View menu. It zooms the entire page as a whole.

Here is an example of how my application works as a native windows application (it uses the IE web control to display websites):

The file LargeSize.jpg shows the fullscreen appliction, on a monitor with 1280X960 resultion.
The SameSize.jpg shows the same thing on a 800X600 resultion monitor. You can see that even though they are two different sizes the websites look identical.

To accomplish this I tell IE to zoom the content based on the screen size. (I have a base resultion that I calculate the zoom factor from).

I will look into the links you provided.

Kiril Stanoev

Admin

1512 posts

Posted 07 Jul 2010 Link to this post

Hi Ali,

Once you understand how Silverlight can communicate with JavaScript, you will have to write a JS function that controls the zoom property of the body. Here is an article on the zoom property.

Greetings,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Ali Rafiee

23 posts

Member since:
May 2010

Posted 07 Jul 2010 Link to this post

If I understand things correctly the javascript needs to be in the webpage that is being loaded. Is that correct?
If so I don't have access to the html code of say www.cnn.com. I need to be able to zoom the content regardless of what the load page is.

Ali

Kiril Stanoev

Admin

1512 posts

Posted 13 Jul 2010 Link to this post

Hello Ali,

Sorry for the late reply. To zoom any page, you can apply a zoom style attribute to the IFrame that is internally used by RadHtmPlaceholder. To see how, please check the attached project. Also, have a look at the RadHtmlPlaceholder's KB articles.

Greetings,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

radhtmlplaceholderandzoom.zip

Ali Rafiee

23 posts

Member since:
May 2010

Posted 13 Jul 2010 Link to this post

Thank you very much for the sample.

There is one thing that is puzzeling, when a zoom factor is applied the RadHtmlPlaceHolder control is also getting resized.
I've tried to compensate for this by changing the size by the inverse of the zoom.

htmlCtrl.Width /= zoom/100.0;
htmlCtrl.Height /= zoom/100.0;

(I had to remove the stack panel in your sample to do this in your sample, I couldn't figure out how to resize it while the control was in the stack panel, II'm a complete noob when it comes to web development)

In my program this gets me close but is not very exact. I have a feeling that I'm getting lucky there.

Trying that in your sample, it is not even gettign close to being back to its original size. If you try 50% you will see what I'm talking about.

I'm guessing what would help is to know the new size of the window after the zoom is applied. But I can't find a way to get this new size.

Do you have any ideas on how to get around this problem?

Thanks again,
Ali

Ali Rafiee

23 posts

Member since:
May 2010

Posted 13 Jul 2010 Link to this post

After a little more "hacking"

For zooms less than 100% this seems to work much better:
//for zooms less than 100 the window gets smaller
if (zoom < 100)
{
//restore it back to its original size, for some reason divide the zoom level twice!

RadHtmlPlaceholder1.Width /= (zoom / 100) * (zoom / 100);

   RadHtmlPlaceholder1.Height /= (zoom / 100) * (zoom / 100);
}
else
{
   //the window does not resize for zooms over 100%
   //But scrollbars go away
   //somehow need to get the scrollbars back
}

BUT it does not have the correct effect for zooms over 100%

Without the hack, for zooms over 100% the window stays the same size, but the scrollbars are now gone! (Assuming that they are off the visible area of the control.)

With the hack, the window actually gets smaller, and the scrollbars are still gone.

I haven't had a chance to test the hack enough. Specially with other platforms, like Mac. But with the hack in place, I guess I would be happy if I could get the scrollbars back when the zoom is over 100%. (Since the hack is trying to keep the control from resizing, and over 100% it doesn't resize anyway)

Ali

Kiril Stanoev

Admin

1512 posts

Posted 16 Jul 2010 Link to this post

Hi Ali,

I've modified the previous project to show one possible solution to this scenario. The attached project needs further refining however, but I think it is sufficient to demonstrate what I have in mind. Basically I gave RadHtmlPlaceholder fixed width and height - 500. Then I put a ScrollViewer around RadHtmlPlaceholder. Whenever the zoom factor is more than 100, I calculate a ratio and increase the width and height of RadHtmlPlaceholder. This causes the ScrollViewer around RadHtmlPlaceholder to show its scrollbars. If the zoom factor is bellow 100, I set the width and height of RadHtmlPlaceholder to be 500 again. Finally, I've set ScrollViewer.HorizontalScrollBarVisibility="Hidden" and ScrollViewer.VerticalScrollBarVisibility="Hidden" to RadHtmlPlaceholder in order to hide the default scrollbars. This functionality is available with our latest release, so I'd strongly recommend you update your application with our latest binaries.

Have a look at the attached project and let me know if it helps.

Kind regards,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

radhtmlplaceholderandjavascript.zip

Ali Rafiee

23 posts

Member since:
May 2010

Posted 16 Jul 2010 Link to this post

I downloaded your sample and the newest version of your library.

Do you see what I see at 50%? (see attachment)

At 250%, I couldn't see any part of the website other than the menu bar at the top!

50percent.png

Kiril Stanoev

Admin

1512 posts

Posted 22 Jul 2010 Link to this post

Hi Ali,

Sorry for the late reply. RadHtmlPlaceholder cannot do much about how the zoom property works on the IFrame. Also, I am no sure how the zoom property works on a site such as google. I get the same output no matter the version of the binaries. However, if you put some simple html as SourceUrl to RadHtmlPlaceholder, the outcome is different (and I suppose expeceted):

Sincerely yours,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items