Tag 标签控件：实现 MultiSelectComboBox 选中项的标签展示

摘要：public bool IsClose{get { return (bool)GetValue(IsCloseProperty); }set { SetValue(IsCloseProperty, value); }}public static readonl

Tag 标签控件：实现 MultiSelectComboBox 选中项的标签展示

控件名：Tag

作者：WPFDevelopersOrg - 驚鏵

原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers

码云链接[2]：https://gitee.com/WPFDevelopersOrg/WPFDevelopers

框架支持.NET4 至 .NET8；

Visual Studio 2022;

接着增强 MultiSelectComboBox 带 Tag 显示和搜索功能的多选控件选中项的标签展示。

欢迎各位开发者下载并体验。如果在使用过程中遇到任何问题，欢迎随时向我们反馈[3]创建一个Tag控件继承ContentControl可以在Tag控件中灵活地插入内容（如文本、图标等），从而使其可以展示任意类型的信息。1. Tag控件显示关闭按钮

为 Tag标签添加了一个IsClose属性。这个属性用于控制标签是否显示关闭按钮。

IsClose默认值true，显示关闭按钮。为false隐藏关闭按钮。

public bool IsClose
{
get { return (bool)GetValue(IsCloseProperty); }
set { SetValue(IsCloseProperty, value); }
}

public static readonly DependencyProperty IsCloseProperty =
DependencyProperty.Register("IsClose", typeof(bool), typeof(Tag), new PropertyMetadata(true));

2.关闭事件与命令

定义了一个 CloseEvent和CloseCommand，控件能够响应关闭操作。当点击关闭按钮时，将触发Close事件。

CloseEvent是一个RoutedEvent处理关闭。RoutingStrategy.Bubble冒泡事件。

CloseCommand是一个RoutedCommand，定义了Tag控件的关闭命令，并通过CommandBinding与OnCloseExecuted方法绑定。

public event RoutedEventHandler Close
{
add { AddHandler(CloseEvent, value); }
remove { RemoveHandler(CloseEvent, value); }
}

public static readonly RoutedEvent CloseEvent =
EventManager.RegisterRoutedEvent("Close", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Tag));

public static RoutedCommand CloseCommand
{
get { return _closeCommand; }
}
3.处理关闭命令

在 OnCloseExecuted中，判断sender是否为Tag，如果是，调用OnClose方法。

OnClose方法触发CloseEvent，通知执行关闭Tag操作。

private static void OnCloseExecuted(object sender, ExecutedRoutedEventArgs e)
{
if (sender is Tag tag)
tag.OnClose;
}

protected virtual void OnClose
{
var args = new RoutedEventArgs(CloseEvent, this);
RaiseEvent(args);
}

4. Tag.xaml样式代码

外层 Border控件包裹了Tag控件。

使用 Grid布局，分为两列：

第一列显示 ContentPresenter，显示Tag的内容。

第二列是关闭按钮（PART_CloseButton），位于Tag的右侧。

Button关闭按钮，当点击时触发Tag.CloseCommand，并通过命令删除该Tag。

在关闭按钮中，使用PathIcon显示关闭图标。

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WPFDevelopers.Controls"
xmlns:helpers="clr-namespace:WPFDevelopers.Helpers"
xmlns:resx="clr-namespace:WPFDevelopers">

x:Key="WD.Tag"
BasedOn="{StaticResource WD.ControlBasicStyle}"
TargetType="{x:Type controls:Tag}">

Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{Binding Path=(helpers:ElementHelper.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

x:Name="PART_CloseButton"
Grid.Column="1"
Width="20"
Height="20"
helpers:ElementHelper.IsRound="True"
Command="{x:Static controls:Tag.CloseCommand}"
Style="{StaticResource WD.NormalButton}"
ToolTip="{Binding [Close], Source={x:Static resx:LanguageManager.Instance}}">
Width="10"
Height="10"
Foreground="{TemplateBinding Foreground}"
Kind="WindowClose" />

x:Name="MyStackPanel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
wd:PanelHelper.Spacing="3"
Orientation="Horizontal">

wd:ElementHelper.CornerRadius="4"
Background="{DynamicResource WD.SuccessBorderBrushSolidColorBrush}"
BorderBrush="{DynamicResource WD.SuccessNormalBrush}"
BorderThickness="1"
Content="Tag3" />
Height="24"
Padding="2,0,0,0"
wd:ElementHelper.CornerRadius="3"
Content="Tag4" />

public partial class TagExample : UserControl
{
public TagExample
{
InitializeComponent;
Loaded += TagExample_Loaded;
}

private void TagExample_Loaded(object sender, System.Windows.RoutedEventArgs e)
{

foreach (Tag item in MyStackPanel.Children.OfType)
{
item.Close += Tag_Close;
}
}

private void Tag_Close(object sender, System.Windows.RoutedEventArgs e)
{
if(sender is Tag tag)
MyStackPanel.Children.Remove(tag);
}
}

GitHub 源码地址[4]

Gitee 源码地址[5]