我喜欢的Evernote（Windows版）的标签控制，并想知道是否有类似的东西在那里？ 我只能够找到标签云控制。
具体而言，我喜欢自由格式打字就像一个文本框，查找，并提出智能感知风格匹配的内容我已经输入了标签。 当我选择一个标签，文本被替换为表示与该按钮是标记文本的文本标签的按钮。
更新 ：加入截图
添加新标签
查看现有的标签，然后点击“X”删除标签
Answer 1:
这似乎是一个非常好的锻炼，所以我试图建立这个控制。 我没有测试它彻底，让我知道如果你想用它来工作，需要进一步的帮助。
实例：
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:s="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:ViewModel />
</Window.DataContext>
<Grid>
<!-- todo: implement ICommand properties on EvernoteTagControl to allow easy binding to the viewmodel. Alternatively, the user could use a behavior to handle TagClick, and if necessary TagAdded/TagRemoved -->
<local:EvernoteTagControl ItemsSource="{Binding SelectedTags}" TagClick="TagControl_TagClick" >
<local:EvernoteTagControl.AllTags>
<s:String>read</s:String>
<s:String>receipt</s:String>
<s:String>recipe</s:String>
<s:String>research</s:String>
<s:String>restaurants</s:String>
</local:EvernoteTagControl.AllTags>
</local:EvernoteTagControl>
</Grid>
</Window>
视图模型：
using System.Collections.Generic;
using System.ComponentModel;
namespace WpfApplication1
{
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private List<EvernoteTagItem> _selectedTags = new List<EvernoteTagItem>();
public List<EvernoteTagItem> SelectedTags
{
get { return _selectedTags; }
set
{
_selectedTags = value;
if (_selectedTags != value)
OnPropertyChanged("SelectedTags");
}
}
public ViewModel()
{
this.SelectedTags = new List<EvernoteTagItem>() { new EvernoteTagItem("news"), new EvernoteTagItem("priority") };
}
private void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
EvernoteTagControl：
using System;
using System.Collections;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication1
{
[TemplatePart(Name = "PART_CreateTagButton", Type = typeof(Button))]
public class EvernoteTagControl : ListBox
{
public event EventHandler<EvernoteTagEventArgs> TagClick;
public event EventHandler<EvernoteTagEventArgs> TagAdded;
public event EventHandler<EvernoteTagEventArgs> TagRemoved;
static EvernoteTagControl()
{
// lookless control, get default style from generic.xaml
DefaultStyleKeyProperty.OverrideMetadata(typeof(EvernoteTagControl), new FrameworkPropertyMetadata(typeof(EvernoteTagControl)));
}
public EvernoteTagControl()
{
//// some dummy data, this needs to be provided by user
//this.ItemsSource = new List<EvernoteTagItem>() { new EvernoteTagItem("receipt"), new EvernoteTagItem("restaurant") };
//this.AllTags = new List<string>() { "recipe", "red" };
}
// AllTags
public List<string> AllTags { get { return (List<string>)GetValue(AllTagsProperty); } set { SetValue(AllTagsProperty, value); } }
public static readonly DependencyProperty AllTagsProperty = DependencyProperty.Register("AllTags", typeof(List<string>), typeof(EvernoteTagControl), new PropertyMetadata(new List<string>()));
// IsEditing, readonly
public bool IsEditing { get { return (bool)GetValue(IsEditingProperty); } internal set { SetValue(IsEditingPropertyKey, value); } }
private static readonly DependencyPropertyKey IsEditingPropertyKey = DependencyProperty.RegisterReadOnly("IsEditing", typeof(bool), typeof(EvernoteTagControl), new FrameworkPropertyMetadata(false));
public static readonly DependencyProperty IsEditingProperty = IsEditingPropertyKey.DependencyProperty;
public override void OnApplyTemplate()
{
Button createBtn = this.GetTemplateChild("PART_CreateTagButton") as Button;
if (createBtn != null)
createBtn.Click += createBtn_Click;
base.OnApplyTemplate();
}
/// <summary>
/// Executed when create new tag button is clicked.
/// Adds an EvernoteTagItem to the collection and puts it in edit mode.
/// </summary>
void createBtn_Click(object sender, RoutedEventArgs e)
{
var newItem = new EvernoteTagItem() { IsEditing = true };
AddTag(newItem);
this.SelectedItem = newItem;
this.IsEditing = true;
}
/// <summary>
/// Adds a tag to the collection
/// </summary>
internal void AddTag(EvernoteTagItem tag)
{
if (this.ItemsSource == null)
this.ItemsSource = new List<EvernoteTagItem>();
((IList)this.ItemsSource).Add(tag); // assume IList for convenience
this.Items.Refresh();
if (TagAdded != null)
TagAdded(this, new EvernoteTagEventArgs(tag));
}
/// <summary>
/// Removes a tag from the collection
/// </summary>
internal void RemoveTag(EvernoteTagItem tag, bool cancelEvent = false)
{
if (this.ItemsSource != null)
{
((IList)this.ItemsSource).Remove(tag); // assume IList for convenience
this.Items.Refresh();
if (TagRemoved != null && !cancelEvent)
TagRemoved(this, new EvernoteTagEventArgs(tag));
}
}
/// <summary>
/// Raises the TagClick event
/// </summary>
internal void RaiseTagClick(EvernoteTagItem tag)
{
if (this.TagClick != null)
TagClick(this, new EvernoteTagEventArgs(tag));
}
}
public class EvernoteTagEventArgs : EventArgs
{
public EvernoteTagItem Item { get; set; }
public EvernoteTagEventArgs(EvernoteTagItem item)
{
this.Item = item;
}
}
}
EvernoteTagItem：
using System.Collections;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace WpfApplication1
{
[TemplatePart(Name = "PART_InputBox", Type = typeof(AutoCompleteBox))]
[TemplatePart(Name = "PART_DeleteTagButton", Type = typeof(Button))]
[TemplatePart(Name = "PART_TagButton", Type = typeof(Button))]
public class EvernoteTagItem : Control
{
static EvernoteTagItem()
{
// lookless control, get default style from generic.xaml
DefaultStyleKeyProperty.OverrideMetadata(typeof(EvernoteTagItem), new FrameworkPropertyMetadata(typeof(EvernoteTagItem)));
}
public EvernoteTagItem() { }
public EvernoteTagItem(string text)
: this()
{
this.Text = text;
}
// Text
public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } }
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(EvernoteTagItem), new PropertyMetadata(null));
// IsEditing, readonly
public bool IsEditing { get { return (bool)GetValue(IsEditingProperty); } internal set { SetValue(IsEditingPropertyKey, value); } }
private static readonly DependencyPropertyKey IsEditingPropertyKey = DependencyProperty.RegisterReadOnly("IsEditing", typeof(bool), typeof(EvernoteTagItem), new FrameworkPropertyMetadata(false));
public static readonly DependencyProperty IsEditingProperty = IsEditingPropertyKey.DependencyProperty;
/// <summary>
/// Wires up delete button click and focus lost
/// </summary>
public override void OnApplyTemplate()
{
AutoCompleteBox inputBox = this.GetTemplateChild("PART_InputBox") as AutoCompleteBox;
if (inputBox != null)
{
inputBox.LostFocus += inputBox_LostFocus;
inputBox.Loaded += inputBox_Loaded;
}
Button btn = this.GetTemplateChild("PART_TagButton") as Button;
if (btn != null)
{
btn.Loaded += (s, e) =>
{
Button b = s as Button;
var btnDelete = b.Template.FindName("PART_DeleteTagButton", b) as Button; // will only be found once button is loaded
if (btnDelete != null)
{
btnDelete.Click -= btnDelete_Click; // make sure the handler is applied just once
btnDelete.Click += btnDelete_Click;
}
};
btn.Click += (s, e) =>
{
var parent = GetParent();
if (parent != null)
parent.RaiseTagClick(this); // raise the TagClick event of the EvernoteTagControl
};
}
base.OnApplyTemplate();
}
/// <summary>
/// Handles the click on the delete glyph of the tag button.
/// Removes the tag from the collection.
/// </summary>
void btnDelete_Click(object sender, RoutedEventArgs e)
{
var item = FindUpVisualTree<EvernoteTagItem>(sender as FrameworkElement);
var parent = GetParent();
if (item != null && parent != null)
parent.RemoveTag(item);
e.Handled = true; // bubbling would raise the tag click event
}
/// <summary>
/// When an AutoCompleteBox is created, set the focus to the textbox.
/// Wire PreviewKeyDown event to handle Escape/Enter keys
/// </summary>
/// <remarks>AutoCompleteBox.Focus() is broken: http://stackoverflow.com/questions/3572299/autocompletebox-focus-in-wpf</remarks>
void inputBox_Loaded(object sender, RoutedEventArgs e)
{
AutoCompleteBox acb = sender as AutoCompleteBox;
if (acb != null)
{
var tb = acb.Template.FindName("Text", acb) as TextBox;
if (tb != null)
tb.Focus();
// PreviewKeyDown, because KeyDown does not bubble up for Enter
acb.PreviewKeyDown += (s, e1) =>
{
var parent = GetParent();
if (parent != null)
{
switch (e1.Key)
{
case (Key.Enter): // accept tag
parent.Focus();
break;
case (Key.Escape): // reject tag
parent.Focus();
parent.RemoveTag(this, true); // do not raise RemoveTag event
break;
}
}
};
}
}
/// <summary>
/// Set IsEditing to false when the AutoCompleteBox loses keyboard focus.
/// This will change the template, displaying the tag as a button.
/// </summary>
void inputBox_LostFocus(object sender, RoutedEventArgs e)
{
this.IsEditing = false;
var parent = GetParent();
if (parent != null)
parent.IsEditing = false;
}
private EvernoteTagControl GetParent()
{
return FindUpVisualTree<EvernoteTagControl>(this);
}
/// <summary>
/// Walks up the visual tree to find object of type T, starting from initial object
/// http://www.codeproject.com/Tips/75816/Walk-up-the-Visual-Tree
/// </summary>
private static T FindUpVisualTree<T>(DependencyObject initial) where T : DependencyObject
{
DependencyObject current = initial;
while (current != null && current.GetType() != typeof(T))
{
current = VisualTreeHelper.GetParent(current);
}
return current as T;
}
}
}
主题/ generic.xaml：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:tkInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit">
<SolidColorBrush x:Key="HighlightBrush" Color="DodgerBlue" />
<!-- EvernoteTagControl default style -->
<Style TargetType="{x:Type local:EvernoteTagControl}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
<LinearGradientBrush x:Key="IconBrush" EndPoint="0,1">
<GradientStop Color="#5890f0" Offset="0" />
<GradientStop Color="#0351d7" Offset="1" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Path Grid.Column="0" Margin="2" Fill="{StaticResource IconBrush}" Height="19" Stretch="Uniform" Data="M 50.535714,0.44196425 0.00446427,34.754464 l 0,106.906246 100.71874573,0 0,-107.124996 L 50.535714,0.44196425 z m 0.1875,21.21874975 c 6.311826,0 11.40625,5.094424 11.40625,11.40625 0,6.311826 -5.094424,11.4375 -11.40625,11.4375 -6.311826,0 -11.4375,-5.125674 -11.4375,-11.4375 0,-6.311826 5.125674,-11.40625 11.4375,-11.40625 z" />
<ItemsPresenter Grid.Column="1" />
<Button Margin="5,0,0,0" Grid.Column="2" Content="Click to add tag..." x:Name="PART_CreateTagButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter TextElement.Foreground="#FF555555" VerticalAlignment="Center" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter TargetName="PART_CreateTagButton" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel" >
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- EvernoteTagItem default style -->
<Style TargetType="{x:Type local:EvernoteTagItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="50" />
<Setter Property="Margin" Value="0,0,2,0" />
<Setter Property="Padding" Value="5,2,0,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<Button x:Name="PART_TagButton" Content="{TemplateBinding Text}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" BorderBrush="Gray" BorderThickness="1" CornerRadius="2" Background="#01FFFFFF">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,2" />
<Button x:Name="PART_DeleteTagButton" Grid.Column="1" Margin="3,0" VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="Hidden" >
<Button.Template>
<ControlTemplate>
<Grid Height="10" Width="10" Background="#01FFFFFF" >
<Path Stretch="Uniform" ClipToBounds="True" Stroke="{StaticResource HighlightBrush}" StrokeThickness="2" Data="M 85.364473,6.9977109 6.0640998,86.29808 6.5333398,85.76586 M 6.9926698,7.4977169 86.293043,86.79809 85.760823,86.32885" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource HighlightBrush}" />
<Setter TargetName="PART_DeleteTagButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<tkInput:AutoCompleteBox x:Name="PART_InputBox"
Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ItemsSource="{Binding AllTags, RelativeSource={RelativeSource AncestorType={x:Type local:EvernoteTagControl}}}"
IsTextCompletionEnabled="True"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Answer 2:
下面是我将如何去创造这种控制。
高度概括：
这个控制将包含以下主要成分：（1）一个AutoCompleteTextBox或AutoCompleteComboBox （2）“按钮”控制你描述（3）一种UI集合以保持施加的标签。 该AutoCompleteTextBox和收集保存应用的代码会在您选择的布局容器提前定位。
首先，我们可以利用一个AutoCompleteTextBox或AutoCompleteComboBox给我们智能感知式选项的用户类型。 接下来，我们“听”，为用户从下拉列表中选择呈现标签动态创建新的“按钮”控件（我们可以为它创建一个用户控件/ CustomControl的时间提前，但我们会需要“新”一个向上至少）。 “按钮”将包含作为其文本的文本AutoCompleteTextBox 。 最后，我们将新的“按钮”到一个列表框（或其他UI初步认识集合型），它保存所有当前应用的标签。
细节：
有几个AutoCompleteTextBox控制在那里，但我将描述如何使用这个CodeProject上一个 。 此示例项目演示如何使用一个普通的TextBox ，一个AutoCompleteComboBox或AutoCompleteTextBox实现智能感知风格的选项。 该项目的核心部件是真正的AutoCompleteManager和DataProvider的，类型的IAutoCompleteDataProvider ，与一起IAutoAppendDataProvider 。
说明进一步的细节之前，先来这的一些截图AutoCompleteTextBox在动作控制（注意：我使用的是不同的风格为ListBoxItems比原作者用品）。 该AutoAppend此控件的属性是一个很好的接触（这是开启这个例子，所以我开始自动键入当前赛后“结束”我为我的字）。 只是键入一个“I”之后：
在“夺宝”悬停我的鼠标后：
点击“夺宝”之后：
因为从这个项目的代码处理为我们的下拉选项，我们现在需要“听”，当用户从下拉列表中的项目并创建相应的新的“按钮”控件。 目前我正在为这个，我们需要处理的思维两种主要情况是。
第一种情况是当用户从他们的鼠标列表中选择一个项目。 为了解决这个问题，我们可以插入代码创建的新的“按钮”控件MouseLeftButtonUp在处理程序AutoCompleteManager.cs ，这大约是线451：
private void ListBox_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
ListBoxItem item = null;
var d = e.OriginalSource as DependencyObject;
while (d != null)
{
if (d is ListBoxItem)
{
item = d as ListBoxItem;
break;
}
d = VisualTreeHelper.GetParent(d);
}
if (item != null)
{
_popup.IsOpen = false;
UpdateText(item.Content as string, true);
// User has selected an item with the mouse...
// ** Add your new code HERE... something like:
//
// TagButton tagButton = new TagButton(_textBox.Text); // _textBox is the TextBox to which the AutoCompleteManager has been applied
// _autoCompleteTagControl.TagContainer.Add(tagButton); // _autoCompleteTagControl would be the control that we're making... it contains out other controls - I'm assuming we've passed it in or made it available.
}
}
第二种情况是当用户通过敲击回车键从列表中选择一个项目。 为了解决这个问题，我们可以在插入类似的新代码TextBox_PreviewKeyDown在处理AutoCompleteManager.cs ，围绕行291：
private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
_supressAutoAppend = e.Key == Key.Delete || e.Key == Key.Back;
if (!_popup.IsOpen)
{
return;
}
if (e.Key == Key.Enter)
{
_popup.IsOpen = false;
_textBox.SelectAll();
// User has selected an item by hitting the enter key...
// ** Add your new code HERE to create new TagButton, etc.
}
// ...
}
精细打印详细
如果你决定使用AutoCompleteTextBox从我所提到的CodeProject上，你可能需要申请一对夫妇的修正。 我遇到了两个小东西后，我进口一切都变成一个大项目时（只是运行所包含的样本项目中，他们并没有发生）。 第一个是这个绑定错误：
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'ListBoxItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
其他人都经历过这个问题，列表框，说明这里 。 至于答案是后一个建议，我可以包括我的风格来解决这个问题的HorizontalContentAligment和VerticalContentAlignment一个明确的风格设置。
发生第二个问题后AutoCompleteTextBox是一个应用程序，其中包括标签。 当你控制在一个TabControl，嵌套的控制会得到他们的Loaded事件引发经常 - 至少一次为每个包含该控件的标签被点击的时间。 这导致难以预料的额外要求AutoCompleteManager's AttachTextBox()方法，使debug.Assert()失败，发生（原作者是假设Loaded事件只会引发一次）例外。 到目前为止，唯一的解决方法，我需要做的，以处理已在AutoCompeteTextBox.cs 。 我只是增加了一个_isInitialized标志以确保AttachTextBox只被调用一次：
void AutoCompleteTextBox_Loaded(object sender, RoutedEventArgs e)
{
if (! _isInitialized)
{
_acm.AttachTextBox(this);
_isInitialized = true;
}
}
使用这种方法，应该允许您创建一个行为像你描述的控制。
文章来源: How can I create a tagging control similar to evernote in wpf?
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/aVi7V.png', '推荐 来，给爷笑一个 的文章《如何创建类似于Evernote的WPF一个标签控制？(How can I create a tagg》','https://www.manongdao.com/article-1159490.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}