Wie kann ich eine Tagging-Kontrolle ähnlich wie Evernote in WPF erstellen?
Ich mag die Kontrolle tagging in Evernote (windows-version) und Frage mich, ob es etwas ähnliches gibt? Ich habe nur in der Lage gewesen zu finden, tag-cloud-Steuerelemente.
Speziell, ich mag den freien format eingeben, wie in einem text-Feld, das sieht nach oben und stellt Intellisense-Stil-tags, die mit dem übereinstimmen, was ich geschrieben haben. Wenn ich ein tag auswählen, wird der text ersetzt durch eine Schaltfläche repräsentiert das tag mit dem text der Taste, wird der tag-text.
Update: hinzufügen von screenshots
Hinzufügen eines neuen tag -
vorhandene tags anzeigen, und klicken Sie auf 'x', um zu löschen-tag
Kommentare dem Thema
Könntest du ein paar screenshots von dem, was Sie, was Sie zu reproduzieren, und fügen Sie Sie in Frage.
InformationsquelleAutor der Frage Kevin | 2013-03-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dieser schien wie eine wirklich nette übung, also habe ich versucht, den Aufbau dieser Steuerung. Ich habe nicht testen Sie es gründlich, lassen Sie mich wissen, wenn Sie mit ihm arbeiten wollen und brauchen weitere Hilfe.
Beispiel:
ViewModel:
EvernoteTagControl:
EvernoteTagItem:
Hier ist, wie ich gehen würde, über die Schaffung dieser Kontrolle.
High-Level-Übersicht:
Dieses Steuerelement enthält die folgenden Hauptkomponenten: (1) eine
AutoCompleteTextBox
oderAutoCompleteComboBox
(2) die "button" - Steuerelement, das Sie beschreiben, (3) Eine UI Sammlung zu halten angewendet tags. DieAutoCompleteTextBox
und die Sammlung zu halten angewendet-tags positioniert werden vor der Zeit in einem layout-container Ihrer Wahl.Ersten, können wir nutzen eine
AutoCompleteTextBox
oderAutoCompleteComboBox
zu geben, uns die Intellisense-Stil-Optionen, da der Benutzer eingibt. Nächste, wir "hören" für die Benutzer-Auswahl präsentiert tag aus der drop-down-Liste dynamisch erstellen Sie eine neue "button" - Steuerelement (wir könnten ein Benutzersteuerelement erstellen/CustomControl für Sie vor der Zeit, aber wir müssten "neue" mindestens). Der "button" enthalten wird als text der text derAutoCompleteTextBox
. Schließlich, fügen wir den neuen "button" in eine ListBox (oder anderem maßgeblich UI "collection type"), hält alle aktuell verwendeten tags.Details:
Gibt es ein paar
AutoCompleteTextBox
Kontrollen gibt, aber werde ich beschreiben, wie man verwenden könnte das CodeProject one. Dieses Beispiel-Projekt zeigt, wie Sie verwenden können, entweder ein normalesTextBox
eineAutoCompleteComboBox
oderAutoCompleteTextBox
zu erreichen, werden die intellisense-Stil-Optionen. Das Kern-Stück dieses Projektes sind wirklich dieAutoCompleteManager
und einen Datenprovider, der TypIAutoCompleteDataProvider
zusammen mit denIAutoAppendDataProvider
.Vor der Beschreibung weitere details, hier einige screenshots von dieser
AutoCompleteTextBox
control in Aktion (Hinweis: ich bin mit einem anderen Stil für die ListBoxItems als der ursprüngliche Autor versorgt). DieAutoAppend
- Eigenschaft dieses Steuerelements ist eine nette Geste (es ist eingeschaltet in diesem Beispiel so, nachdem ich den Anfang des aktuellen match automatisch "endet" mein Wort für mich). Nach der Eingabe einfach nur ein "ich":Nach schweben meine Maus über "Indiana":
Nach einem Klick auf "Indiana":
Da der code aus diesem Projekt verarbeitet die drop-down-Optionen für uns, jetzt müssen wir "lauschen", wenn der Benutzer wählt ein Element aus der drop-down-Liste aus und erstellen Sie die neue "button" - Steuerelement entsprechend. Es gibt zwei wichtigsten Fälle, dass ich überlege, für diese, die wir behandeln müssen.
Ersten Fall ist, wenn der Benutzer wählt ein Element aus der Liste mit Ihrer Maus. Um dies zu umgehen, könnten wir den code einfügen zum erstellen des neuen "button" - Steuerelement in der
MouseLeftButtonUp
handler in derAutoCompleteManager.cs
, die in Zeile 451:Zweiten Fall ist, wenn der Benutzer wählt ein Element aus der Liste durch drücken der enter-Taste. Um dies zu umgehen könnten wir einfügen ähnlichen neuen code in der
TextBox_PreviewKeyDown
handler inAutoCompleteManager.cs
, um die Zeile 291:Fine-Print-Details
Wenn Sie sich entscheiden, die
AutoCompleteTextBox
von der CodeProject, dass ich bereits erwähnt, müssen Sie möglicherweise wenden Sie ein paar fixes. Ich lief in zwei kleine Dinge nach, die ich importiert alles in ein größeres Projekt (die Sie nicht passieren, wenn nur mit den mitgelieferten Beispiel-Projekt). Der erste war dieser Binding-Fehler:Andere erlebt haben, dieses problem mit Listboxen, beschrieben hier. Als eine der Antworten auf diesen Beitrag schon sagt, ich war in der Lage, eine explizite style-Einstellung für die HorizontalContentAligment und VerticalContentAlignment in meinem Stil, dieses problem zu lösen.
Das zweite Problem, das aufgetreten ist, nachdem die
AutoCompleteTextBox
war in einer app enthalten Registerkarten. Wenn Sie Steuerelemente in einem TabControl, die verschachtelten controls werden Ihre Loaded-Ereignis ausgelöst Häufig - mindestens einmal für jedes mal, dass die Registerkarte, die enthält das Steuerelement geklickt wird. Dies führte zu unerwarteten zusätzlichen Aufrufe an denAutoCompleteManager's AttachTextBox()
Methode, wodurchdebug.Assert()
Fehler und Ausnahmen auftreten (der ursprüngliche Autor war der Annahme, dass das Loaded-Ereignis würde nur angehoben werden, der einer Zeit). Bisher ist die einzige Korrektur, die ich brauchte, zu tun, zu handhaben, wurde inAutoCompeteTextBox.cs
. Ich habe gerade eine_isInitialized
Flagge, um sicherzustellen, dassAttachTextBox
wird nur einmal aufgerufen:Mit diesem Ansatz können Sie ein Steuerelement erstellen, die verhält sich wie das, was Sie beschreiben.
InformationsquelleAutor der Antwort Jason Frank