Naveen's Weblog

Bridge to future

Posts Tagged ‘3D’

Customized animating listbox WPF

Posted by codingsense on November 1, 2009

Hi All,
I had seen some of the 3rd party controls and was wondering what these people do in attaining good graphics in those controls. After carefully studying i got some tricks from which you can acheive the same styles.

Just have a look at this one, by just modifying some property i make the listbox to display items like a rack of books in a shelf .

Items of list box like Books in a Rack

And when you hover the mouse over it, the book will open and show you the details. Isnt it great

Books opens up when mouse hovers on it

Download source code – 210 Kb

Steps taken to acheive the above effects,

  • Databind a listbox using the xml file given in the project
  • Right click on the listbox and navigate to Edit other template -> Edit layout of items -> Edit a copy -> Enter any name you want to define -> click ok
  • In object and timeline in interaction window ( if not found click window menu -> interaction) click virtualizationStackPanel -> In properties( if not found click window menu -> properties) make orientation to horizontal from vertical
  • Click the return button in objects and timeline to return to the main page.
  • Select the listBox right click it and navigate to Edit Other Templates -> Edit generatated items -> Edit a copy
  • In the opened screen go to objects and timeline window (interaction window)
  • Select the stack panel and go to its properties, change the background that you want to apply to each item in the list box
  • Go to Transform group in properties and in RenderTransform
  • Select the rotate tab. Give an angle of -50
  • Select the skew tab and enter X value as -50, you will see the transform in each listbox item
  • Now just we need to remove the space between the items and its pretty much easier just give ve value in right margin. Eg: Give -30 in the right margin. This will bring all the items closer.

Now only we have to implement is Animation.First we shall create a story board

  • Click + on in the object and timeline to create a new story board, enter OnMouseIn and click ok
  • Select the stack panel
  • In timeline set the current time to 0.5 sec and Record a keyframe to indicate the initial state of our item.
  • Next we will tell the timeline what should happen after 0.5 sec. Move the timeline pointer to 1 Sec
  • And open the properties of stack panel and set the following values, -10 to right margin, 0 to angle and 0 to x in skew.
  • Run the timeline and see what happens and do any modification if it can enhance the animation.
  • Stop the timeline recording.

Next we need to define another storyboard that will move the list item back to the original position

  • So click Add new story board, Give it a name OnMouseOut and click ok
  • Take the current timeline to 1sec and insert a keyframe to indicate the final position of our animation.
  • Move the current pointer to 0.5 sec and set the properties, -30 as right margin, -50 as angle and -50 as x in skew.
  • Now since our animation is ready we just need to bind an event to invoke the story board, for that follow the setps.
  • In triggers click the +Event and select the target element Ismouseover event and set the value true.
  • In actions when activating select OnMouseIn begin
  • In actions when deactivating select on MouseOut begin
  • Run the application

Happy Learning 🙂
Naveen Prabhu

 

Posted in WPF | Tagged: , , | 2 Comments »

N-Tier basic 3D WPF Application

Posted by codingsense on October 20, 2009


Hi All,

WPF (Windows Presentation Foundation) has given us a hand to move in 3D world. Great graphics and GUI can be attained using WPF. I have worked on several graphical projects in WPF, but was wondering whether the performance and ease will remain the same when building a big application, so was working on the same and until now i have found it very easy in deploying any kind of application. So i planned to expose my application to all of you so that you can use it any way, here is the project. This is just a basic sample and I am sure you will find more ways after exploring this application.

Contact Management

Version : 1.0.0.0
Date : 20/Oct/2009

Download Source Code and database – 344 Kb
Download Application and database – 341 Kb

Prerequisites:

  • .Net Framework 3 or above.
  • SQL server 2005 or above
  • better the system configuration better the graphics
  • To view source files you will need VS 2008 SP1 and for better understanding design, 3D and animations you will need Expression blend 2 or higher

In the Contact Management i have tried to explore many concepts in which we can acheive good graphical interfaces and flexible data binding.

Let me show you some of the snapshots of the application.

Login Screen

Login Screen with Pattern using Drawing brushes

Login Screen with Pattern using Drawing brushes

Main screen

Customized listbox to show data in horizontal view with good looking mouse hover to move scroll bar and 3D rotation.

Customized listbox to show data in horizontal view with good looking mouse hover to move scroll bar and 3D rotation.

Add New contact

Add new contact to your list

Add new contact to your list

Transparent About Screen with animating text

Transparent about screen with animating text

Transparent about screen with animating text

Here are some of the key features explored. In coming posts we will explore each one of the features and do’s and dont’s of them.

  1. Customizing a control
  2. Data binding from various datasources
  3. Animating a control with Event Trigger and Propery Trigger
  4. Creating 3D graphichs and brief on Viewport 3D
  5. Creating resources and using them in whole application
  6. Creating Themes or Skins and change whole interface depending on the selection
  7. IValueConverter – bringing data from many child table depending on the parent data selection.
  8. Path – change shapes of any control or window
  9. Transoform propery

If you find any of the above topics very interesting or want to know about it, then please post a comment with specific topic name. I will make sure you get it.

I have also plans to take this project further.You can expect the future versions of Contact Management to have the following

  1. Email a friend
  2. Capture image of a friend and display it in very unique way
  3. Exploring on customizing a control and much better 3D ways to display it
  4. Creating, Changing and moving 3D objects in runtime

If you are finding any other problem in WPF or in Expression Blend or even if you find anything needs to improve in the application then you can always feel free to post a comment.

Happy Learning 🙂
Naveen Prabhu

Posted in WPF | Tagged: , | Leave a Comment »