列表框倾斜效果操作

Question

我将一个列表框做成了一个换行面板，因为换行面板没有虚拟化功能。 我需要图片库查看器。 代码：

                <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>

问题在于，当我点击图像时，它会倾斜整个列表框项目，即所有 4 个项目。

我已经尝试过这里的建议：http://forums.create.msdn.com/forums/t/73716.aspx（不要混淆我不想用这个解决方案创建一个 hubtile 菜单）

还有其他建议吗？

Answer 1

我猜您正在使用 Silverlight 工具包中的倾斜代码？我对此并不热衷，因为它会按类型增加元素的倾斜度。这意味着您无法很好地控制何时应用效果。

我在这里写了一个替代的倾斜行为：

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

您可以将倾斜应用于单个 UI 元素，如下所示：

local:MetroInMotion.Tilt="6"

在您的情况下，只需适用于 4 个网格中的每一个：

            <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>