WPF graph that detects circular dependencies

November 16, 2009

I spent the weekend having a blast writing a WPF app that displays an interactive object graph, and detects/highlights circular dependencies. It was so much fun, that I decided to publish an article about it on CodeProject.

Here’s a screenshot of the app:

ComplexCircularGraph

The app uses Charles Petzold’s ArrowLine element, PropertyObserver and ObservableObject from my MVVM Foundation library, DragCanvas from WPF.JoshSmith, and ContentControl3D from Thriple.

If you want to check it out, here’s the article:

http://www.codeproject.com/KB/WPF/WpfGraphVisualization.aspx

Enjoy!

Advertisements

Introducing Thriple: A Library of 3D WPF Components

March 8, 2009

I recently published a new project on CodePlex called Thriple.  It contains 3D components that you can easily add to your WPF user interfaces.  As of version 1.0, Thriple contains my old Panel3D layout panel, and my new ContentControl3D.  I have put a lot of time and effort into making ContentControl3D a highly reusable, customizable control.  I’m very happy with how it turned out, but be sure to read the Known Issues section on Thriple’s Release page.

The source code download also contains sample applications that show the components in action.  If you want to check it out, here’s the link: http://thriple.codeplex.com/

kick it on DotNetKicks.com


Using ContentControl3D and Panel3D in a ListBox

February 24, 2009

In my previous blog post I introduced a new control that I have been working on called ContentControl3D.  Back in May of 2008 I wrote a CodeProject article about a custom layout panel that arranges and animates 2D elements in 3D space, called Panel3D.  Tonight I combined ContentControl3D and Panel3D to create an improved version of my WPF Disciples Blog Roll 3D application.

In order to make this application work, I had to enhance ContentControl3D by exposing more properties and methods in its public API.  This version of the control is much better than the version posted previously.  For example, you can now configure the camera used to view the 3D scene by setting the CameraPrototype property, and specify where the camera should move to during an animated rotation by setting the CameraZoomDestination property to a Point3D object.  The following class diagram shows the API:

class-diagram
The 3D blog roll application now truly feels like a 3D experience.  Not only is each blogger’s information hosted in 3D space, but each “tile” of information can rotate 180 degrees to reveal more details about a blogger.  After navigating to a blogger in the list and clicking on his/her picture, that blogger’s tile rotates and looks like this:

screenshot
Each ListBoxItem in the ListBox is assigned a custom ControlTemplate via the ItemContainerStyle property of ListBox.  That template creates a ContentControl3D, which hosts two UserControls, one on each side of the 3D surface (i.e. the “tile”).  The template declaration is listed below:

xaml1
You can download the source code here: WPF Disciples Blog Roll 3D (Source Code).  Note: Be sure to change the file extension from .DOC to .ZIP and then decompress it.


Introducing ContentControl3D

February 23, 2009

A couple years ago, Ian Griffiths blogged about a way to create flippable list items in WPF.  His approach involves using a VisualBrush to display the 2D content in 3D space, because he implemented it before Viewport2DVisual3D was introduced in .NET 3.5.  Also, his approach was not very easy to reuse in many applications because the functionality was not placed into a custom control.  Tonight, I decided to remedy this by making use of Viewport2DVisual3D in a reusable control.

The code associated with this post is a working prototype.  I intend on turning this into something more complete, but want to share it with the world as soon as possible, hoping to get some feedback and feature requests early on.

I created a control that derives ContentControl, called ContentControl3D.  It allows you to assign the BackContent property to specify what should be shown after you first flip the control over.  The Content property, inherited from ContentControl, specifies what to display on the front side of the surface.  You can also assign the BackContentTemplate property a DataTemplate, if BackContent is set to a data object (instead of a visual element).

Here is a screenshot of the demo application when it first loads up:

front
After clicking the “Flip Over” button, the UI performs an animated rotation, leaving you with a view of the back side of the surface.  This is shown below…

back
Naturally, you can put whatever content you want on the front and back sides.

Here is the XAML which configures the ContentControl3D in the demo window:

xaml
If you would like to check this control out, you can download the source code here: ContentControl3D Source Code.  NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress the file.

