Customized animating listbox WPF
Posted by codingsense on November 1, 2009
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
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 🙂