在 WPF 中显示鼠标悬停在 DataGridRow 上的控件

Question

It would be very convenient to show data of a specific item only when the user hovers its row in a static DataGrid. What I tried yet is: link MouseEnter and MouseLeave events to methods that will save the Index of the currently Hovered item, create a converter that will compare if the item index is the hovered item index (if yes show, otherwise hide) , and finally call static INPC on the static DataGrid ItemSource, but it seems I am still missing something. (I'm coding in MVVM pattern but since this is strictly View-oriented I have no problem if the solution involves code-behind)

tl;dr: I wanna achieve this:

Here's the full code of what I did yet for easy testing:

• View

<Window x:Class="MouseOverDataGridRow.MainWindow" 
        [...] >

    <!-- Converter Section -->
    <Window.Resources>
        <local:HoveredRowToVisibilityConverter x:Key="HoveredRowToVisibility"/>
    </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding MyList, UpdateSourceTrigger=PropertyChanged}" AutoGenerateColumns="False" CanUserAddRows="False">

            <!-- Events Section -->
            <DataGrid.ItemContainerStyle>
                <Style TargetType="{x:Type DataGridRow}">
                    <EventSetter Event="MouseEnter" Handler="DataGridRow_MouseEnter" />
                    <EventSetter Event="MouseLeave" Handler="DataGridRow_MouseLeave" />
                </Style>
            </DataGrid.ItemContainerStyle>

            <!-- Always Visible Data -->
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <!-- On Mouse Over Only Data -->
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="Hidden Data" Visibility="{Binding Converter={StaticResource HoveredRowToVisibility}, UpdateSourceTrigger=PropertyChanged}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

        </DataGrid>
    </Grid>
</Window>

• Code-behind:

public partial class MainWindow : Window
{
    // Static INPC (maybe is the problem?)
    public static event PropertyChangedEventHandler StaticPropertyChanged;
    private static void NotifyStaticPropertyChanged([CallerMemberName] string name = null)
    {
        StaticPropertyChanged?.Invoke(null, new PropertyChangedEventArgs(name));
    }

    // Hovered Row Index
    public static int HoveredRowID { get; set; } = -1;

    // DataGrid's ItemSource
    private static ObservableCollection<int> _myList = new ObservableCollection<int>() { 1, 2, 3, 4, 5 };
    public static ObservableCollection<int> MyList
    {
        get { return _myList; }
        set { _myList = value;
            NotifyStaticPropertyChanged();
        }
    }

    // Constructor
    public MainWindow()
    {
        DataContext = this;
        InitializeComponent();            
    }        
    
    // Method that retrieves the id of the Hovered Row and calls INPC. The retrieving part is working, but the View isn't updating
    private void DataGridRow_MouseEnter(object sender, MouseEventArgs e)
    {
        DataGridRow row = (DataGridRow)sender;

        if (row.Item is int)
        {
            int item = (int)row.Item;
            HoveredRowID = MyList.IndexOf(item);
            NotifyStaticPropertyChanged("MyList");
        }

    }

    // Method that resests the Hovered Row and call INPC to hide the previously shown stuff
    private void DataGridRow_MouseLeave(object sender, MouseEventArgs e)
    {
        HoveredRowID = -1;
        NotifyStaticPropertyChanged("MyList");
    }
}

// The converter
public class HoveredRowToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is int)
        {
            int item = (int)value;

            // Check if this item is the hovered item
            if (MainWindow.MyList.IndexOf(item) == MainWindow.HoveredRowID)
                return Visibility.Visible;
            else
                return Visibility.Hidden;
        }
        else
            return Visibility.Hidden;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Answer 1

@Mitch's instructions are correct, Binding Button.Visibility To DataGridRow 's IsMouseOver is the solution. However an important detail to be able to do that is to use a DataTrigger to do the Binding, and set the default Visbility to Hidden / Collapsed . Here I used DataTemplate.Triggers but it can also be done in Button.Triggers

<DataTemplate>
    <Button x:Name="HiddenDeleteButton" Text="Delete" Visibility="Hidden" />
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True">
            <Setter Property="Visibility" TargetName="HiddenDeleteButton" Value="Visible"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Answer 2

I think you can just bind Button.Visibility to IsMouseOver on DataGridRow . I don't think there is any need to get fancy (or have anything in code behind).