[UWP]在列表视图可见性开启/关闭时实施动画 [英] [UWP] Implement animation in list view visibility on/off

问题描述

我们正在实施一个UWP应用程序，我们有一个滚动查看器。在那里，我们有stackpanels列表。每个堆栈面板为：一个图像+ ListView。 

We are implementing a UWP app where we have a scroller viewer. In that, we have list of stackpanels. Each stack panel is : One image + ListView. 

行为：单击图像将折叠/隐藏堆栈面板中的相应列表视图。 Scrollerviewer是垂直的。 

Behaviour: Clicking on image will collapse/hide the corresponding listview in the stack panel. Scrollerviewer is vertical. 

现在，我们需要在列表隐藏和可见时添加动画。来自xD的请求应该是这样的：https：//www.dropbox.com/s/tyi2az1rjp8wngl/dropdown_gif.mov？dl = 0

Now, we need to add animation when list is hidden and visible. got request from xD should be like this: https://www.dropbox.com/s/tyi2az1rjp8wngl/dropdown_gif.mov?dl=0

我们可以得到关于我们如何获得的信息可以在我们上面描述的场景中添加这个动画吗？

Can we get inputs on how we can add this animation in the scenario we described above?

谢谢。

推荐答案

Adob​​e Systems Incorporated

你可以使用

DoubleAnimationUsingKeyFrames 动画
CompositeTransform 。

You could use a DoubleAnimationUsingKeyFrames to animate a CompositeTransform for the listview.

我使用以下代码制作了类似的动画：

 

    <Page.Resources>
        <Storyboard x:Name="Close">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="MyListView">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="MyListView">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-150"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="Open">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="MyListView">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="MyListView">
                <EasingDoubleKeyFrame KeyTime="0" Value="-150"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Name="MyGrid"  >
            <Image x:Name="tap" Source="Assets/test.png" Width="200" Height="200" Tapped="Image_Tapped"/>
            <ListView Background="Yellow" Name="MyListView" HorizontalAlignment="Center" Width="200" Height="300" RenderTransformOrigin="0.5,0.5" >
                <ListView.RenderTransform>
                    <CompositeTransform/>
                </ListView.RenderTransform>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
    </Grid>

代码背后：

        private bool isexpand;
        private void Image_Tapped(object sender, TappedRoutedEventArgs e)
        {

            if (isexpand)
            {
                Close.Begin();
            }
            else
            {
                Open.Begin();
            }
            
            isexpand = !isexpand;

        }

最好的问候，

Roy

这篇关于[UWP]在列表视图可见性开启/关闭时实施动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！