wp7/Silverlight] 如何在 SelectionChanged 上为 ListBoxItem 设置动画? [英] wp7 / Silverlight] How to animate a ListBoxItem on SelectionChanged?

问题描述

我正在开发一个应用程序(VisualStudio 2010 Express for Windows Phone).我有一个带有图像的列表框和一个带有动画(投影)的故事板，当 SelectionChanged 事件被触发时(不是立即而是在事件处理程序中)，我想将其应用于特定的列表框项/图像.

I'm developing an app (VisualStudio 2010 Express for Windows Phone). I have a listbox with images and a storyboard with an animation (a projection) that I want to apply to a specific listboxitem/image when the SelectionChanged event gets fired (well not immediatly but inside the event handler).

如何将我的动画链接"到这个特定的 ListBoxItem?

How can I "link" my animation to this specific ListBoxItem?

推荐答案

好吧，经过尝试和错误后，我想出了一个解决方案，但这并不是我想要的(在数据模板之外定义的故事板，可能还有更少的代码.我认为只是翻转图像太多了)，但非常接近.

well, after try and error i came up with a solution, but it's not exactly what i wanted (the storyboard defined outside the datatemplate and maybe less code. I think it's too much for just flipping an image), but very close.

所以，示例列表框:

<ListBox x:Name="lbxCardTable" SelectionChanged="lbxCardTable_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid x:Name="imgContainer">
                        <Image x:Name="img" Source="{Binding } />
                        <Grid.Resources>
                            <Storyboard x:Name="itemSb">
                                <DoubleAnimationUsingKeyFrames  
                                  Storyboard.TargetName="imgContainer"
                                  Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>
                        <Grid.Projection>
                            <PlaneProjection/>
                        </Grid.Projection>
                    </Grid>


                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

以及背后的代码:

    private void lbxCardTable_SelectionChanged(object sender, SelectionChangedEventArgs e) {
object selectedItem = lbxCardTable.SelectedItem;

            ListBoxItem lbitem = (ListBoxItem)lbxCardTable.ItemContainerGenerator.ContainerFromItem(selectedItem);


            var border =(Border) VisualTreeHelper.GetChild(lbitem, 0);

            var mcontentcontrol =(ContentControl) VisualTreeHelper.GetChild(border, 0);

            var contentpresenter =(ContentPresenter) VisualTreeHelper.GetChild(mcontentcontrol, 0);

            var mgrid=(Grid)VisualTreeHelper.GetChild(contentpresenter,0);



            Storyboard sb = mgrid.Resources["itemSb"] as Storyboard;
            if (sb.GetCurrentState() != ClockState.Stopped) {
                sb.Stop();
            }


            sb.Begin();
    }

这篇关于wp7/Silverlight] 如何在 SelectionChanged 上为 ListBoxItem 设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！