WPF Creating Custom Events

Question

I am working on a part of a menu to allow it to be re-organized by its user. This menu has a grid(4x3) with 12 elements, all of which are of the type NavButton, a class I created that extends Button. In the NavButton I have a drag feature that allows the buttons to be moved throughout the grid and currently I am working on determining where each button should land on the MouseEnter event.

In order to determine where the NavButtons should be re-positioned, I have placed thin rectangles that will brighten on MouseEnter, or so I thought that is how they should work. My issue is that as the NavButton is dragged over the rectangles the MouseEnter event will not fire as the Mouse is over the NavButton which is over the Rectangle. Sorry if that sounds confusing, but I will post code below.

All of that said, I am wondering if it is possible at all to create an event to determine when the NavButton "Enters" the Rectangle, similar to how the MouseEnter event works?

C#:

    private void rectangle_MouseEnter(object sender, MouseEventArgs e)
    {
        foreach (UIElement uie in this.grids[tabNavigation.SelectedIndex].Children)
        {
            if (uie.GetType() == typeof(NavButton_UC))
            {
                if ((uie as NavButton_UC).IsDragging)
                {
                    (sender as Rectangle).Fill = Brushes.Gray;
                }
            }
        }
    }

    private void rectangle_MouseLeave(object sender, MouseEventArgs e)
    {
        (sender as Rectangle).Fill = Brushes.Black;
    }

XAML:

             //The Style is in my ResourceDictionary
             <Style TargetType="Rectangle">
                <Setter Property="Fill" Value="Black" />
                <Setter Property="Height" Value="151" />
                <Setter Property="Width" Value="10" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Opacity" Value=".6" />
                <EventSetter Event="MouseEnter" Handler="rectangle_MouseEnter" />
                <EventSetter Event="MouseLeave" Handler="rectangle_MouseLeave" />
            </Style>
            ...
            <Grid Name="grid" Background="Black">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="22"></RowDefinition>
                </Grid.RowDefinitions>
                <Rectangle Grid.Row="0" Grid.Column="0" Name="rect00" />
                <Rectangle Grid.Row="0" Grid.Column="1" Name="rect01" />
                <Rectangle Grid.Row="0" Grid.Column="2" Name="rect02" />
                <Rectangle Grid.Row="1" Grid.Column="0" Name="rect10" />
                <Rectangle Grid.Row="1" Grid.Column="1" Name="rect11" />
                <Rectangle Grid.Row="1" Grid.Column="2" Name="rect12" />
                <Rectangle Grid.Row="2" Grid.Column="0" Name="rect20" />
                <Rectangle Grid.Row="2" Grid.Column="1" Name="rect21" />
                <Rectangle Grid.Row="2" Grid.Column="2" Name="rect22" />
                <Rectangle Grid.Row="3" Grid.Column="0" Name="rect30" />
                <Rectangle Grid.Row="3" Grid.Column="1" Name="rect31" />
                <Rectangle Grid.Row="3" Grid.Column="2" Name="rect32" />
                <TextBlock Grid.Row="5" Grid.Column="3" Name="TB" />
            </Grid>

I am fairly new to WPF, so any insight would be appreciated. Thank you.

Answer 1

It is definitely possible, but it may not be easy.

Josh Smith posted this article that includes code for implementing this with a ListView. He's created an attached property, "IsUnderDragCursor," and shows a trigger where the item under the "drag cursor" turns blue.

Obviously, you'd have to take the source and adapt it to work with your menu and NavButtons, but the principles are all there.