WPF实现图片动态滚动消失效果（方式二：使用Storyboard）

这里我们使用Storyboard来动态显示ListView元素位置的更改，效果如下（与采用FluidMoveBehavior方式实现的区别是前面几个图片的加载效果，后面的滚动消失效果基本一致）：

实现步骤：

1、图片资源绑定类ListBindData.cs与方式一中的相同，不再赘述。

2、图片滚动效果是采用Storyboard改变ListViewItem的RenderTransform属性来实现的。

窗体xaml：

<Window x:Class="SmoothScroll.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" 
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
    <Window.Resources>
        <!--ListView样式-->
        <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="AllowDrop" Value="False"/>
            <!--滚动效果实现使用属性-->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="0" Y="0"></TranslateTransform>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Grid Margin="10,0,0,0">
                            <Border Background="White" BorderBrush="#DDDDDD" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Image Source="{Binding ItemPath}" Width="320" Height="160" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ListView x:Name="listPic" ItemContainerStyle="{DynamicResource ListViewItemStyle}"
                  VerticalAlignment="Center" SelectionMode="Single" ScrollViewer.CanContentScroll="True"                  
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListView.Template>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <ScrollViewer>
                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </ListView.Template>
        </ListView>
    </Grid>
</Window>           

后台交互逻辑：

/// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<ListBindData> bindItems = null;//绑定的资源元素集合
        private Timer UpdateScrollTimer = null;//消失状态计时器
        private Storyboard storyboard = new Storyboard();

        public MainWindow()
        {
            InitializeComponent();
            bindItems = new ObservableCollection<ListBindData>();
        }

        /// <summary>
        /// 窗体加载
        /// </summary>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.listPic.ItemsSource = bindItems;//数据绑定
            this.bindItems.CollectionChanged += ListData_CollectionChanged;
            UpdateScrollTimer = new Timer(UpdateScrollTimerCallBack, null, 1000, Timeout.Infinite);
        }

        /// <summary>
        /// 数据集改变时加入动画
        /// </summary>
        private void ListData_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            try
            {
                if (e.Action == NotifyCollectionChangedAction.Add)
                {
                    this.listPic.UpdateLayout();
                    var listItem = this.listPic.ItemContainerGenerator.ContainerFromIndex(0) as ListViewItem;
                    var animation = new DoubleAnimation() { Duration = TimeSpan.FromMilliseconds(500), From = listItem.ActualWidth };
                    Storyboard.SetTarget(animation, listItem);
                    Storyboard.SetTargetProperty(animation, new PropertyPath("RenderTransform.X"));
                    storyboard.Children.Add(animation);
                    storyboard.Begin();
                }
                else if (e.Action == NotifyCollectionChangedAction.Remove)
                {
                    storyboard.Children.RemoveAt(0);
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message + "\n" + ex.StackTrace);
            }
        }

        /// <summary>
        /// 定时器回调
        /// </summary>
        private void UpdateScrollTimerCallBack(object sender)
        {
            this.Dispatcher.Invoke(() =>
            {
                if (bindItems.Count > 2)
                    bindItems.Remove(bindItems[2]);
                bindItems.Insert(0, new ListBindData(AppDomain.CurrentDomain.BaseDirectory + @"example.jpg"));
            });
            if (UpdateScrollTimer != null)
                UpdateScrollTimer.Change(1000, Timeout.Infinite);
        }
    }           

相关博客：

WPF实现图片动态滚动消失效果（方式一：使用FluidMoveBehavior）

WPF实现图片动态滚动消失效果（方式二：使用Storyboard）