ListView控件项动画效果添加

发布时间:2024-09-10 17:11:41 作者:小樊
来源:亿速云 阅读:82

在WPF中,为ListView控件项添加动画效果,可以使用Storyboard和Trigger。以下是一个简单的示例,展示了如何为ListView控件项的标题添加淡入淡出动画效果。

首先,在XAML中添加ListView控件:

<Window x:Class="ListViewAnimationExample.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:local="clr-namespace:ListViewAnimationExample"
        mc:Ignorable="d"
        Title="ListView Animation Example" Height="200" Width="300">
    <Grid>
        <ListView x:Name="listView" HorizontalAlignment="Left" Height="160" Margin="10,10,0,0" VerticalAlignment="Top" Width="260">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Name="title" Text="{Binding Title}" FontWeight="Bold" />
                        <Button Content="Delete" Click="DeleteButton_Click" Margin="5,0,0,0" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

接下来,在MainWindow.xaml.cs中添加数据模型和初始化代码:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace ListViewAnimationExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 初始化数据
            var items = new[]
            {
                new Item { Title = "Item 1" },
                new Item { Title = "Item 2" },
                new Item { Title = "Item 3" },
            };

            listView.ItemsSource = items;
        }

        private void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            var button = sender as Button;
            if (button?.CommandParameter is Item item)
            {
                listView.Items.Remove(item);
            }
        }
    }

    public class Item
    {
        public string Title { get; set; }
    }
}

最后,在MainWindow.xaml中添加动画代码:

<Window.Resources>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Grid>
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentStringFormat="{TemplateBinding ContentStringFormat}" />
                        </Border>
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="title" BeginTime="0:0:0" Duration="0:0:0.5" From="0" To="1" AutoReverse="False" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="title" BeginTime="0:0:0" Duration="0:0:0.5" From="0" To="1" AutoReverse="False" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="title" BeginTime="0:0:0" Duration="0:0:0.5" From="0" To="1" AutoReverse="False" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Inactive">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="title" BeginTime="0:0:0" Duration="0:0:0.5" From="1" To="0" AutoReverse="True" />
                            </Storyboard>
                        </VisualState>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

这个示例中,我们为ListViewItem定义了一个模板,并在其中添加了一个名为title的TextBlock。然后,我们为title元素创建了一个淡入淡出动画,当鼠标悬停在ListView项上时,动画效果会触发。

推荐阅读:
  1. Android ListView列表怎么优化
  2. View事件分发原理和ViewPager+ListView嵌套滑动冲突怎么解决

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

listview

上一篇:ListView控件与数据网格对比

下一篇:ListView控件在WebForm中表现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》