I've been doing some hardcore WPF coding on the side the last few weeks. This has primarily been an exposition in being able to learn more details while putting together a non-trivial application the includes many features that I see used in many WPF applications including:
- Advanced navigation models
- Various types of animation
- Dynamic rendering
- UI Elements such as carousels, network visualization, animated search
I had a number of "widgets" that I had tinkered with over the last few months, as well as I have done some significant research into available 3rd party controls for WPF, and slapped these together into an application that can show off some of the capabilities.
My first requirement was to provide the GUI with a striking display that makes the application visually "pop", instead of just looking like a regular old GUI. Conceptually, I think of this in context of using an iPhone and how everything is visually stimulating yet at the same time very easy to navigate, but all at the same time being within a common, single, workspace (basically, one window, no dialogs, minimal popups).
After much thought this came around to my wanting the application GUI to have a single and almost unobtrusive menu, and without drop downs, as I don't like them and I think there should be a better way. This menu could be used to select main categories of functionality in an application, and then there should be a different model of showing the the subtasks involved with that menu.
I've also become enthralled with the concept of the "Carousel", something that appears to be new to WPF apps and I think a great new concept for displaying information. Up to now, these carousels have been used to do things like show multiple images, but I think they also will have great value in providing navigation within an application. This I have modeled in this demo app and I will exhibit over a few posts yet upcoming.
While looking around for some things that excited me, I came across the 3dCarousel in the Contoso app. Unfortunately for the life of me I can't find that link to show it, so if know of it let me know and I'll add it. The important thing with this though was that it should what I thought was a fairly nice UI model, with a small menu, tabs to select sub-tasks, and a nice hierarchical carousel (another topic all together).
So I investigated that apps source, and build out a framework on it. I'll be frank here in saying that I didn't like the code much as I thought it had very bad seperation of concerns (every here of a user control?). And the colors were pretty Miami-Vice in nature. So, I built some reusable controls out of it for the UI and make the colors a little more brooding (and retooled it to show my info, not theres).
Here's a quick look:
The things inherent in this display are:
- A nice background giving the app some "pop"
- A small menu that isn't taking up space
- Tabs that allow you to navigate functionality in the selected part of the app
- A slider to change the zoom on the display
- An unobtrusive search box
- An interesting component of application functionality in the window
I want to try and keep these posts to a reasonable size, so I'll stop here for now. In future posts I will elaborate on:
- Just what the heck is that spider web?
- How the background is constructed
- How the tab control is built and operates
- Ditto for the menu
- The carousel I built (not shown yet)
- Animation between parts of the application
- Carousel animation
- Menu -> Tab -> Carousel navigation within an app
- Data binding, and other things too numerous to list right here
Back with more shortly...