WPF fluid layout and a listbox

Question

Hi All,

Im looking into how to make an effect on my WPF 4.0 application where I have a listbox that can switch from list view (i.e. a vertical stack of my own items) to a grid view (tiled list from left to right) via an animation (not a jump to and from).

I have been looking into Fluid Layout in Blend 4, and messing around with it, but not having much luck.

Does anyone have any ideas as to how I might create a visual state, which changes the layout of the listbox to a grid (also changing the items template to be smaller thumbnails versions) with a nice animation?

I know it sounds like a lot, but it would be a great effect in my app!

Thanks a lot for any help you can give, Ill post back if I find anything as well :)

Mark

Answer 1

Create the two visual states you want and use something like Width=0 to "hide" the ListBox or Grid that you don't want to show in the given state. Then just add a Transition to your States, that should give it a fairly fluid animation. You may need to play around with other sizing and location options as well. Perspectives would be a good possibility in this case.

Answer 2

I've uploaded a simple version, which you can download here: link text

This shows the two custom states with a transition. Here is an outline of what I did:

1. Create the two ListBox controls and bind them to the same data source. You can create whatever Data Templates you need for each one, my sample is just a list of images.

2. To make this a grid view effect, I overrode the ItemsPanel of the GridList with a custom template. All I did was replace the StackPanel with UniformGrid.

3. Go to the States panel and create a new custom state group. Inside it, create the two custom states:

   A. VerticalState - this state sets the width of the Grid panel to 0 and the width of the Vertical list to 175.

   B. GridState - this state reverses that and sets the width of the Grid panel to 300 and the List to 0.

4. To provide the animation effect, set a default Transition time. I used 2 seconds just so you can really see it happening.

5. To fire the states, I just used a ToggleButton and the GoToState behavior. When the button is checked, I go to the GridState, and when unchecked I go to the VerticalState.

6. Once I had the transition between states working, I set the default width of the GridPanel to 0 (I had to reset the width of it in the GridState after I did that)

This is a simple example, so as always, YMMV. You will need to play with the sizes and other properties to get the final effect. And of course, you can add easings to your transitions.

Unfortunately, reviewing a completed Solution doesn't really show you how to do this in Blend. Check out Blend-O-Rama coming up in a couple of weeks, I'll try to show something similar. For now, this will hopefully get you further along.