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

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 逻辑实现

创建一个 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 显示关闭图标。

<ResourceDictionary
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">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Basic/ControlBasic.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style
x:Key="WD.Tag"
BasedOn="{StaticResource WD.ControlBasicStyle}"
TargetType="{x:Type controls:Tag}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource WD.BaseSolidColorBrush}" />
<Setter Property="Background" Value="{DynamicResource WD.BackgroundSolidColorBrush}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="6,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:Tag}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{Binding Path=(helpers:ElementHelper.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
<Grid
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="PART_Content" Content="{TemplateBinding Content}" />
<Button
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}}">
<controls:PathIcon
Width="10"
Height="10"
Foreground="{TemplateBinding Foreground}"
Kind="WindowClose" />
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsClose" Value="False">
<Setter TargetName="PART_CloseButton" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource WD.Tag}" TargetType="{x:Type controls:Tag}" />
</ResourceDictionary>

XAML 示例

 <StackPanel
x:Name="MyStackPanel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
wd:PanelHelper.Spacing="3"
Orientation="Horizontal">
<wd:Tag Content="Tag1" IsClose="False"/>
<wd:Tag wd:ElementHelper.CornerRadius="15">
<StackPanel Orientation="Horizontal">
<wd:PathIcon Kind="Home" />
<TextBlock Margin="2,0,0,0" Text="Tag2" />
</StackPanel>
</wd:Tag>
<wd:Tag
wd:ElementHelper.CornerRadius="4"
Background="{DynamicResource WD.SuccessBorderBrushSolidColorBrush}"
BorderBrush="{DynamicResource WD.SuccessNormalBrush}"
BorderThickness="1"
Content="Tag3" />
<wd:Tag
Height="24"
Padding="2,0,0,0"
wd:ElementHelper.CornerRadius="3"
Content="Tag4" />
<wd:Tag wd:ElementHelper.CornerRadius="15">
<StackPanel Orientation="Horizontal">
<wd:PathIcon Data="M982 426l-2 4h2v82c0 12-2 22-6 32l-130 300c-12 30-42 52-78 52h-384c-46 0-86-40-86-86v-426c0-24 10-44 26-60l280-282 46 46c12 12 18 26 18 44v14l-42 196h270c46 0 86 38 86 84zM42 896v-512h172v512h-172z" Foreground="DodgerBlue" />
<TextBlock Margin="2,0,0,0" Text="Tag5" />
</StackPanel>
</wd:Tag>
</StackPanel>

CSahrp 示例

 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]