We've recently switched our document management application from using PDF representations of traffic citations to using HTML displayed in an EO WebControl.
The current document is displayed in the right pane of the application, which can be resized using a gridsplitter. The HTML inside the pane is of fixed width, and we'd like to scale it up or down to fit in the width of the preview pane.
Approaches we've tried:
- Placing the WebControl in a ViewBox control, which resulted in a blank browser pane
- Applying a ScaleTransform to the LayoutTransform of the WebControl or its parent, which also resulted in a blank browser pane
- Executing javascript on the WebControl.WebView that changes the document.body.style.zoom property to a floating point scale factor. This has been the most effective technique, however we're seeing a lot of jittering and inconsistency of text items upon resize.
I've created a sample project that exhibits the symptoms of the third approach and uploaded it here:
https://dl.dropboxusercontent.com/u/856499/WpfApplication2.zipTo see what I'm talking about, grab the bottom corner of the window. You'll notice that the browser resizes and the contents mostly scale, but text elements seem to jump around and change how they are proportioned. The CSS3 zoom property should smoothly scale the contents.
Is there a better way to achieve this? A workaround for the text issues?
Thanks for your help!