List box tilt effect manipulation

Question

I've made a listbox into a wrap panel, because the wrap panel doesn't have virtualization. What I need from an image gallery viewer. the code:

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Children>
                                <Grid Margin="5">
                                    <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[0].backgroundVisibility, FallbackValue=Collapsed}" />
                                    <Image Name="image1" Width="90" Height="90" Source="{Binding listboxItemContainer[0].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                                </Grid>
                                <Grid Margin="5">
                                    <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[1].backgroundVisibility, FallbackValue=Collapsed}"/>
                                    <Image Name="image2" Width="90" Height="90" Source="{Binding listboxItemContainer[1].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                                </Grid>
                                <Grid Margin="5">
                                    <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[2].backgroundVisibility, FallbackValue=Collapsed}"/>
                                    <Image Name="image3" Width="90" Height="90" Source="{Binding listboxItemContainer[2].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                                </Grid>
                                <Grid Margin="5">
                                    <Rectangle Fill="{StaticResource PhoneSubtleBrush}"  Visibility="{Binding listboxItemContainer[3].backgroundVisibility, FallbackValue=Collapsed}"/>
                                    <Image Name="image4"  Width="90" Height="90" Source="{Binding listboxItemContainer[3].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                                </Grid>
                            </StackPanel.Children>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>

The problem is that when I tap on an image it tilts the whole listbox item, meaning all 4 items.

I have tried the suggestion from here: http://forums.create.msdn.com/forums/t/73716.aspx (don't get confused I don't want to create a hubtile menu with this solution)

Any other suggestions?

Answer 1

I am guessing you are using the tilt code from the Silverlight Toolkit? I ma not keen on this because it adds tilt to elements by type. This means you do not have much fine control over when to apply the effect.

I wrote an alternative tilt behaviour here:

http://www.scottlogic.co.uk/blog/colin/2011/05/metro-in-motion-part-4-tilt-effect/

You can apply tilt to individual UI elements like so:

local:MetroInMotion.Tilt="6"

In your case just apply to each of the 4 grids:

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <StackPanel.Children>
                            <Grid Margin="5" local:MetroInMotion.Tilt="6">
                                <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[0].backgroundVisibility, FallbackValue=Collapsed}" />
                                <Image Name="image1" Width="90" Height="90" Source="{Binding listboxItemContainer[0].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                            </Grid>
                            <Grid Margin="5" local:MetroInMotion.Tilt="6">
                                <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[1].backgroundVisibility, FallbackValue=Collapsed}"/>
                                <Image Name="image2" Width="90" Height="90" Source="{Binding listboxItemContainer[1].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                            </Grid>
                            <Grid Margin="5" local:MetroInMotion.Tilt="6">
                                <Rectangle Fill="{StaticResource PhoneSubtleBrush}" Visibility="{Binding listboxItemContainer[2].backgroundVisibility, FallbackValue=Collapsed}"/>
                                <Image Name="image3" Width="90" Height="90" Source="{Binding listboxItemContainer[2].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                            </Grid>
                            <Grid Margin="5" local:MetroInMotion.Tilt="6">
                                <Rectangle Fill="{StaticResource PhoneSubtleBrush}"  Visibility="{Binding listboxItemContainer[3].backgroundVisibility, FallbackValue=Collapsed}"/>
                                <Image Name="image4"  Width="90" Height="90" Source="{Binding listboxItemContainer[3].ThumbnailPath}" DataContext="{Binding}" Tap="image_Tap" Stretch="Fill"/>
                            </Grid>
                        </StackPanel.Children>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>