WPF实现ComboBox绑定删除按钮

最新推荐文章于 2025-09-24 11:21:23 发布

原创最新推荐文章于 2025-09-24 11:21:23 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在WPF的ComboBox中实现绑定删除按钮的功能，允许用户删除下拉框中的历史记录。通过在项模板中添加文本框和按钮，文本框显示内容，按钮触发删除操作。XAML代码中，数据源与ComboBox项绑定，当删除按钮被点击时，通过Tag属性确定要删除的项，然后更新数据源以刷新列表。

部署运行你感兴趣的模型镜像

ComboBox绑定删除按钮，可删除下拉框中存储的历史记录，效果如下：
这里写图片描述
在ComboBox的项模板->数据模板中布局一个文本框一个按钮，文本框用于显示下拉内容，按钮用于实现删除功能。

XAML部分：

<ComboBox x:FieldModifier="public" x:Name="comboBox" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="200" Height="30" IsEditable="True" BorderBrush="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Canvas.Left="200" Canvas.Top="13.163" FontSize="14.667" VerticalContentAlignment="Center" TextSearch.TextPath="Name" TextOptions.TextFormattingMode="Display" TabIndex="0">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="190" Height="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="170"></ColumnDefinition>
                    <ColumnDefinition Width="20"></ColumnDefinition>
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Column="0" VerticalAlignment="Center" Text="{Binding Path=Name}" />
                 <Button Grid.Column="1" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="20" Height="20" Tag="{Binding Path=Name}" Style="{DynamicResource Style_Normal}" Click="DeleteButton_Click" Content="x" />
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

绑定数据源

comboBox.ItemsSource = userList

数据源对象 userList 中的 user 具有 Name 属性
因此，模板中的 Text=”{Binding Path=Name} 以及按钮中的 Tag=”{Binding Path=Name}” 都将绑定 user 的 Name 属性

在删除按钮点击事件中，可通过按钮的Tag找到需要删除的项，然后重新绑定即可刷新

private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
        List<User> userList = this.comboBox.ItemsSource as List<User>;
        Button closeButton = sender as Button;
        userList.RemoveAll(u => u.Name == closeButton.Tag.ToString());

        this.comboBox.ItemsSource = null;
        this.comboBox.ItemsSource = userList;
}