First, for you SilverLight 2.0 junkies, you can skip over this. SilverLight 2.0 doesn't (yet?) support the WPF ViewBox.
The problem: when you start working with WPF you notice pretty quickly WPF likes to handle the rendered size of UI elements. This is good, until you realize that WPF uses DPI and not screen pixels for units of measurement and you need to map pixels to WPF. Since you may be new to DPI, here is the short version:
DPI stands for "dots per inch" and default for Windows and WPF is 96 DPI. To calculate pixels from DPI you take the source width, divide by source DPI, and multiple by target DPI. So, if you set a width of 100 in WPF (96 DPI) on a default Windows screen you have 100 / 96 * 96 = 100 pixels. If the user has set their system to 120 DPI aka "Large Fonts", you have 100 / 96 * 120 = 125 pixels.
Why the virtual insanity? Well, the user that set 120 DPI is asking to make the UI easier to read by making it bigger - but they are still running their monitor at the same pixel resolution. It's also conceivable that some anal retentive user set their DPI to 87.5 because they measured the number of pixels in an inch with a ruler held up to the monitor. We are programmers, not psychologists, so we shouldn't question this and honor the setting.
Enough theory, what happens when you have a set resolution like 720x480 pixels (common digital video) and want to be able to place elements in that space, without resorting to the (numerous) WPF size methods and your pathetic calculus skills? Enter the XAML below:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="VirtualInsanity" Height="200" Width="300">
<Viewbox>
<Canvas Height="480" Width="720" Background="Gray" Margin="10">
<Ellipse Height="300" Width="500" Fill="Yellow"
Canvas.Top="100" Canvas.Left="100" />
</Canvas>
</Viewbox>
</Window>
This XAML produces the image shown on the left - the interesting stuff is the Height and Width properties. The Window is 300x200 (all units DPI), but the Canvas is 720x480 - the magic is the Viewbox control, which expands a control to fill the available space (while keeping the aspect ratio) but the control can assume absolute size. The Ellipse placed in the Canvas is place and sized assuming 720x480. If you run this XAML you'll see that you can resize the widow and everything grows or shrinks with the size change.
If you looking to understand more of this type of WPF magic, I can't recommend a book more than Applications = Code + Markup by Charles Petzold.
