WPF中的ListBox怎麼新增刪除按鈕並刪除所在行

BearHan發表於2024-10-09

直接上程式碼:

第一步：建立測試類

    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地址：bearhanQ/WPFFramework: Share some experience (github.com)

QQ技術交流群：332035933；

相關文章