Menu Icon change color by hovering the mouse on top WPF C #

1

Hello, I'm trying to make when changing the mouse to change the color. The Menu Icon should be white as the letter (header) as shown in the image below:

Mymenucodeis

<MenuStyle="{DynamicResource StandardClienteMenu}"  VerticalAlignment="Top" Height="50">
                        <MenuItem x:Name="MenuItemUsuario" Style="{DynamicResource StandardMenuClienteItem}"  Header="Usuario"  >
                            <MenuItem.Icon >
                                <fa:ImageAwesome Width="14" Height="14" VerticalAlignment="Center" Icon="User" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=MenuItem}}"/>
                            </MenuItem.Icon>
                                <MenuItem x:Name="Paramentros" Header="Parâmetros da empresa" Click="MenuParametros_Click" Style="{DynamicResource StandardMenuClienteItem}" >
                                    <MenuItem.Icon >
                                        <fa:ImageAwesome Width="14" Height="14"  VerticalAlignment="Center" Icon="Cogs" Foreground="{Binding Foreground, ElementName=Paramentros}" />
                                    </MenuItem.Icon>
                                </MenuItem>
                     </MenuItem>
                </Menu>

And the Style is this:

                               

<Style x:Key="StandardMenuClienteItem" TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
    <Setter Property="Foreground" Value="{DynamicResource BlueBrush}" />
    <Setter Property="Height" Value="40"   />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <!--  Border 1  -->
                <Border x:Name="Border"
                        Background="Transparent"
                        BorderBrush="Transparent"

                        BorderThickness="0"
                        SnapsToDevicePixels="False">
                    <Grid x:Name="Grid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="Col0"
                                              Width="Auto"
                                              MinWidth="17"
                                              SharedSizeGroup="MenuItemIconColumnGroup" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
                            <ColumnDefinition x:Name="Col3" Width="14" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="Icon"
                                          Margin="7 1 5 1"
                                          Grid.Column="0"
                                          Visibility="Visible"
                                          VerticalAlignment="Center"
                                          ContentSource="Icon" 
                                           />
                        <ContentPresenter x:Name="HeaderHost"
                                          Grid.Column="1"
                                          Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="Center"
                                          ContentSource="Header"
                                          RecognizesAccessKey="True" />
                        <ContentPresenter x:Name="IGTHost"
                                          Grid.Column="2"
                                          Margin="5 1 5 1"
                                          VerticalAlignment="Center"
                                          ContentSource="InputGestureText" />
                        <Grid x:Name="ArrowPanel"
                              Grid.Column="3"
                              Margin="2 0 6 0"
                              VerticalAlignment="Center">
                            <Path x:Name="ArrowPanelPath"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Center"
                                  Data="M0,0 L0,8 L4,4 z"
                                  Fill="{TemplateBinding Foreground}" />
                        </Grid>
                        <Popup x:Name="SubMenuPopup"
                               AllowsTransparency="True"
                               Focusable="false"
                               HorizontalOffset="-1"
                               Cursor="Hand"
                               IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               Placement="Right"
                               PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                            <Grid Margin="0 0 5 5">
                                <!--  Border 2  -->
                                <Border x:Name="SubMenuBorder"
                                         Cursor="Hand"
                                        Background="Transparent"
                                        BorderBrush="Transparent"
                                        BorderThickness="0"
                                        SnapsToDevicePixels="True">
                                    <Grid x:Name="SubMenu"
                                          Margin="2"
                                          Grid.IsSharedSizeScope="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                    </Grid>
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="2" Color="Black" />
                                    </Border.Effect>
                                </Border>
                                <!--  Border 3  -->
                                <Border x:Name="TransitionBorder"
                                        Width="0"
                                        Height="2"
                                        Margin="1 0 0 0"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top"
                                        Background="{DynamicResource SubmenuclienteItemBackgroundHighlighted}"
                                        BorderBrush="{DynamicResource SubmenuItemClienteBackgroundHighlighted}"
                                        BorderThickness="0"
                                         Cursor="Hand"
                                        SnapsToDevicePixels="False" />
                            </Grid>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Role" Value="TopLevelHeader">
                        <Setter Property="Padding" Value="6 0 6 2" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Col0" Property="MinWidth" Value="0" />
                        <Setter TargetName="Col3" Property="Width" Value="Auto" />
                        <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Icon" Property="Visibility" Value="Visible" />
                        <Setter TargetName="SubMenu" Property="Margin" Value="2 3 2 2" />
                        <Setter TargetName="SubMenuBorder" Property="BorderThickness" Value="1 1 1 1" />
                        <Setter TargetName="SubMenuPopup" Property="Placement" Value="Bottom" />
                        <Setter TargetName="TransitionBorder" Property="Width" Value="{Binding ActualWidth, ElementName=Grid}" />

                    </Trigger>
                    <Trigger Property="Role" Value="TopLevelItem">
                        <Setter Property="Padding" Value="6 0 6 2" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Col0" Property="MinWidth" Value="0" />
                        <Setter TargetName="Col3" Property="Width" Value="Auto" />
                        <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />

                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuHeader">
                        <Setter Property="DockPanel.Dock" Value="Top" />
                        <Setter Property="Padding" Value="10 3 0 3" />
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter TargetName="Border" Property="MinHeight" Value="22" />

                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuItem">
                        <Setter Property="DockPanel.Dock" Value="Top" />
                        <Setter Property="Padding" Value="10 3 0 3" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemClienteBackground}" />
                        <Setter TargetName="Border" Property="MinHeight" Value="22" />
                        <Setter Property="Foreground" Value="{DynamicResource BlueWebBrush}" />

                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="TopLevelHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter TargetName="Border" Property="CornerRadius" Value="5,5,5,5" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="TopLevelItem" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="SubmenuHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter TargetName="Border" Property="CornerRadius" Value="5,5,5,5" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="SubmenuItem" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSubmenuOpen" Value="true" />
                            <Condition Property="Role" Value="TopLevelHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource RedBrush}" />
                        <Setter TargetName="Border" Property="CornerRadius" Value="5,5,5,5" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <Trigger Property="IsSubmenuOpen" Value="true">
                        <Setter TargetName="ArrowPanelPath" Property="Fill" Value="{DynamicResource BackgroundSelected}" />
                    </Trigger>
                    <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                        <Setter TargetName="SubMenuPopup" Property="PopupAnimation" Value="None" />
                    </Trigger>
                    <Trigger Property="Icon" Value="{x:Null}">
                        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
                                             </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource MenuDisabledForeground}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ItemContainerStyleCliente" TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
    <Setter Property="Foreground" Value="{DynamicResource BlueWebBrush}" />
    <Setter Property="Height" Value="40"   />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <!--  Border 1  -->
                <Border x:Name="Border"
                        Background="Transparent"
                        BorderBrush="Transparent"
                        BorderThickness="0"
                        SnapsToDevicePixels="False">
                    <Grid x:Name="Grid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="Col0"
                                              Width="Auto"
                                              MinWidth="17"
                                              SharedSizeGroup="MenuItemIconColumnGroup" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
                            <ColumnDefinition x:Name="Col3" Width="14" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="Icon"
                                          Grid.Column="0"
                                          VerticalAlignment="Center"
                                          ContentSource="Icon" />
                        <ContentPresenter x:Name="HeaderHost"
                                          Grid.Column="1"
                                          Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="Center"
                                          ContentSource="Header"
                                          RecognizesAccessKey="True" />
                        <ContentPresenter x:Name="IGTHost"
                                          Grid.Column="2"
                                          Margin="8 1 8 1"
                                          VerticalAlignment="Center"
                                          ContentSource="InputGestureText" />
                        <Grid x:Name="ArrowPanel"
                              Grid.Column="3"
                              Margin="4 0 6 0"
                              VerticalAlignment="Center">
                            <Path x:Name="ArrowPanelPath"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Center"
                                  Data="M0,0 L0,8 L4,4 z"
                                  Fill="{TemplateBinding Foreground}" />
                        </Grid>
                        <Popup x:Name="SubMenuPopup"
                               AllowsTransparency="True"
                               Focusable="false"
                               HorizontalOffset="0"
                               IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               Placement="Right"
                               PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                            <Grid Margin="0 0 5 5">
                                <!--  Border 2  -->
                                <Border x:Name="SubMenuBorder"
                                        Background="{DynamicResource SubmenuclienteItemBackgroundHighlighted}"
                                        BorderBrush="Transparent"
                                        BorderThickness="0"
                                        SnapsToDevicePixels="True">
                                    <Grid x:Name="SubMenu"
                                          Margin="2"
                                          Grid.IsSharedSizeScope="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                    </Grid>
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="2" Color="Black" />
                                    </Border.Effect>
                                </Border>
                                <!--  Border 3  -->
                                <Border x:Name="TransitionBorder"
                                        Width="0"
                                        Height="2"
                                        Margin="1 0 0 0"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top"
                                        Background="{DynamicResource SubmenuclienteItemBackgroundHighlighted}"
                                        BorderBrush="Transparent"
                                        BorderThickness="0"
                                        SnapsToDevicePixels="False" />
                            </Grid>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Role" Value="TopLevelHeader">
                        <Setter Property="Padding" Value="6 0 6 2" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Col0" Property="MinWidth" Value="0" />
                        <Setter TargetName="Col3" Property="Width" Value="Auto" />
                        <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="SubMenu" Property="Margin" Value="2 3 2 2" />
                        <Setter TargetName="SubMenuBorder" Property="BorderThickness" Value="1 1 1 1" />
                        <Setter TargetName="SubMenuPopup" Property="Placement" Value="Bottom" />
                        <Setter TargetName="TransitionBorder" Property="Width" Value="{Binding ActualWidth, ElementName=Grid}" />

                    </Trigger>
                    <Trigger Property="Role" Value="TopLevelItem">
                        <Setter Property="Padding" Value="6 0 6 2" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Col0" Property="MinWidth" Value="0" />
                        <Setter TargetName="Col3" Property="Width" Value="Auto" />
                        <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />

                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuHeader">
                        <Setter Property="DockPanel.Dock" Value="Top" />
                        <Setter Property="Padding" Value="10 3 0 3" />
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuclienteItemBackgroundHighlighted}" />
                        <Setter TargetName="Border" Property="MinHeight" Value="22" />


                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuItem">
                        <Setter Property="DockPanel.Dock" Value="Top" />
                        <Setter Property="Padding" Value="10 3 0 3" />
                        <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed" />

                        <Setter TargetName="Border" Property="MinHeight" Value="22" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="TopLevelHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuClienteItemRedlightedBackground}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="TopLevelItem" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuClienteItemRedlightedBackground}" />

                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="SubmenuHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuClienteItemRedlightedBackground}" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsHighlighted" Value="true" />
                            <Condition Property="Role" Value="SubmenuItem" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSubmenuOpen" Value="true" />
                            <Condition Property="Role" Value="TopLevelHeader" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource SubmenuclienteItemBackgroundHighlighted}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource MenuSeparatorBorderBrush}" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1 1 1 1" />
                        <Setter  Property="Foreground" Value="{StaticResource WhiteBrush}" />
                    </MultiTrigger>
                    <Trigger Property="IsSubmenuOpen" Value="true">
                        <Setter TargetName="ArrowPanelPath" Property="Fill" Value="{DynamicResource BackgroundSelected}" />

                    </Trigger>
                    <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                        <Setter TargetName="SubMenuPopup" Property="PopupAnimation" Value="None" />
                    </Trigger>
                    <Trigger Property="Icon" Value="{x:Null}">
                        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource SubmenuItemBackgroundHighlighted}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    
asked by anonymous 05.09.2018 / 15:12

1 answer

1

You can use events MouseEnter and MouseLeave .

The MouseEnter is executed the moment you place the cursor over the element (hover).

The MouseLeave is executed the moment the cursor exits the element.

Example below simulating the background change in a grid:

private void Grid_MouseEnter(object sender, MouseEventArgs e)
    {
        Grid grid = sender as Grid;
        grid.Background = Brushes.Gray;
    }

    private void Grid_MouseLeave(object sender, MouseEventArgs e)
    {
        Grid grid = sender as Grid;
        grid.Background = Brushes.LightGray;
    }

Just adapt it to your need.

    
05.09.2018 / 15:19