Click here to Skip to main content
Click here to Skip to main content

WPF Panel3D Tunnel

, 6 Sep 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A interactive Panel3D that loads its children into the shape of a tunnel.

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.

License

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

Share

About the Author

Dan Wts

Canada Canada
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSh-Ya-Hung10-May-12 14:36 
GeneralRe: My vote of 5 Pinmemberjustwuyule24-Aug-12 22:42 
GeneralNot working on XP IE6 PinmemberdvptUml28-Jun-10 16:31 
QuestionCode? PinmemberYAlexopoulos12-Sep-09 6:35 
AnswerRe: Code? PinmemberDan Wts12-Jan-10 21:57 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 7 Sep 2009
Article Copyright 2009 by Dan Wts
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid