Customized animating listbox WPF

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 .

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

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