Category / Section
How to highlight the entire TreeViewItemAdv row when it is selected or mouseover?
2 mins read
In TreeViewItemAdv loaded event, you can set the MouseOverBackground color for each TreeViewItemAdv using its SelectedRectangle property.
XAML
<syncfusion:TreeViewAdv x:Name="tree" ItemsSource="{Binding TreeItems}" MouseOverBackground="GreenYellow" SelectedBackground="SkyBlue" > <syncfusion:TreeViewAdv.ItemContainerStyle> <Style TargetType="{x:Type syncfusion:TreeViewItemAdv}"> <EventSetter Event="Loaded" Handler="FrameworkElement_OnLoaded"/> </Style> </syncfusion:TreeViewAdv.ItemContainerStyle> <syncfusion:TreeViewAdv.ItemTemplate> </syncfusion:TreeViewAdv>
C#
Example: private void FrameworkElement_OnLoaded(object sender, RoutedEventArgs e) { object saveitem = sender; int itemlevel = 1; for (int i = 0; i < 100; i++) { if ((sender as TreeViewItemAdv).ParentItemsControl is TreeViewAdv) { sender = saveitem; break; } else { itemlevel++; sender = (sender as TreeViewItemAdv).ParentItemsControl as TreeViewItemAdv; } } //TreeView Root Level Items //By using the VisualUtils to find the SelectedRectangle. SelectRectangle rectangle = VisualUtils.FindDescendant((sender as TreeViewItemAdv) as Visual, typeof(SelectRectangle)) as SelectRectangle; Border border = (sender as TreeViewItemAdv).Template.FindName("Bd", (sender as TreeViewItemAdv)) as Border; border.Width = (sender as TreeViewItemAdv).ActualWidth; border.Margin=new Thickness(-(rectangle.ActualWidth*itemlevel),0,0,0); border.Padding=new Thickness(rectangle.ActualWidth*itemlevel,0,0,0); Binding RootBinding = new Binding(){Source = border,Path = new PropertyPath("Background"),Mode = BindingMode.TwoWay}; rectangle.SetBinding(SelectRectangle.FillProperty, RootBinding); // TreeView SubItems foreach (var item in VisualUtils.EnumChildrenOfType(sender as TreeViewItemAdv, typeof(TreeViewItemAdv))) { SelectRectangle subrectangle = VisualUtils.FindDescendant((item as TreeViewItemAdv) as Visual, typeof(SelectRectangle)) as SelectRectangle; Border subborder = (sender as TreeViewItemAdv).Template.FindName("Bd", (item as TreeViewItemAdv)) as Border; subborder.Width = (sender as TreeViewItemAdv).ActualWidth; border.Margin = new Thickness(-(rectangle.ActualWidth * itemlevel), 0, 0, 0); border.Padding = new Thickness(rectangle.ActualWidth * itemlevel, 0, 0, 0); Binding SubBinding = new Binding() { Source = subborder, Path = new PropertyPath("Background"), Mode = BindingMode.TwoWay }; subrectangle.SetBinding(SelectRectangle.FillProperty, SubBinding); } }
The above code example explains how to set the MouseOverBackground color for each TreeViewItemAdv using its SelectedRectangle property and the screenshot is as follows.
Figure 1: MouseOverBackground color set for each TreeViewItemAdv