WPF ListView的几个动画（能够优化显示效果）

最新推荐文章于 2024-09-22 09:58:29 发布
最新推荐文章于 2024-09-22 09:58:29 发布
阅读量706 收藏 1
点赞数
分类专栏： WPF 动画 文章标签： wpf c# ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjw9645781/article/details/119004283
版权
这个博客内容展示了如何使用XAML为ListView创建透明背景、禁用滚动条并自定义ItemContainerStyle。每个列表项包含一个可缩放的图标和文字，通过MouseEnter和MouseLeave事件实现图标缩放的弹性动画。当选中或取消选中列表项时，颜色会发生变化，提供了一种交互式的用户体验。
摘要由CSDN通过智能技术生成 
<ListView Background="Transparent" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectedValue="{Binding SelectedValue}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListViewItem}">
                                    <Grid Height="80" Background="#00000000">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="40*"/>
                                            <RowDefinition Height="20*"/>
                                        </Grid.RowDefinitions>
                                        <Border x:Name="icon" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0 0 0 10" RenderTransformOrigin="0.5,0.5">
                                            <Border.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform x:Name="iconScale"/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Border.RenderTransform>
                                            <Path x:Name="iconPath" Stretch="Fill" Stroke="Transparent" Height="20" Width="20" Data="" Fill="#BBBBBB"/>
                                        </Border>
                                        <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                                            <Border.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="{Binding ElementName=iconScale,Path=ScaleX}" ScaleY="{Binding ElementName=iconScale,Path=ScaleY}"/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Border.RenderTransform>
                                            <TextBlock x:Name="iconText" Text="{Binding}" Foreground="#BBBBBB"/>
                                        </Border>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="icon">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.5">
                                                            <EasingDoubleKeyFrame.EasingFunction>
                                                                <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                                                            </EasingDoubleKeyFrame.EasingFunction>
                                                        </EasingDoubleKeyFrame>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="icon">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.5">
                                                            <EasingDoubleKeyFrame.EasingFunction>
                                                                <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                                                            </EasingDoubleKeyFrame.EasingFunction>
                                                        </EasingDoubleKeyFrame>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="icon">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.5"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                                                            <EasingDoubleKeyFrame.EasingFunction>
                                                                <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                                                            </EasingDoubleKeyFrame.EasingFunction>
                                                        </EasingDoubleKeyFrame>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="icon">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.5"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                                                            <EasingDoubleKeyFrame.EasingFunction>
                                                                <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                                                            </EasingDoubleKeyFrame.EasingFunction>
                                                        </EasingDoubleKeyFrame>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="ListBoxItem.Selected">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation To="LightCyan" Duration="0:0:0.2" Storyboard.TargetName="iconPath" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"/>
                                                    <ColorAnimation To="LightCyan" Duration="0:0:0.2" Storyboard.TargetName="iconText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="ListBoxItem.Unselected">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation From="Transparent" Duration="0:0:0.2" Storyboard.TargetName="iconPath" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"/>
                                                    <ColorAnimation To="#BBBBBB" Duration="0:0:0.2" Storyboard.TargetName="iconText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding}" Value="">
                                            <Setter TargetName="iconPath" Property="Data" Value=""/>
                                        </DataTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>               
            </ListView>

在这里插入图片描述

