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

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

Curved ScrollBars using WPF 3D

August 26, 2008
New York, N.Y.

Sometimes I get a blog comment a year or so after the original blog entry, and I never know what to do with it. Any "conversation" that might have been taking place about the blog entry has long since subsided, and everyone (including myself) has moved on.

My blog entry Non-Affine Transforms in 2D? posted a year ago is about using WPF 3D to mimic two-dimensional non-affine transforms, which are not otherwise supported in WPF. Recently someone posted a comment asking if a curved slider is possible.

Yes, curved sliders are possible, but it's a rather different process: Curved sliders (and other controls) became possible with .NET 3.5 and the Viewport2DVisual3D class. This class allows you to put an interactive control on the surface of a 3D figure, quite possibly distorting the appearance of the control in the process.

Viewport2DVisual3D derives from Visual3D and thus can be a child of a Viewport3D. The Viewport2DVisual3D class defines Geometry and Material properties like GeometryModel3D to let you define a 3D figure. But Viewport2DVisual3D also defines a Visual property of type Visual that you generally set to a control. (Visual is the content property of Viewport2DVisual3D so in XAML the control often appears as a child of the Viewport2DVisual3D object.)

Viewport2DVisual3D also defines an attached property named IsVisualHostMaterial which you use to indicate that the Material object set to the Material property of the Viewport2DVisual3D plays the role of a host to the Visual object.

The result is a control that conforms to the surface of of a 3D figure (much like a VisualBrush) but is also interactive.

There are several requirements to using Viewport2DVisual3D:

If you're just interested in distorting the appearance of a standard control, you can define a flat 3D figure that resides entirely in the XY plane of 3D space. That's what the following XAML file does to display a curved ScrollBar:


The file puts both the Viewport3D and a TextBlock showing the value of the ScrollBar in a single-cell Grid so the ScrollBar seems to wrap around the TextBlock:

The 3D figure hosting the control need not be flat. The following XAML file defines a curved band also hosting ar ScrollBar:


Here's what that one looks like:


That is extremely cool, I wouldn't have even thought about the possibility of a curved scrollbar.

— Matt Newman, Tue, 26 Aug 2008 16:03:05 -0400 (EDT)

While (possibly) a killer for usability ... This is still amazingly cool. I can see places where it might be applicable. (Possibly specific control software where the UI attempts to mimic a real-world dial or gauge?)

I've only just scratched the surface of WPF in my "spare time" -- it's obvious that I have a long way to go before I realize its full potential!

John Rudy, Tue, 26 Aug 2008 16:29:20 -0400 (EDT)

Nice. I prefer the 2D from a usability perspective but the 3D one is funky too.

BlackWasp, Thu, 28 Aug 2008 12:10:16 -0400 (EDT)

I really like this exploration of new approached to old UI metaphors. Sure, I don't think that simply making something curved into 3D enormously enhances its usability but these are ideas to be explored and eventually modified to some specific case where they would improve user experience.

Just look at PicLens for example.

— Tonko, Fri, 29 Aug 2008 00:21:22 -0400 (EDT)

That's a good one. But as was mentioned-usability is killed...

One of the possible solutions of problem is to capture mouseclick.

Or to use spherical displays :)) , that would be soon enough.

Yfer, Sat, 30 Aug 2008 23:38:42 -0400 (EDT)

>usability is killed...

If you run the XAML file, you'll see that the scrollbar responds normally to the mouse. — Charles

Normally? Not quite sure about it. Normally scrollbars have additional functionality, they capture mouse movements after you move cursor away from scrollbar.

This one is not. And i'm not sure why it doesn't.

I've fugured out one solution, but why it is working i'm really don't know.

instead of:

<ScrollBar Name="scrollbar" Orientation="Horizontal" Width="100" Minimum="0" Maximum="100" />

i wrote:

    <ScrollBar Name="scrollbar" Orientation="Horizontal" Width="100" Minimum="0" Maximum="100" />

And now acting like it should.

Yfer, Sun, 31 Aug 2008 11:08:38 -0400 (EDT)

I was interested in something like this where one could build arbitrary types of scrolling(although most cases would be useless) and this is a simple approach to solving that problem.

I do get a bit of distortion in the graphics and when the mouse leaves the bar it stops working... in this case the scrolling needs to continue while the mouse button is down.

— Jo, Wed, 1 Oct 2008 16:28:26 -0400 (EDT)

Excellent example Charles. Thank you!

— Rick Johnn, Mon, 29 Jun 2009 11:27:17 -0400 (EDT)

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

(c) Copyright Charles Petzold