Sonntag, 3. Februar 2008

How to zoom inside an System.Windows.Forms.Webbrowser Control?

If I talk about zooming webseite I think of the way IE 7 zoomes them. So we are talking about a real zoom NOT about chaning the fontzises. This optical webseite zoom is unique to IE 7. The question is: How does it work?

The answer is quite simple. You have to manipulate the DOM of the Website. So everything is made by the use of a System.Windows.Forms.HTMLDocument.

In this example it is required to have 3 keydowns registered. One for "+", another for "-" and the 3rd for "0". All 3 should onlny fired if the control key is also pressed. Thing about that: Writing inside a webform and then the zoom of the site changes all the time. That would not be the effect you want to have. ;)

First we need a Variable where we save the zoom size.

Dim Zoomlevel As Integer = 100


   Private Sub Webbrowser_PreviewKeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.PreviewKeyDownEventArgs) Handles Webbrowser.PreviewKeyDown
If e.Control = True AndAlso e.KeyCode = Keys.Subtract Then
Zoomlevel *= 0.95
Me.Webbrowser.Document.Body.Style = "zoom: " + Zoomlevel.ToString + "%"
ElseIf e.Control = True AndAlso e.KeyCode = Keys.Add Then
Zoomlevel /= 0.95
Me.Webbrowser.Document.Body.Style = "zoom: " + Zoomlevel.ToString + "%"
ElseIf e.Control = True AndAlso e.KeyCode = Keys.NumPad0 Then
Zoomlevel = 100
Me.Webbrowser.Document.Body.Style = "zoom: " + Zoomlevel.ToString + "%"
End If
End Sub


So what is this Code doing?



First the keys are detected. That is nothing special to an KeyDown Event. The Sizing is a bit special in this Vesion since it does not just add a Value. We use a multiplication *.95 for reducing the dize and a division for making things bigger. The Combination of Control an NumPad0 just setzt the size to the normal value.



So why is there a muliplication or a division? It is just my idea. You can do it with a fixed value. But thing of this: By zooming out with every zoom the difference between the last size and the new size will be smaller. By zooming in the difference will be bigger with each zoom. As I think here the user gets faster the size he wants. And you do not use high steps for changing since the factor is just .95. 

1 Kommentar:

Unknown hat gesagt…

vielen dank für diese document