Answer答案
关注
专栏目录
WPF ListView 漂亮样式
12-30
WPF ListView 漂亮样式，自己还可以根据自己的需求进行样式修改，表头、列表都可以根据注释进行拓展，很实用
wpf界面展示关于ListView展示有倒影效果
Maths_bai的专栏
06-04 1754
wpf界面展示关于ListView展示有倒影效果分享一下下载 (13.91 KB)2010-5-25 03:45wpf界面展示关于ListView展示有倒影效果分享一下wpf中的xaml代码：                  OverridesDefaultStyle="False" Background="#7273C0EC" BorderBrush="#00FFFFFF" Foreground="#FFFFFFFF" Width="300" Height="156" VerticalAlignment
WPF自定义控件：实现ListView项可拖拽排序功能
最新发布
weixin_35307279的博客
09-22 1042
本文还有配套的精品资源，点击获取 简介：本文详细介绍了如何在WPF平台上创建一个支持通过拖拽方式重新排序ListView项的自定义控件。该控件利用.NET框架提供的事件处理、数据绑定机制，以及MVVM设计模式，实现了从基础的拖放操作到数据源更新的整个流程。文章还将探讨如何通过添加动画效果、异步处理等手段优化用户体验和性能。 1. WPF自定义ListView控件概...
WPF ListBox简单滑动动画
zilongcn23的博客
10-05 1141
WPF ListBox简单滑动动画引用 Behaviors 库ListBox 使用动画 引用 Behaviors 库 首先，我们要引用Behaviors的库才能使用行为来添加动画（已经引用过的可以忽略这一步）: 点击菜单栏 工具 > NuGet 包管理器 > 管理解决方案的 NuGet 程序包 搜索 Behaviors 得到的第一个结果 Microsoft.Xaml.Behaviors.Wpf 并按照上图依次点击按钮安装 Behaviors 库。 ListBox 使用动画 重写ListBox的
博客对应源码
03-28
博客《Animation动画详解(十三)——实现ListView Item进入动画》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/50988685
ListViewAnimation列表动画
08-01
ListViewAnimation列表动画
ListViewItem 的动画
程序亦非猿——一个能帮你进大厂的男人
04-27 766
SingleAnimationAdapter（单一的动画适配器）  如果你想给ListView做一些比较简单的效果，可以试一下这个类。 该类自带的常量（我只简单的介绍一下)： DEFAULTANIMATIONDELAYMILLIS  默认延迟100毫秒 DEFAULTANIMATIONDURATIONMILLIS 默认动画持续300毫秒 概要：自定义动画的时候，写个类继承该类 实
在ListView控件中显示具有褪色效果的更新的列表视图项
04-11
在标题"在ListView控件中显示具有褪色效果的更新的列表视图项"中，我们关注的是一个增强用户界面体验的方法，即当ListView中的数据项发生变化时，通过视觉效果（如颜色变化和褪色）来提示用户这些更新。这种方法可以...
WPF实现图片动态滚动消失效果（方式二：使用Storyboard）
dnazhd的博客
05-20 1096
这里我们使用Storyboard来动态显示ListView元素位置的更改，效果如下（与采用FluidMoveBehavior方式实现的区别是前面几个图片的加载效果，后面的滚动消失效果基本一致）： 实现步骤： 1、图片资源绑定类ListBindData.cs与方式一中的相同，不再赘述。 2、图片滚动效果是采用Storyboard改变ListViewItem的RenderTransform属性来实现的。 窗体xaml： <Window x:Class="SmoothScroll.MainW
ListView动态加载刷新
10-24
在Android中实现ListView的动态加载刷新，通常涉及以下几个关键步骤： 1. **适配器(Adapter)**：适配器是连接ListView与数据源的桥梁。你需要创建一个自定义的Adapter，如`MyListAdapter`，并重写`getView()`方法来...
WPF翻转动画
老周——“易之道”
04-10 2万+
小丫头比较调皮，为了做个东东来哄一下小丫头，我想到了做一个简单的三维翻转动画。在登录QQ 2013 的时候，我看到登录窗口也有类似的动画。 在WPF中要翻转对象，估计是得用三维变换，所以我用到了AxisAngleRotation3D，让图形绕着Z轴来旋转。 先看看效果。   是的，就是这样的效果，在XAML中，由于涉及三维图形，我先做了两个用户控件，作为正面和背面，然后让它旋转。 设
WPF PathListBox轨迹旋转动画 椭圆轨迹动画 椭圆运动
05-05
运用WPF .netFrameWork4.0出的新功能，PathListBox分布物体，制作出这些物体一起按照这个椭圆的轨迹运动的动画，关于PathListBox的属性用法，大家自己Baidu一下。
WPF实现让ListBox的Item飞入飞出特效
11-03
WPF的ListBox实现了源的飞入飞出特效，有兴趣的朋友可以载下来研究研究。
WPF中ListView拖拽效果
03-06
WPF中ListView拖拽效果的实现。
wpf列表 冻结行+滚动动画
06-02
一个自定义控件，对列表中的前几行（你自己输入）进行冻结，剩余行进行上下滚动，当移到滚动列表上时滚动停止，移开时滚动恢复。
SlidingListBox –在WPF中对ListBoxItem进行动画处理
04-11
一个列表框，可在选中和取消选中它们时滑动其项目。
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
热门推荐
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
点击listview的item，带动画效果的展开详情（一）
u014620028的专栏
11-14 3904
点击listview的item，带动画效果的展开详情
WPF 使用 HandyControl 给 ListView 添加漂亮的表头效果
lindexi
09-26 3873
本文将来安利大家一个很好用的 UI 控件库，著名的 HandyControl 库。在想要给 ListView 添加一个表头，同时想要这个 ListView 在没有美工小姐姐的帮助下也能看起来比较好看，此时就特别适合使用 HandyControl 库
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值