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（不要混淆我不想用这个解决方案创建一个颠覆性的菜单）

还有其他建议吗？

Answer 1

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

我在这里写了另一种倾斜行为：

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>

列表框倾斜效果操作

1 个答案: