Simulating a mousehover effect on a fontIcon in uwp

Question

Am currently working on a uwp project involving the use of a hamburger menu. So far I generated the menu using this code

Answer 1

In addition to the solution that has been posted by @Archana to change the foreground color of the FontIcon, for changing the hamburger menu’s background color and let it to be similar to a minimize button in a windows app, we can try to add the FontIcon xaml into the Button’s content and change the Button’s background color to let it look like that we have changed the hamburger menu’s background color.

For handling the mousehover event, as you have said we need to use the PointerEnetered event. But please do not forget to handle the PointerExited event to let the hamburger menu’s background color come back to normal after we do not move the mouse over the hamburger menu .

For more information, please check my sample:

XAML code:

 
            
                
                    
                    
                
                
                    
                        
                            
                        
                    
                
                
                 //add other icon
                
            
        

CS code:

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        Button test = sender as Button;
        test.Background = new SolidColorBrush(Colors.Red);
    }

    private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        Button test = sender as Button;
       test.Background = new SolidColorBrush(Colors.Transparent);
    }

If you only want to implement it by using XAML, please right click the Button to edit the Button style and change the background color of the Button inside the PointerOver VisualState as following:

For the completed XAML code, please check:

 
    



    
            
                
                    
                    
                
                
                    
                        
                            
                        
                    
                
                
                 //add other icon
                
            
        

    

The result:

Thanks.