Манипуляции с эффектом наклона списка - PullRequest
Новая
       17

Манипуляции с эффектом наклона списка

1 голос
/ 19 января 2012

Я превратил список в панель переноса, потому что на панели переноса нет виртуализации. Что мне нужно от просмотра галереи изображений. код: 

                <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 (не смущайтесь, я не хочу создавать меню с использованием этого решения)

Любые другие предложения?

1 Ответ

1 голос
/ 19 января 2012

Я предполагаю, что вы используете код наклона из набора инструментов Silverlight? Я не заинтересован в этом, потому что он добавляет наклон к элементам по типу. Это означает, что вы не можете точно контролировать, когда применять эффект.

Я написал альтернативное поведение наклона здесь:

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