Naveen's Weblog

Bridge to future

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



2 Responses to “Customized animating listbox WPF”

  1. rr said

    Can I get a copy of the source code for this app?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: