DataGrid mouse hover event on every cell except headers and groups

[ZenwalkerD]

Dear Team,

I am very new to Avalonia, and so far i am enjoying developing a small app for learning.

The app looks something like this:

As you can see in the image, i am able to populate the DataGrid and also able to embed custom controls inside some cell of a column.

Problems/Help:

1. I do not know why; but it adds an empty last column though in the xaml code its not at all there. Neither in the code behind. The source code is shared below
2. I want to attach 1 cell hover event handler for all the cells in the data grid; but the PointerEntered event (https://api-docs.avaloniaui.net/docs/E_Avalonia_Input_InputElement_PointerEntered) available on DataGrid does not help much to identify which cell the mouse was hovered on and which row and column it belongs to.
3. In continuation with point 2; when the mouse is hovered onto a cell i want to place an edit button on top right corner of the same cell and when mouse hover exits, i want to hide this button, as shown below.
   When this icon button is clicked by user; i wish to pass the row and column and cell data/index to handler.

I have been studying the https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_DataGrid document as well as searched google. No luck to any above.

Source:
XAML:

<DataGrid Name="licenseTypesDataGrid"
                                  Grid.Row="1"
                                  Grid.Column="0"
                                  Margin="6"
                                  AutoGenerateColumns="False"
                                  BorderBrush="Gray"
                                  BorderThickness="1"
                                  CanUserResizeColumns="True"
                                  ColumnWidth="Auto"
                                  GridLinesVisibility="All"
                                  HorizontalGridLinesBrush="Gray"
                                  HorizontalScrollBarVisibility="Auto"
                                  ItemsSource="{Binding FlattenedCatalogLicenses}"
                                  VerticalGridLinesBrush="Gray"
                                  VerticalScrollBarVisibility="Auto"
                                  PointerEntered="DataGrid_PointerEntered"
                                  
                                  >
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="{Binding Version}" Header="Version" />
                                <DataGridTextColumn Binding="{Binding Description}" Header="Description" />
                                <DataGridTextColumn Binding="{Binding ID}" Header="Id" />
                                <DataGridTextColumn Binding="{Binding Visible}" Header="Visible" />
                                <DataGridTextColumn Binding="{Binding Group}" Header="Group" />
                                <DataGridTextColumn Binding="{Binding Quantity}" Header="Quantity" />
                                <DataGridTextColumn Binding="{Binding Sequence}" Header="Sequence" />
                                <DataGridTextColumn Binding="{Binding Unit}" Header="Unit" />
                                <DataGridTemplateColumn Header="Device Types">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ListBox ItemsSource="{Binding DeviceTypes}" ScrollViewer.VerticalScrollBarVisibility="Auto" />
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTextColumn Binding="{Binding ID}" Header="ID" />

                                <!--  Dynamic Dictionary Column  -->
                                <DataGridTemplateColumn Header="Device Specific">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <DataGrid Name="deviceSpecificDataGrid"
                                                      Margin="6"
                                                      AutoGenerateColumns="False"
                                                      CanUserResizeColumns="True"
                                                      GridLinesVisibility="All"
                                                      ItemsSource="{Binding DeviceSpecific}">
                                                <DataGrid.Columns>
                                                    <DataGridTextColumn Binding="{Binding Key}" Header="Device Type" />
                                                    <DataGridTextColumn Binding="{Binding Value.AllowedInstances}" Header="AllowedInstances" />
                                                    <DataGridTextColumn Binding="{Binding Value.FunctionPoints}" Header="FunctionPoints" />
                                                </DataGrid.Columns>
                                            </DataGrid>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                            </DataGrid.Columns>
                        </DataGrid>

Kindly please help.

Thanks

[timunie]

For the hover design, please consider to use Styles or ControlThemes for DataGridCell. All interactive controls have a pseudoclass :pointerover for this state. Lookup docs about styles for details.

The empty column is expected, it fills up the remaining space. The empty first column is there if you have grouping enabled. That's by design to add the needed indention.

The button you mentioned could be part of the style mentioned above. You need to copy the entire control template from original style and add a button there, which is hidden. On the pointer over, set its visibility to true.

[ZenwalkerD]

Thank you for your response.

For the hover design, please consider to use Styles or ControlThemes for DataGridCell. All interactive controls have a pseudoclass :pointerover for this state. Lookup docs about styles for details.

pointerover worked for styling/customization. Thank you for this. Wish the documentation was much better.

The empty column is expected, it fills up the remaining space. The empty first column is there if you have grouping enabled. That's by design to add the needed indention.

The first empty column is not an issue. But my concern is the last one.

The button you mentioned could be part of the style mentioned above. You need to copy the entire control template from original style and add a button there, which is hidden. On the pointer over, set its visibility to true.

Sorry i need more help here.
Not sure if i understood your statement correct. But to make it clear, I wont be able to copy the entire control template from original style of the cell because each and every cell has different template and i want this edit button on pointerover on each cell...
Basically i want to draw this button on top of the cell, in other words the edit button would be a layer on top of the cell background.. in web language, we use zindex to overlay right.. similarly.

If you could share a document or a pseudocode for this, much appreciated.
Thanks

[ZenwalkerD]

UPDATE:

I am able to figure out a bit as shown below from a code POV:

<Style Selector="DataGrid#licenseTypesDataGrid DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <!--  Inherit the original DataGridCell template content  -->
                            <ContentPresenter />
                            <!--  Overlay Edit button, hidden by default  -->
                            <!-- <Button Name="licenseTypeDataGridCellEditButton"
                                    Width="60"
                                    Height="22"
                                    Margin="2"
                                    Padding="2,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Background="Red"
                                    Content="Edit"
                                    FontSize="12"
                                    IsVisible="False"
                                    ZIndex="1" /> -->
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>           
        </Style>

        <Style Selector="DataGrid#licenseTypesDataGrid DataGridCell:pointerover Button#licenseTypeDataGridCellEditButton">
            <Setter Property="IsVisible" Value="True" />
        </Style>

However the problem has not solved... The ContentPresenter is not inheriting everything from original cell content and on top of that i am adding a button with visibility false.
But this is not working as expected. May be my understanding is wrong.
But i wonder why ContentPresenter is not inheriting? What should i do to inherit?

Thanks

[timunie]

ContentPresenter should use TemplateBinding to Content And ContentTemplate I think, also for DataGridCell.

The nested selector is missing the /template/ bit I guess

    <Style Selector="DataGrid#licenseTypesDataGrid DataGridCell:pointerover /template/ Button#licenseTypeDataGridCellEditButton">
        <Setter Property="IsVisible" Value="True" />
    </Style>

[ZenwalkerD]

/template/

Sorry i did not understand.

The selector changes you proposed anyway sets only the visible to true.

But i am having problem with this part:

<Style Selector="DataGrid#licenseTypesDataGrid DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <!--  Inherit the original DataGridCell template content  -->
                            <ContentPresenter />
                            <!--  Overlay Edit button, hidden by default  -->
                            <!-- <Button Name="licenseTypeDataGridCellEditButton"
                                    Width="60"
                                    Height="22"
                                    Margin="2"
                                    Padding="2,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Background="Red"
                                    Content="Edit"
                                    FontSize="12"
                                    IsVisible="False"
                                    ZIndex="1" /> 
                             -->
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>           
        </Style>

Above code is creating problem and making the table empty. I commented the Button section, still the table issue not resolved.
I wonder how to do this?

Thanks