WPF一个完整的GIF制作工具实例（Part2：时间轴控件的实现）

最新推荐文章于 2022-02-24 14:54:13 发布

RunnerDNA

最新推荐文章于 2022-02-24 14:54:13 发布

阅读量695

点赞数

分类专栏： WPF应用实例文章标签： WPF GIF DrawingVisual GDI+

本文链接：https://blog.csdn.net/dnazhd/article/details/106421127

版权

本文介绍了一个WPF时间轴控件的实现，该控件用于创建和编辑GIF动画帧，支持动态添加和删除帧，设置帧延迟时间，并能与绘图控件同步。通过FrameBindData类管理帧数据，使用ListView控件并结合Converter实现交互逻辑。文章分为几个步骤详细阐述了实现过程，并提供了相关博文链接。

摘要由CSDN通过智能技术生成

该时间轴控件可实现动画帧的动态添加、删除，设置每个帧的延迟时间，还可与绘图控件同步更新绘制，效果如下：

实现步骤：

1、由于每个动画帧里的帧素材可以各不相同，所以添加帧的绑定数据类FrameBindData.cs，源码如下：

    public partial class FrameBindData : INotifyPropertyChanged
    {
        public FrameBindData()
        {
            this.frameCount = 500;//默认延时500
        }

        private bool isFrameMaterials;
        /// <summary>
        /// 是否是帧素材项
        /// </summary>
        public bool IsFrameMaterials
        {
            get
            {
                return isFrameMaterials;
            }
            set
            {
                if (isFrameMaterials != value)
                {
                    isFrameMaterials = value;
                    OnPropertyChanged("IsFrameMaterials");
                }
            }
        }

        private int frameCount;
        /// <summary>
        /// 帧Index
        /// </summary>
        public int FrameCount
        {
            get
            {
                return frameCount;
            }
            set
            {
                if (frameCount != value)
                {
                    frameCount = value;
                    OnPropertyChanged("FrameCount");
                }
            }
        }

        private List<BindItemClass> itemList;
        /// <summary>
        /// 帧素材
        /// </summary>
        public List<BindItemClass> ItemList
        {
            get
            {
                if (itemList == null)
                {
                    itemList = new List<BindItemClass>();
                }
                return itemList;
            }
            set
            {
                if (itemList != value)
                {
                    itemList = value;
                }
            }
        }

        private BitmapImage thumpImage;
        /// <summary>
        /// 缩略图
        /// </summary>
        public BitmapImage ThumpImage
        {
            get
            {
                return thumpImage;
            }
            set
            {
                if (thumpImage != value)
                {
                    thumpImage = value;
                    OnPropertyChanged("ThumpImage");
                }
            }
        }

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

2、另外我们再添加一个GIF类用于添加背景图片和后台数据绑定

    public partial class GIFClass
    {
        /// <summary>
        /// 底图
        /// </summary>
        public BindItemClass BackgroundItem { get; set; }

        private ObservableCollection<FrameBindData> frameList;
        /// <summary>
        /// 帧列表
        /// </summary>
        public ObservableCollection<FrameBindData> FrameList
        {
            get
            {
                if (frameList == null)
                {
                    frameList = new ObservableCollection<FrameBindData>();
                    var tempShow = new FrameBindData();
                    tempShow.ThumpImage = ImageHelper.LoadBitmapImageByPath(AppDomain.CurrentDomain.BaseDirectory + "Images\\addpic.png");
                    tempShow.IsFrameMaterials = false;
                    frameList.Add(tempShow);
                }
                return frameList;
            }
            set
            {
                if (frameList != value)
                {
                    frameList = value;
                }
            }
        }
    }

3、时间轴控件使用ListView控件来实现，样式如下：

        <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="AllowDrop" Value="False"/>
            <Setter Property="Cursor" Value ="Hand"/>
            <Setter Property="Margin" Value="0,10,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border Name="frameBorder" BorderBrush="Gray" BorderThickness="1" CornerRadius="2" Width="90" Height="50">
                            <Border.Background>
                                <ImageBrush ImageSource="{Binding ThumpImage}" Stretch="Fill"></ImageBrush>
                            </Border.Background>
                            <Border Name="countBorder" Width="26" Height="15" Background="Black" Opacity="0.5" CornerRadius="2" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="{Binding IsFrameMaterials, Converter={StaticResource FrameCountConverter}}">
                                <TextBlock Name="tbCount" Text="{Binding FrameCount}" FontSize="10px" Foreground="#FFFFFF" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="frameBorder" Property="BorderBrush" Value="Blue"></Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="frameBorder" Property="BorderBrush" Value="Orange"></Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="frameBorder"