Show match like Visual Studio on filter

Grids for WPF Forum

Posted 2 years ago by Ethem Acar
Avatar

When you type "view" in visual studio filter textbox the results show the matches highlighted like:

https://i.ibb.co/gZtDH39/image.png

Would be nice to have.

Comments (5)

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

I did a quick test of using our AdvancedTextBlock control within the TreeListBoxFiltering QuickStart to achieve this.

First, add this new class:

using ActiproSoftware.ProductSamples.GridsSamples.Common;
using ActiproSoftware.Windows.Controls.Grids;
using ActiproSoftware.Windows.Media;
using System.Windows;

namespace ActiproSoftware.ProductSamples.GridsSamples.QuickStart.TreeListBoxFiltering {

	internal class FilteringTreeListBox : TreeListBox {

		private void RemoveCaptures(TreeListBoxItem treeListBoxItem) {
			treeListBoxItem.Tag = null;
		}

		private void UpdateAllCaptures() {
			var allTreeListBoxItems = VisualTreeHelperExtended.GetAllDescendants<TreeListBoxItem>(this);
			foreach (var treeListBoxItem in allTreeListBoxItems)
				this.UpdateCaptures(treeListBoxItem);
		}

		private void UpdateCaptures(TreeListBoxItem treeListBoxItem) {
			if (
				(this.IsFilterActive)
				&& (this.DataFilter is TreeNodeModelStringFilter filter)
				&& (treeListBoxItem.DataContext is TreeNodeModel treeNodeModel)
			) {
				var captures = filter.GetCaptures(treeNodeModel.Name, filter.Value);
				treeListBoxItem.Tag = captures;
				return;
			}

			this.RemoveCaptures(treeListBoxItem);
		}


		protected override void ClearContainerForItemOverride(DependencyObject element, object item) {
			base.ClearContainerForItemOverride(element, item);
		
			if (element is TreeListBoxItem treeListBoxItem)
				this.RemoveCaptures(treeListBoxItem);
		}

		protected override void PrepareContainerForItemOverride(DependencyObject element, object item) {
			base.PrepareContainerForItemOverride(element, item);

			if (element is TreeListBoxItem treeListBoxItem)
				this.UpdateCaptures(treeListBoxItem);
		}

		protected override void OnFilterApplied(RoutedEventArgs e) {
			base.OnFilterApplied(e);

			this.UpdateAllCaptures();
		}

	}

}

Then in MainControl.xaml, replace grids:TreeListBox with local:FilteringTreeListBox, an instance of the new control.

Finally, update the DataTemplate used in MainControl.xaml's Resources at the top:

<DataTemplate x:Key="ItemDataTemplate">
	<shared:AdvancedTextBlock Text="{Binding Name}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" 
		Captures="{Binding RelativeSource={RelativeSource AncestorType=grids:TreeListBoxItem}, Path=Tag}"
		HighlightForeground="White" HighlightBackground="RoyalBlue" HighlightFontWeight="Normal" />
</DataTemplate>

Once you do those things, you should see filtered highlights.  Please note that we also noticed a bug where the HighlightForeground is being coerced internally to be similar to the normal Foreground, even though a valid HighlightBackground is set.  We have fixed that bug for the next maintenance release.  In the meantime, you might want to avoid using a HighlightForeground that is much different from the normal Foreground.  Once the next maintenance release is out, the highlight settings above will work great.


Actipro Software Support

Posted 2 years ago by Ethem Acar
Avatar

Yup works great, sadly i have to compromise on EditableContentControl editing feature while filtering. Right now I'm checking if IsFilterActive is true to choose if I should show EditableContentControl or AdvancedTextBlock. It works great but sadly no editing allowed for the end user while filtering. I could remove EditableContentControl entirely and open a dialog when the end user wants to edit so that editing is possible in both cases. But all those things feels hacky & workarounds. The best solution would be a mix between EditableContentControl & AdvancedTextBlock controls features like an AdvancedEditableContentControl. :D

[Modified 2 years ago]

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

You might be able to achieve that.  What if you used an AdvancedTextBlock in a DataTemplate assigned to the EditableContentControl.ContentTemplate property?  It would have to bind its Text property to "{Binding}" instead.  But that might work as a hybrid.


Actipro Software Support

Posted 2 years ago by Ethem Acar
Avatar

So close yet can't get it to work. AdvancedTextBlock as a DataTemplate receives Content of EditableContentControl.
The Content is the string Name property but AdvancedTextBlock also requires Captures information to render propery.

Answer - Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

The Captures binding above does a FindAncestor so I think it would be able to crawl up the tree to still find the grids:TreeListBoxItem source.


Actipro Software Support

The latest build of this product (v24.1.3) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.