Charles Petzold

I've been playing around with XAML files that might be used for interactive demonstrations, perhaps in a classroom or similar environment. It seemed that it might be interesting to have several similar demonstrations occupying the screen, and when you pass your mouse over one of them, that one expands to nearly the size of the window, and then when you're done, you could move your mouse to another.

I knew that Viewbox would be involved to make the individual items larger and smaller, but the real breakthrough came when I realized I needed two levesl of Viewbox. I needed to put everything in a single Viewbox so that the overall size would adjust itself to the window size of the web browser, the resolution of the video display, etc. Within that Viewbox is some kind of panel, and within the panel are multiple Viewbox items containing the expandable/contractable items. These interior Viewbox elements are connected with a style that expands and contracts the size of the Viewbox based on MouseEnter and MouseLeave events.

The following XAML file demonstrates this technique with three simple Shape elements in a StackPanel:

ExpandToFill.xaml

All the dimensions in this file are relative. Initially the three items are the same size because each of the interior Viewbox elements has a width of 100, and the overall Viewbox expands everything to the size of the available window. On a MouseEnter the Viewbox width is animated up to 1000, and that Viewbox then occupies a fraction of the available width equal to 1000 / (1000 + 100 + 100).

To get the MouseEnter event to respond right, you can't have a transparent background!

I've used this technique in the following XAML file that implements interactive versions of the three circuits shown on pages 95 through 101 of my book Code: The Hidden Language of Hardware and Software

LogicalSwitches.xaml

These three circuits demonstrate gate-less versions of AND, OR, and the famous Kitten Selector. You can click the switches to toggle them on and off.