How to add a Delete button to a ListBox in WPF and delete the row it is on.

Straight to the code.

Step 1: Create the test class

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

Step 2: Create viewmodel and data source

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

        public MainWindowVm()
        {
            Girls = new ObservableCollection<BeautifulGirl>
            {
                new BeautifulGirl
                {
                    Name ="Liu Yifei (1976-), PRC actress",
                },
                new BeautifulGirl
                {
                    Name ="Gao Yuan Yuan (1927-), * actress",
                },
                new BeautifulGirl
                {
                    Name ="Phoenix (name)",
                }
            };
        }
    }

Step 3: Binding data and interface display

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

Running it will give you the following result:

Now you want to delete Phoenix from it, or if you like Phoenix and want to delete any one of them, what to do

        <ListBox ItemsSource="{Binding Girls}">
            <>
                <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>

Then we'll add a delete button to our listbox after each entry.

Step 4: write delete logic, generally use command and viewmodel to interact, so we first create a 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);
    }
}

How to use this command

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

    public CommandBase DelCommand { get; set; }

    public MainWindowVm()
    {
        Girls = new ObservableCollection<BeautifulGirl>
        {
            new BeautifulGirl
            {
                Name ="Liu Yifei (1976-), PRC actress",
            },
            new BeautifulGirl
            {
                Name ="Gao Yuan Yuan (1927-), * actress",
            },
            new BeautifulGirl
            {
                Name ="Phoenix (name)",
            }
        };

        DelCommand = new CommandBase(DelAction);
    }

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

Create a command inside the viewmodel, and the method corresponding to the command

Bind it on the front end.

<ListBox ItemsSource="{Binding Girls}">
    <>
        <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=}"
                        CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=DataContext}"/>
            </StackPanel>
        </DataTemplate>
    </>
</ListBox>

Notice the red part of the code inside

Give it a final run.

Delete the extra two and leave only the favorite

(This blog is just a bit of fun, no personal attacks intended)

Project github address:bearhanQ/WPFFramework: Share some experience ()

QQ technical exchange group: 332035933;