一个加载时带动画效果的ListBoxItem
今天我们来谈一下ListBoxItem这个控件,ListBoxItem是直接从ContentControl继承而来的,所以可以添加到任何具有Content属性的控件中去,常见的ListBoxItem可以放到ListBox中,也可以放到ItemsControl中去,ListBoxItem可以横向和TreeViewItem进行比较,只不过TreeViewItem是直接从HeaderedItemsControl继承过来的,然后再继承自ItemsControl。两者有很多的共同之处,可以做更多的横向比较,我们今天只是来讲ListBoxItem,首先看看我们使用的样式,这里贴出前端代码:
<Style TargetType="local:FormItem">
<Setter Property="Margin" Value="0 0 0 15"></Setter>
<Setter Property="Background" Value="#fff"></Setter>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="6"></Setter>
<Setter Property="Foreground" Value="{StaticResource DarkColor}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:FormItem">
<Grid Background="{TemplateBinding Background}" Height="{TemplateBinding Height}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding HeaderWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:Form}}"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Width="3" HorizontalAlignment="Left" Fill="{StaticResource Highlight}"></Rectangle>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Left" Margin="13 0 0 0" Orientation="Horizontal">
<Image x:Name="Icon" Source="{TemplateBinding Icon}" Width="24" Height="24" Margin="0 0 10 0" VerticalAlignment="Center" HorizontalAlignment="Left"></Image>
<TextBlock Text="{TemplateBinding Title}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
</StackPanel>
<ContentPresenter Margin="{TemplateBinding Padding}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这里我们重写了ListBoxItem 的ControlTemplate,我们需要注意的一个地方就是我们使用了 <ContentPresenter Margin="{TemplateBinding Padding}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter>来替代ListBoxItem的Content,我们需要始终记住,只有控件拥有Content属性才能使用ContentPresenter ,这个属性是用来呈现控件的content。
另外一个需要重点介绍的就是FormItem这个类中的代码,这个控件在加载的时候所有的效果都是在后台中进行加载的,首先贴出相关的类的实现,然后再做进一步的分析。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation; namespace X.UI
{
public class FormItem : ListBoxItem
{
static FormItem()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FormItem), new FrameworkPropertyMetadata(typeof(FormItem)));
} public FormItem()
{
System.Windows.Media.TranslateTransform transform = EnsureRenderTransform<System.Windows.Media.TranslateTransform>(this);
transform.X = transform.Y = ;
Opacity = ; IsVisibleChanged += FormItem_IsVisibleChanged;
} void FormItem_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (this.Parent is Form)
{
if (!IsVisible)
{
int index = (this.Parent as Form).Items.IndexOf(this);
System.Windows.Media.TranslateTransform transform = EnsureRenderTransform<System.Windows.Media.TranslateTransform>(this);
DoubleAnimation da = new DoubleAnimation()
{
From = ,
To = ,
EasingFunction = new CircleEase { EasingMode = EasingMode.EaseOut }
};
transform.BeginAnimation(System.Windows.Media.TranslateTransform.XProperty, da);
transform.BeginAnimation(System.Windows.Media.TranslateTransform.YProperty, da);
DoubleAnimation daopacity = new DoubleAnimation
{
From = ,
To = ,
};
this.BeginAnimation(UIElement.OpacityProperty, daopacity);
}
else
{
int index = (this.Parent as Form).Items.IndexOf(this);
System.Windows.Media.TranslateTransform transform = EnsureRenderTransform<System.Windows.Media.TranslateTransform>(this);
DoubleAnimation da = new DoubleAnimation()
{
From = ,
To = ,
BeginTime = TimeSpan.FromMilliseconds( * (index + )),
Duration = TimeSpan.FromMilliseconds(),
EasingFunction = new CircleEase { EasingMode = EasingMode.EaseOut }
};
transform.BeginAnimation(System.Windows.Media.TranslateTransform.XProperty, da);
transform.BeginAnimation(System.Windows.Media.TranslateTransform.YProperty, da);
DoubleAnimation daopacity = new DoubleAnimation
{
From = ,
To = ,
BeginTime = TimeSpan.FromMilliseconds( * (index + )),
Duration = TimeSpan.FromMilliseconds(),
EasingFunction = new CircleEase { EasingMode = EasingMode.EaseOut }
};
this.BeginAnimation(UIElement.OpacityProperty, daopacity);
}
}
} private T EnsureRenderTransform<T>(UIElement uiTarget)
where T : Transform
{
if (uiTarget.RenderTransform is T)
return uiTarget.RenderTransform as T;
else
{
T instance = typeof(T).Assembly.CreateInstance(typeof(T).FullName) as T;
uiTarget.RenderTransform = instance;
return instance;
}
} public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
} // Using a DependencyProperty as the backing store for Title. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(FormItem), new PropertyMetadata("")); public ImageSource Icon
{
get { return (ImageSource)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
} // Using a DependencyProperty as the backing store for Icon. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(ImageSource), typeof(FormItem), new PropertyMetadata(null)); }
}
这里在FormItem的构造函数中,添加了一个IsVisibleChanged事件,这个事件会在加载当前控件的时候发生,另外当当前控件的属性值发生变化的时候会触发该效果。其实效果就是同时在X和Y方向做一个平移的效果,这个也是一个常用的效果。
我们重点讨论的是下面的这段代码:
private T EnsureRenderTransform<T>(UIElement uiTarget)
where T : Transform
{
if (uiTarget.RenderTransform is T)
return uiTarget.RenderTransform as T;
else
{
T instance = typeof(T).Assembly.CreateInstance(typeof(T).FullName) as T;
uiTarget.RenderTransform = instance;
return instance;
}
}
这里我们创建TranslateTransform的时候是使用的System.Windows.Media.TranslateTransform transform = EnsureRenderTransform<System.Windows.Media.TranslateTransform>(this);这个方法,而不是每次都new一个对象,每次new一个对象的效率是很低的,而且会占据内存,我们如果已经创建过当前对象完全可以重复利用,这里我们使用了带泛型参数的函数来实现当前效果,typeof(T).Assembly.CreateInstance(typeof(T).FullName) as T,核心是通过程序集来创建对象,这种方式我们也是经常会使用的,比如我们可以通过获取应用程序级别的程序集来通过Activator.CreateInstance来创建窗体等一系列的对象,这种通过反射的机制来扩展的方法是我们需要特别留意的,另外写代码的时候必须注重代码的质量和效率,而不仅仅是实现了某一个功能,这个在以后的开发过程中再一点点去积累去吸收。
一个加载时带动画效果的ListBoxItem的更多相关文章
- 利用css实现页面加载时旋转动画
有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, h ...
- CSS3实现加载中的动画效果
本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...
- tableView//collectionView加载时的动画
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:( ...
- presentModalViewController方法,present一个透明的viewController,带动画效果
//假设需要被present的控制器实例为controller,controller的背景色设置为clearColor UIViewController * rootcontroller = self ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 页面加载中jquery逐渐消失效果实现
为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading" ...
- 页面加载时的div动画
用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...
- ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...
- 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
随机推荐
- Spring Boot设置上传文件大小
可以使用配置文件配置,也可以使用Bean在启动类中配置 配置文件为application.properties格式: spring.http.multipart.maxFileSize=10Mb sp ...
- 【转】git-stash用法小结
https://www.cnblogs.com/tocy/p/git-stash-reference.html 缘起 今天在看一个bug,之前一个分支的版本是正常的,在新的分支上上加了很多日志没找到原 ...
- syzkaller 资料集合
搭建 1.Setup: Ubuntu host, QEMU vm, x86-64 kernel https://github.com/google/syzkaller/blob/master/docs ...
- HyperLedger Fabric 1.0的Transaction处理流程
如果把区块链比作一个只能读写,不能删改的分布式数据库的话,那么事务和查询就是对这个数据库进行的最重要的操作.以比特币来说,我们通过钱包或者Blockchain.info进行区块链的查询操作,而转账行为 ...
- redis底层设计(二)——内存映射数据结构
我们继续接着上一篇博客,今天来看看内存映射数据结构. 上篇我们讲了内部数据结构,虽然内部数据结构非常强大,但是创建一系列完整的数据结构本身也是一件相当耗费时间的工作,当一个对象包含的元素数量并不多,或 ...
- Materialized View模式
Materialized-View模式是在要求数据格式不利于查询操作的情况下,根据多个数据仓库的数据生成预生成的视图的一种模式.这种模式可以帮助支持高效的查询和数据提取,提高应用程序的性能. 问题 在 ...
- 算法相关——Java排序算法之插入排序(四)
0. 前言 本系列文章将介绍一些常用的排序算法.排序是一个非常常见的应用场景,也是开发岗位面试必问的一道面试题,有人说,如果一个企业招聘开发人员的题目中没有排序算法题,那说明这个企业不是一个" ...
- SQL Server-索引故事的遥远由来,原来是这样的?(二十八)
前言 前段时间工作比较忙,每天回来也时不时去写有关ASP.NET Core的文章,无论是项目当中遇到的也好还是自学的也好都比较严谨的去叙述,喜欢分享,乐于分享这是我一直以来的态度,当然从中也会有些许错 ...
- 深入理解[Future模式]原理与技术
1.Future模式 Future模式和多线程技术密切相关,可以说是利用多线程技术优化程序的一个实例. 在程序设计中,当某一段程序提交了一个请求,期望得到一个答复.但非常不幸的是,服务程序对这个请求的 ...
- 07 YAPI/基础设施 - DevOps之路
07 YAPI/基础设施 - DevOps之路 文章Github地址,欢迎start:https://github.com/li-keli/DevOps-WiKi 简介 YApi 是一个可本地部署的. ...