WPF ListBox 添加删除按钮并实现行移除功能

前言

在 WPF 应用程序开发中，ListBox 控件是一个常用的选择，尤其是在需要展示一系列数据项的情况下。但是，默认情况下，ListBox 并不提供直接的行删除功能。

为了增强用户体验，本文将介绍如何在 ListBox 的每一项旁边添加一个删除按钮，并实现点击该按钮后删除对应行的功能。通过简单的代码示例，将展示整个过程，帮助大家快速实现这一实用功能，从而提升应用程序的交互性和实用性。

正文

第一步：创建测试类

public class BeautifulGirl
{
    public string Name { get; set; }
}

第二步：创建viewmodel和数据源

    public class MainWindowVm
    {
        public ObservableCollection<BeautifulGirl> Girls { get; set; }

        public MainWindowVm()
        {
            Girls = new ObservableCollection<BeautifulGirl>
            {
                new BeautifulGirl
                {
                    Name ="刘亦菲",
                },
                new BeautifulGirl
                {
                    Name ="高圆圆",
                },
                new BeautifulGirl
                {
                    Name ="凤姐",
                }
            };
        }
    }

第三步：绑定数据和界面显示

<ListBox ItemsSource="{Binding Girls}">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type local:BeautifulGirl}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

运行起来就会得到下面的结果:

现在你想把里面的凤姐给删了，或者你要是喜欢凤姐，想任意删一个，怎么办

<ListBox ItemsSource="{Binding Girls}">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type local:BeautifulGirl}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <Button Content="X" Margin="10,0,0,0" Width="100"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

那就在我们的listbox里面给每一条后面都加一个删除按钮

第四步:写删除逻辑，一般都用command和viewmodel来互动,所以我们先创建一个command

public class CommandBase : ICommand
{
    public event EventHandler CanExecuteChanged;

    public Action<object> AcExecute { get; set; }

    public Func<object, bool> FcCanExecute { get; set; }

    public CommandBase(Action<object> execute, Func<object, bool> canExecute)
    {
        this.AcExecute = execute;
        this.FcCanExecute = canExecute;
    }
    public CommandBase(Action<object> execute)
    {
        this.AcExecute = execute;
        this.FcCanExecute = (o) =>
        {
            return true;
        };
    }
    public bool CanExecute(object parameter)
    {
        if (FcCanExecute != null)
        {
            return FcCanExecute(parameter);
        }
        return false;
    }
    public void Execute(object parameter)
    {
        AcExecute(parameter);
    }
}

怎么使用这个command

public class MainWindowVm
{
    public ObservableCollection<BeautifulGirl> Girls { get; set; }

    public CommandBase DelCommand { get; set; }

    public MainWindowVm()
    {
        Girls = new ObservableCollection<BeautifulGirl>
        {
            new BeautifulGirl
            {
                Name ="刘亦菲",
            },
            new BeautifulGirl
            {
                Name ="高圆圆",
            },
            new BeautifulGirl
            {
                Name ="凤姐",
            }
        };

        DelCommand = new CommandBase(DelAction);
    }

    private void DelAction(object parameter)
    {
        var girl = parameter as BeautifulGirl;
        if (girl != null)
        {
            Girls.Remove(girl);
        }
    }
}

在viewmodel里面创建一个command，和command对应的方法

前端绑定一下

<ListBox ItemsSource="{Binding Girls}">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type local:BeautifulGirl}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <Button Content="X" Margin="10,0,0,0" Width="100"
                        Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.DelCommand}"
                        CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=DataContext}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

注意看里面的红色部分代码

最后运行一下

删除多余的两个，只留下喜欢的

(本博客只是玩梗，没有人身攻击的意思)

项目地址

github.com/bearhanQ/WP…

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

作者：BearHan

出处：cnblogs.com/lvpp13/p/18454644

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！