how you could change Background color when Pressed event

[Unknown]

hi i am trying to style sftreenavigator like you see in images below but I have one problem , how I could change background of  itemshost when pressed take event i can change background of header item but i can't  change background of whole panel inside it how I could achieve this 

Normal State 

https://ibb.co/JCKb6Kt

Pressed Event 

https://ibb.co/3R3794y

[Kannan R]

Hi Ahmed, 

 

Thank you for contacting Syncfusion Support. 

 

We have tried to achieve your requirement by setting the Background color to the SfTreeNavigatorItem in the SelectionChanged event. Please make use of the below code snippet. 

 

Code snippet [XAML] 

 

<navigation:SfTreeNavigator Header="EssentialStudio" NavigationMode="Extended" SelectionChanged="SfTreeNavigator_SelectionChanged"> 

 

MainWindow.cs 

 

/// <summary> 

/// Invoked when selection changed. 

/// </summary> 

private void SfTreeNavigator_SelectionChanged(object sender, SelectionChangedEventArgs e) 

{ 

    SfTreeNavigator sftree = (sender as SfTreeNavigator); 

     

    if (((sender as SfTreeNavigator).SelectedItem as SfTreeNavigatorItem).HasItems) 

       { 

           foreach (SfTreeNavigatorItem item in (sftree.SelectedItem as SfTreeNavigatorItem).Items) 

           { 

                item.Background = new SolidColorBrush(Colors.Red); 

           } 

       } 

} 

 

Please make use of the below sample for your reference. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141116/ze/SfTreeNavigatorWPF238974139.zip  

 

Screenshot 

 

 

 

Please check the above solution and let us know if it is helpful. 

 

Regards, 

Kannan 

[Unknown]

hi thank you for your reply , I am sorry but that not work because I had to mention that I amn't using your way for addding data to navigationitem I using HierarchicalDataTemplate.ItemTemplate

see images below please 

your way ddin't works for me 

https://ibb.co/920hC6D

https://ibb.co/mD1Sk8m

[Kannan R]

Hi Ahmed, 

 

Thank you for your update. 

 

We can achieve your requirement by editing the style of the SfTreeNavigatorItem and setting the Background of the unselectedItem. Please make use of the below code example. 

 

Code example[XAML] 

 

 

<SolidColorBrush x:Key="SelectedBackground" Color="Green"/> 

<SolidColorBrush x:Key="UnSelectedItemBackground" Color="Red"/> 

<SolidColorBrush x:Key="SelectedHeaderBackground" Color="Green"/> 

 

<Style TargetType="navigation:SfTreeNavigatorItem"> 

      <Setter Property="BorderThickness" Value="0 0 0 0"/> 

      <Setter Property="BorderBrush" Value="#5D5D5D"/> 

      <Setter Property="Height" Value="40"/> 

      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 

      <Setter Property="VerticalContentAlignment" Value="Center"/> 

      <Setter Property="Padding" Value="2"/> 

      <Setter Property="Template"> 

           <Setter.Value> 

               <ControlTemplate TargetType="navigation:SfTreeNavigatorItem"> 

                   <Border Background="{StaticResource UnSelectedItemBackground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 

<VisualStateManager.VisualStateGroups> 

      <VisualStateGroup x:Name="SelectionStates"> 

 

 

Please make use of the below sample for your reference. 

 

Sample:  SfTreeNavigator_UnSelectedItemBG  

 

Screenshot 

 

 

 

Please check the above solution and let us know if it is helpful. 

 

Regards, 

Kannan 

[Unknown]

Brother you didn't understand what I want , I want color of navigatelitems to change when i pressed look to image to understand me 

https://ibb.co/3kwBb8s

[Arulraj A]

Hi Ahmed 

Thank you for the Update. 

We have understood that your requirement is to turn the SfTreeNavigatorItem color to Blue on pressed and Red on navigate back to main menu. We have modified the sample to meet your requirement. 

Sample: http://www.syncfusion.com/downloads/support/forum/141116/ze/TreeNavigator_Modified1608839356 

Screenshot shows the Blue color on Item pressed in SfTreeNavigatorItems. 

 

Screenshot shows the Item retained to red on navigating back to MainMenu. 

 

Let us know whether this helps also if you need any further assistance on this. 

Regards, 

Arulraj A 

[Unknown]

hi thank you for your reply , but brother you still didn't understand my requirements I don't need a hover or pressed effect button i want to background navigationitem to change after pressed a button looks to my image for further helps 

https://ibb.co/HhYY88s

https://ibb.co/1sV815G

so effect that I want is background of  navigationitemhost is red like you saw in my picture when I click button the itemlisthost background change to blue when I return to main menu the background color return to Red 

thank you 

[Arulraj A]

Hi Ahmed, 

 

Thanks for your reply. 

 

Based on your screenshots, we have understood that you need to change the background color of the SfTreeNavigatorItem as red and to blue when navigate to child items and header color needs to be green. If so, then we have modified the sample by modifying the background color of SfTreeNavigatorItem and SfTreeNavigatorHeaderItem and it can be downloaded from below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141116/ze/SfTreeNavigator_modified1603530829  

 

Code snippet: 

  <!--Background color of TreeNavigatorItems host--> 

   <Setter Property="Background" Value="Red"/> 

 <!--HeaderItem Backgroud color--> 

   <Setter Property="Background" Value="Green"/> 

 

//Color which applies to child item after navigation 

   if (((sender as SfTreeNavigator).SelectedItem as SfTreeNavigatorItem).HasItems) 

    { 

       foreach (SfTreeNavigatorItem item in (sftree.SelectedItem as SfTreeNavigatorItem).Items) 

        { 

           item.Background = new SolidColorBrush(Colors.DeepSkyBlue); 

        } 

    } 

 

Let us know whether this helps also if you need any further assistance on this. 

 

Regards, 

Arulraj A