Button Items Event in WPF

Question

In WPF I use a Button that contains an image to select the visual styles that when pressed by the user displays items that I add by program and that for standardization are of type "System.Windows.Controls.MenuItem".

1.- I need that when the user presses MouseEnter the items execute a function "Fcn_Menu_EstiloSup_ButtonItem_MouseEnter".

2.- I also want to use a style "Sty_Estilo_Item" for the items and it is not being activated.

I have written this code but it does not work.

<Style x:Key="Sty_Estilo_Item" TargetType="{x:Type MenuItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>


<Grid x:Name="Form_Temas_Grid" Margin="0,1,3,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="42">
    <Button x:Name="Form_Temas_Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" ContextMenuService.IsEnabled="False" HorizontalAlignment="Right" Click="Fcn_AppTemas_Click">

        <Button.ContextMenu>
            <ContextMenu x:Name="Form_Temas_Menu" Style="{StaticResource Sty_Estilo_Item}" MouseEnter="Fcn_Menu_EstiloSup_ButtonItem_MouseEnter"/>
        </Button.ContextMenu>
  
        <ItemsControl>
            <Image x:Name="Form_Temas_Image" Source="{StaticResource temas}" Width="25" Height="25" Stretch="Fill" HorizontalAlignment="Left"/> 
        </ItemsControl> 
    </Button>

</Grid>

Answer 1

Hi,@zequion. Welcome to Microsoft Q&A. 

Reasons why the style cannot be bound:

When declaring the style, TargetType="{x:Type MenuItem}" specifies MenuItem, but is bound to ContextMenu.

 

Solution:Do not add x:Key, so that the style automatically applies to all MenuItem

<Style  TargetType="{x:Type MenuItem}">
                …
</Style>

 

The reason why MouseEnter cannot be executed when moving to Item:

MouseEnter is not written on Item.

 

Solution: If your Item is created using code, you could consider binding events to the Item when creating it.

int i = 1;

 

private void Fcn_AppTemas_Click(object sender, RoutedEventArgs e)

{

    MenuItem menuItem = new MenuItem();

    menuItem.Header = "Item_" + i;

    i++;

    menuItem.MouseEnter += Fcn_Menu_EstiloSup_ButtonItem_MouseEnter;

    Form_Temas_Menu.Items.Add(menuItem);

}

 

Complete Solution

    <Window.Resources>

        <Style  TargetType="{x:Type MenuItem}">

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

            <Style.Triggers>

                <Trigger Property="IsHighlighted" Value="true">

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

                </Trigger>

                <Trigger Property="IsMouseOver" Value="true">

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

                </Trigger>

            </Style.Triggers>

        </Style>

        <BitmapImage x:Key="temas" CreateOptions="IgnoreImageCache" CacheOption="OnLoad" UriSource="images/cry/form/opciones/estilos.png" />

    </Window.Resources>

    <Grid x:Name="Form_Temas_Grid" Margin="0,1,3,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="42">

        <Button x:Name="Form_Temas_Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" ContextMenuService.IsEnabled="True" HorizontalAlignment="Right" Click="Fcn_AppTemas_Click">

 

            <Button.ContextMenu>

                <ContextMenu x:Name="Form_Temas_Menu" />

            </Button.ContextMenu>

 

            <ItemsControl>

                <Image x:Name="Form_Temas_Image" Source="{StaticResource temas}" Width="25" Height="25" Stretch="Fill" HorizontalAlignment="Left"/>

            </ItemsControl>

        </Button>

 

    </Grid>

public partial class MainWindow : Window

{

    public MainWindow()

    {

        InitializeComponent();

    }

 

    int i = 1;

 

    private void Fcn_AppTemas_Click(object sender, RoutedEventArgs e)

    {

        MenuItem menuItem = new MenuItem();

        menuItem.Header = "Item_" + i;

        i++;

        menuItem.MouseEnter += Fcn_Menu_EstiloSup_ButtonItem_MouseEnter;

        Form_Temas_Menu.Items.Add(menuItem);

    }

 

    private void Fcn_Menu_EstiloSup_ButtonItem_MouseEnter(object sender, MouseEventArgs e)

    {

        MessageBox.Show("haha");

    }

}

 

In addition:

1.Your ControlTemplate only defines the Trigger, but not the MenuItem Template, which will cause the MenuItem to be displayed as empty.

2.ContextMenuService.IsEnabled="False" will cause the MenuItem to not be displayed when the right mouse button is clicked.

3.To make it more obvious, I changed the trigger's <Setter Property="Background" Value="Red"/> to <Setter Property="Foreground" Value="Red" />. You could adjust it as needed.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.