首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从一个ListBox到另一个ListBox动画ListBoxItem

从一个ListBox到另一个ListBox的动画ListBoxItem,可以通过使用动画和数据绑定来实现。在这个例子中,我们将使用WPF(Windows Presentation Foundation)来创建一个简单的应用程序,其中包含两个ListBox,并在它们之间移动ListBoxItem时应用动画。

首先,我们需要在XAML中定义两个ListBox和一个Storyboard,用于定义动画。

代码语言:xaml<Window x:Class="WpfApp1.MainWindow"
复制
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ListBox x:Name="ListBox1" Margin="10" SelectionMode="Extended">
            <ListBox.Items>
                <ListBoxItem Content="Item 1"/>
                <ListBoxItem Content="Item 2"/>
                <ListBoxItem Content="Item 3"/>
            </ListBox.Items>
        </ListBox>
        <ListBox x:Name="ListBox2" Margin="10" Grid.Column="1" SelectionMode="Extended">
            <ListBox.Items>
                <ListBoxItem Content="Item 4"/>
                <ListBoxItem Content="Item 5"/>
                <ListBoxItem Content="Item 6"/>
            </ListBox.Items>
        </ListBox>
       <Storyboard x:Key="MoveItemAnimation">
           <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="movingItem">
                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid>
</Window>

接下来,我们需要在代码后置文件中添加一些逻辑,以便在选择ListBoxItem时启动动画。

代码语言:csharp
复制
using System.Windows;
using System.Windows.Media;

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

        private void ListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            var selectedItems = (sender as ListBox).SelectedItems;
            if (selectedItems.Count > 0)
            {
                var movingItem = selectedItems[0] as ListBoxItem;
                var storyboard = FindResource("MoveItemAnimation") as Storyboard;
                var animation = storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
                animation.Completed += (s, e2) =>
                {
                    ListBox2.Items.Add(movingItem);
                    ListBox1.Items.Remove(movingItem);
                };
                storyboard.Begin(movingItem);
            }
        }
    }
}

在这个例子中,我们使用了一个名为“MoveItemAnimation”的Storyboard来定义动画。动画使用DoubleAnimationUsingKeyFrames来更改ListBoxItem的X坐标,从而实现移动效果。在代码后置文件中,我们在ListBox的SelectionChanged事件中检查是否有选定的项目,并启动动画。动画完成后,我们将项目添加到目标ListBox中,并从源ListBox中删除它。

这个例子只是一个简单的动画,您可以根据需要进行自定义和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

创建包含CheckBox的ListBoxItem

前言 Xceed wpftoolkit提供了一CheckListBox,效果如下: ? 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: ?...并且这个CheckBox通过FindAncestor的Binding方式绑定ListViewItem的IsSelected属性。...虽然是ListView的方法,但它同样适用于ListBox。所以我使用这个方式封装了一ListBox控件,目前基本上没什么功能,就只是在每个ListBoxItem前面加上一CheckBox。...以前介绍过如何自定义ItemsControl,要自定义一ListBox控件,同样需要三部: 定义ListBox 关联ListBoxItemListBox 实现ListBox的逻辑 public class...ListBox的IsMultiSelectCheckBoxEnabled和SelectionMode,所以需要给ListBoxItem添加一Owner属性,并重载ListBox的PrepareContainerForItemOverride

2.9K20
  • silverlight3新增功能2:WriteableBitmap

    new Image(); img.Height = 150; img.Width = 150; img.Source = bitmap; img.Stretch = Stretch.Uniform; ListBoxItem... item = new ListBoxItem(); item.Content = img; listBox.Items.Add(item);       既然截图没问题了,那就考虑保存为PNG,使用了这个网站的...                st.Close();       直接操作dialog.OpenFile()这个流好像会出好多问题,譬如直接Close这个流居然会提示没打开文件,但把dialog.OpenFile()赋值另一个流再操作就没问题了...实际应用二:       WriteableBitmap的另一个应该用,是提高动画的性能。当要做动画的元素子元素太多的时候,动画的效果是很差的,恐怕是因为StoryBoard需要计算里面全部的子元素。...,即使把WriteableBitmap的构造函数写在动画开始之前。

    43840

    Silverlight之ListBoxStyle学习笔记--ListBox版的图片轮换广告

    ListBox是一很有用的控件,其功能直逼Asp.Net中的Repeater,它能实现自定义数据项模板,纵向/横向排列Item(如果扩展一下实现自行折行,几乎就是SL版的Repeater了--实际上WrapPanel...Xaml中的资源是很庞大的概念:样式,模板,动画,触发器,甚至数据集(引用)...都可以称之为Resource.这一点与web开发中的css完全不同。...:如果不进行数据绑定,即使定义了模板,最终也不会有内容,既然连内容都没有了,所以也谈不上外观--即所谓的数据驱动UI) 这里举一ListBox的例子: Xaml <UserControl xmlns...下面这个效果是很多网站都有的图片广告轮换,当然实现办法有N多,这里我用Style结合ListBox弄了一:  ?...--动画--> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName

    1K50

    请来围观:WPF开发的微信客户端!!!

    微信分为两部分,一是登录,一是主体,基于此,WPF也主要是这两窗体来实现。...ImageSource) { HeadImageSource = login_result as ImageSource; //广播,通知LoginUC...当处于二维码状态时划过,则出现动画,头像状态下则没有动画,是设置了Image的Visibility属性来控制的,滑动效果可以看我的另一篇博客微信 二维码鼠标滑动 图像显隐效果[4]。...登录成功现在发现了一问题,就是我有两微信号,其中一登录以后是有数据的,另一个则没有数据。...Binding FriendInfo,Converter={StaticResource nullToVisibility}}"/> 点击发消息按钮,则跳转回聊天页面,然后,将当前的好友加入聊天的第一项

    1.8K30

    WPF实现消息中心

    一、概要 本文将讲解基于WPF实现一消息中心的功能,比如常见的软件当中会经常收到服务端推送的“新闻”、“公告”等消息。这个时候就需要对这个需求进行分析了。 功能分析如下: •消息内容显示。...•消息分类(通知类消息、交互类型消息例如可跳转到某个连接或程序内的模块)•消息处理(接受、删除、忽略) 二、实现 1.消息内容显示 这里考虑自定义的控件为Listbox,消息本身是一多项的内容且需要操作每一项...> ...> 2.消息管理增、删、批量删除 主要容器定下来之后那么接下来每一项消息就是自定义ListboxItem即可,针对每一条消息要有具体的处理。.../// /// 其他类型 /// OtherType = 1 } 4.消息处理 消息处理指的是,“确定”、“接受”、“忽略”这三按钮对消息内容处理的逻辑

    59410
    领券