列表框傾斜效果操作

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