Added High DPI Support to my Silverlight Photobucket Demonstration Application

  • Article

I just changed my Windows Vista to use 120 DPI fonts and I really like the look of applications and the Windows interface.  The added detail is very easy on my eyes.  One side-effect of this is that my code to insert Flash videos from Photobucket into my Silverlight application were now incorrectly positioned.  The reason behind this is that when using High DPI fonts in Windows Vista, IE8 defaults to 125% zoom:

image

If I reset the font size to 100% the Flash video is placed correctly.  To place the video, I was finding the absolute coordinates of the rectangle in the Silverlight plug-in (always at 96 DPI) and then position the Flash player's IFrame at that position in pixels.  Now when the browser's coordinates are scaled to 125%, the IFrame's coordinates must be scaled as well.  Here's how I do it:

  1. When I want to start computing browser coordinates,I use the HTML DOM Bridge in Silverlight to get the X and Y DPI and divide them by the Silverlight DPI which is always 96 DPI to get a scale factor.  For 120 DPI this turns out to 0.8:

     m_xScale = SilverlightDPI / (double)HtmlPage.Window.Eval("screen.deviceXDPI");
m_yScale = SilverlightDPI / (double)HtmlPage.Window.Eval("screen.deviceYDPI");

  2. Then when I need to place an element "over" the Silverlight control, I multiply by the size and position of the IFrame by the scale factors.  Notice that I use the z-index style attribute.  This combined with the windowless parameter in the object tag makes it possible to superimpose other HTML content over Silverlight:

     url = media.Thumb;

m_videoFrame = HtmlPage.Document.CreateElement("iframe");

m_videoFrame.SetAttribute("src", media.Url.ToString());
m_videoFrame.SetAttribute("width", (442.0 * m_xScale).ToString());
m_videoFrame.SetAttribute("height", (350.0 * m_yScale).ToString());
m_videoFrame.SetStyleAttribute("position", "absolute");
m_videoFrame.SetStyleAttribute("z-index", "2");
double left = e.GetPosition(null).X - m_offset.X;
double top = e.GetPosition(null).Y - m_offset.Y;
m_videoFrame.SetStyleAttribute("left", Math.Floor(left * m_xScale).ToString() + "px");
m_videoFrame.SetStyleAttribute("top", Math.Floor(top * m_yScale).ToString() + "px");

The end result an application that lets you search for video and images from Photobucket and then drag the videos and images onto a drawing canvas.

Try it out: https://xmldocs.net/sketchbook

Sketchbook