Управление эффектом наклона окна списка

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> 

Проблема заключается в том, что, когда я нажимаю на изображении она наклоняет весь элемент ListBox, то есть все 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/

Вы можете применить наклон к отдельным элементам пользовательского интерфейса, как так:

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>