Introduction
This panel positions its children or items into the shape of a tunnel.
Background
This control works like a traditional WPF Panel:
<vis3d:TunnelPanel3D >
<Image Width="40" Height="20"></Image>
<Image Width="40" Height="20"></Image>
....
</vis3d:TunnelPanel3D>
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.
