PETZOLD BOOK BLOG

Charles Petzold on writing books, reading books, and exercising the internal UTM


Recent Entries
< PreviousBrowse the ArchivesNext >
Subscribe to the RSS Feed

More Circuits in XAML

September 23, 2007
New York, N.Y.

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.


Comments:

Good Morning Sir,

I was opportuned to come across your circuits design in xaml. It is very impressive. I am in the process in developing an educational software. Initially, I was going to use flash which I am not that conversant with. But seeing your work in xaml gave me the confidence that I can do it (or anything) in xaml. What advice can you give me, sir? I think this is a good start for me to get my hands dirty in xaml.

Regards,

Theo Medeiros, Fri, 19 Oct 2007 03:10:54 -0400 (EDT)

Was this all done in plain xaml or you used some WPF classes to achieve this?

— Theo Medeiros, Sun, 21 Oct 2007 07:45:59 -0400 (EDT)


Recent Entries
< PreviousBrowse the ArchivesNext >
Subscribe to the RSS Feed

(c) Copyright Charles Petzold
www.charlespetzold.com