We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how you could change Background color when Pressed event

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




7 Replies

KR Kannan R Syncfusion Team November 26, 2018 12:41 PM UTC

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. 
 
 
Screenshot 
 
 
 
Please check the above solution and let us know if it is helpful. 
 
Regards, 
Kannan 



UN Unknown Syncfusion Team November 28, 2018 08:29 AM UTC

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


KR Kannan R Syncfusion Team November 30, 2018 01:07 PM UTC

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. 
 
 
Screenshot 
 
 
 
Please check the above solution and let us know if it is helpful. 
 
Regards, 
Kannan 



UN Unknown Syncfusion Team December 1, 2018 06:42 PM UTC

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


AA Arulraj A Syncfusion Team December 5, 2018 12:37 PM UTC

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. 

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. 

Arulraj A 



UN Unknown Syncfusion Team December 6, 2018 09:24 AM UTC

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 



AA Arulraj A Syncfusion Team December 12, 2018 11:39 AM UTC

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. 
 
 
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. 
 
Arulraj A 


Loader.
Live Chat Icon For mobile
Up arrow icon