Show match like Visual Studio on filter

Grids for WPF Forum

Posted 1 month 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 1 month 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 1 month 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 1 month ago]

Posted 1 month 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 1 month 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 1 month 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 (v22.1.4) was released 25 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.