c# WPF中自定义加载时实现带动画效果的Form和FormItem

2023-07-04 17:07:15 220

背景

今天我们来谈一下我们自定义的一组WPF控件Form和FormItem,然后看一下如何自定义一组完整地组合WPF控件，在我们很多界面显示的时候我们需要同时显示文本、图片并且我们需要将这些按照特定的顺序整齐的排列在一起，这样的操作当然通过定义Grid和StackPanel然后组合在一起当然也是可以的，我们的这一组控件就是将这个过程组合到一个Form和FormItem中间去，从而达到这样的效果，我们首先来看看这组控件实现的效果。

一动画效果

看了这个效果之后我们来看看怎么来使用Form和FormItem控件，后面再进一步分析这两个控件的一些细节信息。

这个里面xui命名控件是我们的自定义控件库的命名空间，这个里面的TableControl也是一种特殊的自定义的TableControl，关于这个TableControl我们后面也会进一步分析。

二自定义控件实现

按照上面的顺序我们先来分析Form控件，然后再分析FormItem控件的实现细节

2.1Form

通过上面的代码我们发现Form是可以承载FormItem的，所以它是一个可以承载子控件的容器控件，这里Form是集成ItemsControl的，我们来看看具体的代码

publicclassForm:ItemsControl
    {
        staticForm()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Form),newFrameworkPropertyMetadata(typeof(Form)));
        }
 
        publicdoubleHeaderWidth
        {
            get{return(double)GetValue(HeaderWidthProperty);}
            set{SetValue(HeaderWidthProperty,value);}
        }
 
        //UsingaDependencyPropertyasthebackingstoreforHeaderWidth. Thisenablesanimation,styling,binding,etc...
        publicstaticreadonlyDependencyPropertyHeaderWidthProperty=
            DependencyProperty.Register("HeaderWidth",typeof(double),typeof(Form),newPropertyMetadata(70D));
 
        publicintRows
        {
            get{return(int)GetValue(RowsProperty);}
            set{SetValue(RowsProperty,value);}
        }
 
        //UsingaDependencyPropertyasthebackingstoreforRows. Thisenablesanimation,styling,binding,etc...
        publicstaticreadonlyDependencyPropertyRowsProperty=
            DependencyProperty.Register("Rows",typeof(int),typeof(Form),newPropertyMetadata(0));
 
        publicintColumns
        {
            get{return(int)GetValue(ColumnsProperty);}
            set{SetValue(ColumnsProperty,value);}
        }
 
        //UsingaDependencyPropertyasthebackingstoreforColumns. Thisenablesanimation,styling,binding,etc...
        publicstaticreadonlyDependencyPropertyColumnsProperty=
            DependencyProperty.Register("Columns",typeof(int),typeof(Form),newPropertyMetadata(1));
 
    }

然后我们再来看看Form的样式文件

这里我们使用UniformGrid作为内容承载容器，所以我们现在清楚了为什么需要定义Columns和Rows这两个依赖项属性了，这个UniformGrid是嵌套在ScrollerViewer中的，所以如果其子控件超出了一定范围，其子控件外面是会显示滚动条的。

2.2FormItem

FormItem是从ListBoxItem继承而来，而ListBoxItem又是从ContentControl继承而来的，所以可以添加到任何具有Content属性的控件中去，常见的ListBoxItem可以放到ListBox中，也可以放到ItemsControl中去，ListBoxItem可以横向和TreeViewItem进行比较，只不过TreeViewItem是直接从HeaderedItemsControl继承过来的，然后再继承自ItemsControl。两者有很多的共同之处，可以做更多的横向比较，我们今天只是来讲ListBoxItem，首先看看我们使用的样式，这里贴出前端代码：

这里我们重写了ListBoxItem的ControlTemplate，我们需要注意的一个地方就是我们使用了

来替代ListBoxItem的Content，我们需要始终记住，只有控件拥有Content属性才能使用ContentPresenter，这个属性是用来呈现控件的Content。

另外一个需要重点介绍的就是FormItem这个类中的代码，这个控件在加载的时候所有的效果都是在后台中进行加载的，首先贴出相关的类的实现，然后再做进一步的分析。

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
 
