Menu Icon change color by hovering over WPF c#

Asked

Viewed 512 times

1

Hello, I’m trying to get that when pass the mouse change color. Menu icon should be white as the letter (header) as shown in the image down below:

inserir a descrição da imagem aqui

My menu code and that

 <Menu Style="{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 Style and this next:

<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>
c# visual-studio wpf

1 answer

1


You can use the events MouseEnter and MouseLeave.

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

The MouseLeave is executed when 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;
    }

inserir a descrição da imagem aqui inserir a descrição da imagem aqui Just you adapt to your need.

Browser other questions tagged c# visual-studio wpf

You are not signed in. Login or sign up in order to post.