WPF ListItem Zoom on Event

Question

Let's say I haven a Listbox, or as I do right now a Wrap panel with items bound to it. The items use a custom data template utilizing a custom control if that matters.

Now I want to react to a click (or any event in general) and zoom an item towards the user, overlapping surrounding items. Basically a more detailed view of a particular item the user chooses. the item would zoom towards the user, revealing more content and options to interact with it.

Pretty much exactly like here: http://ie.microsoft.com/testdrive/Performance/AmazonShelf/Default.html

The problem is simply that all the other items will make room for the selected one as it grows. I don't want this.

I just can't figure out how to get it to overlap surrounding items. What item container should I use (keep in mind I kinda want/need the wrapbehaviour)

Any tips would be appreciated. Using WPF 4 if there's anything new there?

Thank you.

UPDATE: I'm trying to go with Josh's suggestion here. Josh, that sounds exactly like what I need. However whatever I do I can't seem to get a RenderTransform to happen. I'm pulling my hair out here.

Why does this not work? The fade in animation works fine. The two commented Animations on the click event also work fine. But the render Transform doesnt do anything.

I've tried: "(Grid.RenderTransform).(RotateTransform.Angle)" "RenderTransform.(RotateTransform.Angle)" "(RenderTransform).(RotateTransform.Angle)" "(FrameworkElement).(RotateTransform.Angle)" "(Item).(RotateTransform.Angle)"

How do you guys debug these sorts of things? There is no Intellisense and it's really more or less a guessing game for me so far.

 <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <my:custom x:Name="Item" Margin="10,10 10,10" />
                                </Grid>

                                <DataTemplate.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="Item">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:2"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="FrameworkElement.MouseUp" SourceName="Item">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <!--<DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Width" To="200" Duration="0:0:2" />-->
                                                <!--<DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Height" To="400" Duration="0:0:2" />-->
                                                        <DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" From="0" To="180" Duration="0:0:2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </DataTemplate.Triggers>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>

Answer 1

Wrappanel will makes rooms according to the size. You should you Canvas for this kind of Zoom behaviors. Since you want the Wrappanel as well, you can add a Canvas on top of the Wrappanel. When you click on a item just add that clicked item to Canvas children & Set the proper size, Canvas.Top & Canvas.Left, remove the same on some event.

Answer 2

Ahh man I started writing a blog post about a similar technique I used to customize a ListBox (see this page for an example of a standard Silverlight ListBox that emulates the iPhone details view.) Unfortunately I never finished the post.

Anyhow, what you need to do is apply a render transform to the item that you can animate. Then at the end of the animation, you can flip another element to the foreground that contains your details view. The render transform, unlike a layout transform, will not affect the layout of the other items.