Click here to Skip to main content
15,616,232 members
Articles / Desktop Programming / WPF
Posted 6 Sep 2009


34 bookmarked

WPF Panel3D Tunnel

Rate me:
Please Sign up or sign in to vote.
4.46/5 (8 votes)
6 Sep 2009CPOL2 min read
A interactive Panel3D that loads its children into the shape of a tunnel.

Image 1


This panel positions its children or items into the shape of a tunnel.


This control works like a traditional WPF Panel:

<vis3d:TunnelPanel3D >
    <Image Width="40" Height="20"></Image>
    <Image Width="40" Height="20"></Image>

The concepts and classes behind creating a Panel that renders its children in 3D space are explained in these articles: Animating Interactive 2D Elements in a 3D Panel and Conceptual Children: A powerful new concept in WPF.

Using the Code

This control has two main properties which affect the look and performance: PeicesPerSide and VirtualizingDepth. These properties determine how many children are loaded into the scene.

The ScrollPosition property scrolls through the tunnel (between 0-1). Bind this property to a slider whose maximum value is 1 and minimum value is 0.

Picture Viewer

The code included with this article has two projects that demo TunnelPanel3D. Visual3DClient uses the panel in a traditional way. The PictureViewer project was going to be a simple picture viewer to showcase the panel as an items host of an ItemsControl but it turned into more of a file/folder browser with help from the ExplorerBrowser control. It still demos how this panel can work in a data binding scenario, and it's still a picture viewer if you browse to a folder that contains pictures.

Points of Interest

The ScrollPosition property gets animated when an item is selected or when the FlyTrough methods are called. For this reason, it is important to call the StopFlying() method before manipulating this property external to the control. So, if a slider controls the ScrollPosition property, then fire the PreviewMouseDown event of the slider and call the StopFlying() method on the TunnelPanel. This avoids conflicts.

Unlike traditional panels, the Tunnel Panel will bring the selected item into view when clicked even when it is not the items host of a ItemsControl. This is done through HitTesting on the mouse down event. If this is not the functionality you want, then comment out the MouseDown event creation in the constructor of TunnelPanel3D.

To Do

  • Expose properties that control the various animation durations.
  • Currently, the FlyForward and FlyBackward methods take 10 seconds to reach the start or end of the tunnel, whether the distance traveled is a depth of one item or 1000 items.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

GeneralMy vote of 5 Pin
Sh-Ya-Hung10-May-12 13:36
Sh-Ya-Hung10-May-12 13:36 
GeneralRe: My vote of 5 Pin
justwuyule24-Aug-12 21:42
justwuyule24-Aug-12 21:42 
GeneralNot working on XP IE6 Pin
dvptUml28-Jun-10 15:31
dvptUml28-Jun-10 15:31 
QuestionCode? Pin
YAlexopoulos12-Sep-09 5:35
YAlexopoulos12-Sep-09 5:35 
AnswerRe: Code? Pin
Dan Wts12-Jan-10 20:57
Dan Wts12-Jan-10 20:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.