namespaceX.UI
{
    publicclassFormItem:ListBoxItem
    {
        staticFormItem()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(FormItem),newFrameworkPropertyMetadata(typeof(FormItem)));          
        }
 
        publicFormItem()
        {
            System.Windows.Media.TranslateTransformtransform=EnsureRenderTransform(this);
            transform.X=transform.Y=100;
            Opacity=0;
 
            IsVisibleChanged+=FormItem_IsVisibleChanged;
        }
 
        voidFormItem_IsVisibleChanged(objectsender,DependencyPropertyChangedEventArgse)
        {
            if(this.ParentisForm)
            {
                if(!IsVisible)
                {
                    intindex=(this.ParentasForm).Items.IndexOf(this);
                    System.Windows.Media.TranslateTransformtransform=EnsureRenderTransform(this);
                    DoubleAnimationda=newDoubleAnimation()
                    {
                        From=0,
                        To=100,
                        EasingFunction=newCircleEase{EasingMode=EasingMode.EaseOut}
                    };
                    transform.BeginAnimation(System.Windows.Media.TranslateTransform.XProperty,da);
                    transform.BeginAnimation(System.Windows.Media.TranslateTransform.YProperty,da);
                    DoubleAnimationdaopacity=newDoubleAnimation
                    {
                        From=1,
                        To=0,
                    };
                    this.BeginAnimation(UIElement.OpacityProperty,daopacity);
                }
                else
                {
                    intindex=(this.ParentasForm).Items.IndexOf(this);
                    System.Windows.Media.TranslateTransformtransform=EnsureRenderTransform(this);
                    DoubleAnimationda=newDoubleAnimation()
                    {
                        From=100,
                        To=0,
                        BeginTime=TimeSpan.FromMilliseconds(100*(index+1)),
                        Duration=TimeSpan.FromMilliseconds(666),
                        EasingFunction=newCircleEase{EasingMode=EasingMode.EaseOut}
                    };
                    transform.BeginAnimation(System.Windows.Media.TranslateTransform.XProperty,da);
                    transform.BeginAnimation(System.Windows.Media.TranslateTransform.YProperty,da);
                    DoubleAnimationdaopacity=newDoubleAnimation
                    {
                        From=0,
                        To=1,
                        BeginTime=TimeSpan.FromMilliseconds(100*(index+1)),
                        Duration=TimeSpan.FromMilliseconds(666),
                        EasingFunction=newCircleEase{EasingMode=EasingMode.EaseOut}
                    };
                    this.BeginAnimation(UIElement.OpacityProperty,daopacity);
                }
            }
        }
 
        privateTEnsureRenderTransform(UIElementuiTarget)
            whereT:Transform
        {
            if(uiTarget.RenderTransformisT)
                returnuiTarget.RenderTransformasT;
            else
            {
                Tinstance=typeof(T).Assembly.CreateInstance(typeof(T).FullName)asT;
                uiTarget.RenderTransform=instance;
                returninstance;
            }
        }
 
        publicstringTitle
        {
            get{return(string)GetValue(TitleProperty);}
            set{SetValue(TitleProperty,value);}
        }
 
        //UsingaDependencyPropertyasthebackingstoreforTitle. Thisenablesanimation,styling,binding,etc...
        publicstaticreadonlyDependencyPropertyTitleProperty=
            DependencyProperty.Register("Title",typeof(string),typeof(FormItem),newPropertyMetadata(""));
 
 
        publicImageSourceIcon
        {
            get{return(ImageSource)GetValue(IconProperty);}
            set{SetValue(IconProperty,value);}
        }
 
        //UsingaDependencyPropertyasthebackingstoreforIcon. Thisenablesanimation,styling,binding,etc...
        publicstaticreadonlyDependencyPropertyIconProperty=
            DependencyProperty.Register("Icon",typeof(ImageSource),typeof(FormItem),newPropertyMetadata(null));
 
    }
}

这里在FormItem的构造函数中，添加了一个IsVisibleChanged事件，这个事件会在加载当前控件的时候发生，另外当当前控件的属性值发生变化的时候会触发该效果。其实效果就是同时在X和Y方向做一个平移的效果，这个也是一个常用的效果。

我们重点讨论的是下面的这段代码：

privateTEnsureRenderTransform(UIElementuiTarget)
           whereT:Transform
       {
           if(uiTarget.RenderTransformisT)
               returnuiTarget.RenderTransformasT;
           else
           {
               Tinstance=typeof(T).Assembly.CreateInstance(typeof(T).FullName)asT;
               uiTarget.RenderTransform=instance;
               returninstance;
           }
       }

这里我们创建TranslateTransform的时候是使用的System.Windows.Media.TranslateTransformtransform=EnsureRenderTransform(this);这个方法，而不是每次都new一个对象，每次new一个对象的效率是很低的，而且会占据内存，我们如果已经创建过当前对象完全可以重复利用，这里我们使用了带泛型参数的函数来实现当前效果，typeof(T).Assembly.CreateInstance(typeof(T).FullName)asT，核心是通过程序集来创建对象，这种方式我们也是经常会使用的，比如我们可以通过获取应用程序级别的程序集来通过Activator.CreateInstance来创建窗体等一系列的对象，这种通过反射的机制来扩展的方法是我们需要特别留意的，另外写代码的时候必须注重代码的质量和效率，而不仅仅是实现了某一个功能，这个在以后的开发过程中再一点点去积累去吸收。

以上就是c#WPF中自定义加载时实现带动画效果的Form和FormItem的详细内容，更多关于c#wpf实现带动画效果的Form和FormItem的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

c# WPF中自定义加载时实现带动画效果的Form和FormItem

背景

一动画效果

二自定义控件实现

2.1Form

2.2FormItem

热门推荐

随机推荐