Your feedback is welcome.  Thanks!


Updated Panel3D code and demos now available

May 20, 2008

I fixed Panel3D so that its child elements can be transparent.  The updated source code and demo applications are now available for download from the CodeProject article:

http://www.codeproject.com/KB/WPF/panel3d.aspx


Panel3D now supports transparency

May 10, 2008

Not too long ago I created a WPF panel that lays out its child elements in 3D space, called Panel3D. When playing around with it, I never could figure out a way to make the 3D models in the panel support transparency, such that you could see models lower in the z-order “through” models higher in the z-order. The models higher in the z-order (i.e. those appearing closer to the viewer) were always opaque, thus covering up models behind them.

Someone left a comment on that article, asking how to create semi-transparent items in Panel3D. I didn’t know the answer, but luckily someone else did. It turns out that I was adding the 3D models to the Viewport3D’s Children collection in the wrong order. Panel3D was putting the front-most model at the beginning of the Children collection (technically, the scene’s light source is the very first child). The index of a model in the Children collection matched its visible index, meaning that the element furthest away from the viewer was the last child in the Viewport3D. This was completely wrong!

It turns out that transparency of 3D models in a Viewport3D is a little more tricky than working with transparency of 2D elements living in a 2D world. For transparency to work correctly in a Viewport3D, you must add the models into the Children collection in the opposite order than which we see them (relative to the scene’s camera). If you want to learn more about this issue, go to this blog post, which explains the issue quite well. Unfortunately, the utility method offered in that post does not work in Panel3D.

I modified Panel3D so that it arranges the models in the correct order. The updated source code is not yet available, since I want to give it some time to marinate in my head before I revise the CodeProject article. I did, however, update the WPF Disciples Blog Viewer 3D (with audio) application so that it takes advantage of this new feature.

Download the app here: WPF Disciples Blog Viewer 3D (with audio!)

NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress it.

Here is a “before” picture, of what the app used to look like (click to view full size image):

Here is the “after” picture, showing how the transparency looks:

I also added two new dependency properties to Panel3D.

AllowTransparency must be set to true if you want the models to be “truly” transparent. If you leave it to false, the old behavior is honored, where the items become more “dim” when their opacity is lowered. The new WPF Disciples Blog Viewer 3D app, seen above, sets this to true, which is why you can see through the items.

AutoAdjustOpacity can be set to false if you do not want Panel3D to automatically set the opacity of each element displayed in the scene. The new WPF Disciples Blog Viewer 3D app, seen above, sets this to false, which is why the items do not seem to fade away as they move into the distance.

I will release the new source code and update the CodeProject article soon…I promise! 😀


WPF Disciples 3D Blogroll…with Audio!

April 10, 2008

Last night my brother introduced me to SoundSnap.com, and I decided to add some audio clips to the WPF Disciples blogroll viewer app. This is just too much fun! 🙂

The app now has two tracks running in the background: the sound of the ocean and some nice calm music. When you move items in the Panel3D, it plays a subtle sound that makes it feel like something physical is happening. Also, when you open a blogger’s bio or blog, it plays a sound that represents a Web browser being opened. I spent a while picking out the right sounds, and adjusting the volume levels so that they are not tacky. Hopefully my tastes are good!

The one interesting part about how this works is the way that the sound plays when you move items in the panel. Here is the way I achieved that in XAML:

That snippet takes advantage of the fact that Panel3D has an IsItemsMoving dependency property that is set to true when you call MoveItems() and is set to false when the call completes later on. For this trick to work, the MediaElement’s DataContext must be set to the Panel3D instance so that it can bind to the panel correctly.

If my audio files were .WAV files, instead of .MP3, I could have used the SoundPlayerAction instead of this tricky approach.

Here is a video showing this app in action, in case you do not have Visual Studio 2008 or .NET Framework 3.5 installed:

Download the source code here: WPF Disciples 3D Blogroll Viewer with Audio (source code)

Download the executable here: WPF Disciples 3D Blogroll Viewer with Audio (binaries)

NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress the file. This is a workaround for a limitation imposed by WordPress.