CODEWITHSUNDEEP
c#wpfdatagrid
Lauraducky
Lauraducky

Reputation: 672

Overlay on Top of DataGrid Content

I have a DataGrid which users can drag and drop files into for them to be imported into the program. I wanted to add some user feedback for when this is happening, so I have put an overlay over the DataGrid when the user drags and drops. The current look of the overlay is this:

My overlay in action

I don't like the way the overlay goes over the top of the DataGrid header. If possible, I'd like to confine the overlay to the content only. Does anyone know of some way I could do this? I know I could hard code the height of the header or perhaps create a custom control but the more lightweight/unobtrusive the solution the better in my opinion. Here's a diagram of what I want in case it wasn't clear:

Diagram of desired result

More information: In my current implementation I simply have both the DataGrid and the overlay inside a Grid, and turn the opacity of the overlay on and off as needed. The skinny rectangle under my DataGrid is a loading bar. I'd prefer the overlay not to go over that either, although it doesn't in the current implementation so I don't think that's an issue.

Edit: Here's how I ended up solving it, it's pretty quick and dirty but it works.

private void UserControl_Loaded(object sender, RoutedEventArgs e) {
    var header = WPFHelper.FindVisualChild<DataGridColumnHeadersPresenter>(FilesDataGrid);
    // Include outside border in margin
    var border = FilesDataGrid.BorderThickness;
    Thickness margin = new Thickness(border.Left, border.Top, border.Right, border.Bottom);
    margin.Top += header.ActualHeight;

    OverlayGrid.Margin = margin;
}

Upvotes: 0

Views: 908

Answers (1)

mm8
mm8

Reputation: 169200

There is nothing more "lightweight/unobtrusive" than setting the top-margin of the overlay element to the actual height of the header. So if you don't want to overcomplicate things, you could just set the Margin to a hardcoded value of 23.96:

<Grid>
    <DataGrid>
        <DataGrid.Columns>
            <DataGridTextColumn Header="..." Binding="{Binding}" />
        </DataGrid.Columns>
    </DataGrid>
    <Border Background="Silver" Opacity="0.5" Margin="0 23.96 0 0" />
</Grid>

The more flexible solution would be to write a behaviour that finds the DataGridColumnHeadersPresenter in the visual tree and set the top-margin of the overlay element to its ActualHeight.

Upvotes: 1

Related Questions