Data Grid rounded corners?

[BrunoDenisov]

I'm wondering if anyone has done so that only the outer corners of the data grid are rounder when using corner radius

[LaurentInSeattle]

You can easily place any visual in a border, give it rounded corners and have it clip its content.

Another way, Add CornerRadius to Image (for example):

`
public class RoundedImage : Image
{
public static readonly AttachedProperty CornerRadiusProperty =
AvaloniaProperty.RegisterAttached<RoundedImage, double>(
"CornerRadius", typeof(RoundedImage), 8);

public static void SetCornerRadius(AvaloniaObject element, double parameter)
    => element.SetValue(CornerRadiusProperty, parameter);

public static double GetCornerRadius(AvaloniaObject element)
    => element.GetValue(CornerRadiusProperty);

protected override Size MeasureOverride(Size availableSize)
{
    IImage? source = this.Source;
    if (source is not null)
    {
        Size result = 
            this.Stretch.CalculateSize(availableSize, source.Size, this.StretchDirection);
        this.Clip =
            new RectangleGeometry(
                new Rect(0, 0, result.Width, result.Height),
                RoundedImage.GetCornerRadius(this),
                RoundedImage.GetCornerRadius(this));
        return result;
    }

    return base.MeasureOverride(availableSize);
}

}
`

[msneijders]

You mean like this?

Which 'just works' was it not that ClipToBounds is not set to the border in the built-in DataGrid ControlTheme, making it look like so:

Which I fixed by doing this:

<ControlTheme
    x:Key="MyDataGrid"
    BasedOn="{StaticResource {x:Type DataGrid}}"
    TargetType="DataGrid">
    <Style Selector="^ /template/ Border#DataGridBorder">
        <Setter Property="ClipToBounds" Value="True" />
    </Style>
</ControlTheme>

<DataGrid
   CornerRadius="50"
   Theme={StaticResource MyDataGrid}
   ClipToBounds="True" <!-- but this one is not bound to the border, so not working by default -->
/>

It might be an oversight in the default DataGrid ControlTheme -- i.e. the default ControlTheme for ListBox does bind the ClipToBounds to its Border.

Other easier workaround, just surround the DataGrid with another <Border CornerRadius="50" ClipToBounds="True">.