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

使用FluidMoveBehavior来动态显示ListView元素位置的更改，这里实现的是图片横向动态滚动消失，效果如下：

实现步骤：

1、首先添加对Microsoft.Expression.Interactions.dll和system.windows.interactivity.dll的引用；

2、实现平滑滚动效果主要是在控件模板中加入以下代码：

<ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <VirtualizingStackPanel Orientation="Horizontal">

                        <i:Interaction.Behaviors>

                            <ei:FluidMoveBehavior AppliesTo="Children"/>

                        </i:Interaction.Behaviors>

                    </VirtualizingStackPanel>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

窗体xaml：

<Window x:Class="DynamicExit.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"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
    <Window.Resources>
        <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="AllowDrop" Value="False"/>
            <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.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                  ScrollViewer.CanContentScroll="True">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal">
                        <!-- 此段实现平滑的效果-->
                        <i:Interaction.Behaviors>
                            <ei:FluidMoveBehavior AppliesTo="Children"/>
                        </i:Interaction.Behaviors>
                    </VirtualizingStackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListView.Template>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <ScrollViewer>
                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </ListView.Template>
        </ListView>
    </Grid>
</Window>
           

3、交互逻辑

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

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

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

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

4、图片资源绑定类ListBindData.cs

public class ListBindData : INotifyPropertyChanged
    {
        public ListBindData(string path)
        {
            itemPath = path;
        }

        private string itemPath;

        public string ItemPath
        {
            get
            {
                return itemPath;
            }
            set
            {
                if (itemPath != value)
                {
                    itemPath = value;
                    OnPropertyChanged("ItemPath");
                }
            }
        }

        private void OnPropertyChanged(string info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
           

注：最后共享一下Microsoft.Expression.Interactions.dll和system.windows.interactivity.dll，链接：https://pan.baidu.com/s/1VyGtZjYwlciNJgt4Oq6lyg    提取码：ml6v 

相关博客：

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

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