0

I have the code to display rounded corners to the DataGrid. My problem is that it is not displaying rounded corners at the bottom of the DataGrid. How to make it rounded?

This is how it looks now

This is the code I am trying.

<Border BorderThickness="0" Margin="10" CornerRadius="15" Visibility="Hidden" x:Name="brdLiveData" Height="300">
    <Border.BitmapEffect>
        <DropShadowBitmapEffect />
    </Border.BitmapEffect>
    <Grid>
        <Border x:Name="BDRounded" BorderThickness="0" CornerRadius="15" Background="White"/>
        <DataGrid x:Name="dgRound" BorderBrush="{x:Null}" HeadersVisibility="Column" ItemsSource="{Binding Items}" AutoGenerateColumns="False">
            <DataGrid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=BDRounded}"/>
            </DataGrid.OpacityMask>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Label" Binding="{Binding Label}" Width="*" ElementStyle="{StaticResource WrapText}"/>
                <DataGridTextColumn Header="Parameter Name" Binding="{Binding ParameterName}" Width="*" ElementStyle="{StaticResource WrapText}"/>
                <DataGridTextColumn Header="Range" Binding="{Binding Range}" Width="*" ElementStyle="{StaticResource WrapText}"/>
                <DataGridTextColumn Header="Values" Binding="{Binding Value}" Width="*" ElementStyle="{StaticResource WrapText}"/>
                <DataGridTextColumn Header="Unit" Binding="{Binding Unit}" Width="*" ElementStyle="{StaticResource WrapText}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Border>

Edit 1: I checked the borders @jonskeet, this is how it looks after highlighting the borders.

Image after highlighting the borders

5
  • You have the DataGrid and the inner Border as peer elements. Have you tried nesting the DataGrid as content within the Border? I suspect you don't need the Grid at all. It's not clear why you've got an outer Border as well, or whether that's relevant to the question. Commented Nov 4 at 7:45
  • In general, as there are multiple borders involved, I'd suggest changing all the borders to have a thickness of 2 and make them solid (different) colors so you can see which border is doing what. Commented Nov 4 at 7:46
  • @JonSkeet I have updated the question with your second suggestion, about highlighting borders. Commented Nov 4 at 10:21
  • Issues with your idea: left- and right-most column header text is cut, bottom row will have data cut in first/last cell and scrollbar's scroll down button will be cut. It's just not worth it to attempt to make all this looking nice. I'd just add margin to the child of border. Though it's a matter of design, do you really need a border here? In "flat" design you don't make borders around each control. Too many shadow are also poor design. Shadows are ok for popup-like control, but permanently sitting control with shadow is meh. Commented Nov 4 at 10:54
  • Your "border pattern" is a "code smell". Get rid of the "OpacityMask"; "hard code" BorderThickness (for starters); don't specify Height on a Border (constrain the child of the Border; or the parent of the Border; not the border; add a botton Border Padding or child bottom Margin if still no luck (which I doubt)). Commented Nov 4 at 15:42

1 Answer 1

1

It seems that the DataGrid's horizontal ScrollBar does not work well with the OpacityMask when the window is resized.

You may simply disable it:

<DataGrid x:Name="dgRound" ...
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">

In order to avoid confusion with the nested Borders (e.g. why the inner one has no child element), you may as well use a Rectangle:

<Rectangle x:Name="BDRounded" RadiusX="15" RadiusY="15" Fill="White"/>

A completely different way to create rounded corners on an arbitrary UI element is to set its Clip property to a RectangleGeometry with appropriate RadiusX and RadiusY value.

This could be done by an attached property which could be applied to any FrameworkElement or instances of derived classes. Its code would look like this:

public static class ClipHelper
{
    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.RegisterAttached(
            "CornerRadius", typeof(double), typeof(ClipHelper),
            new PropertyMetadata(double.NaN, CornerRadiusChanged));

    public static double GetCornerRadius(FrameworkElement element)
    {
        return (double)element.GetValue(CornerRadiusProperty);
    }

    public static void SetCornerRadius(FrameworkElement element, double value)
    {
        element.SetValue(CornerRadiusProperty, value);
    }

    private static void CornerRadiusChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = (FrameworkElement)d;

        if (!double.IsNaN((double)e.OldValue))
        {
            element.SizeChanged -= OnSizeChanged;
        }

        if (!double.IsNaN((double)e.NewValue))
        {
            element.SizeChanged += OnSizeChanged;
            SetClipGeometry(element);
        }
        else
        {
            element.ClearValue(UIElement.ClipProperty);
        }
    }

    private static void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        SetClipGeometry((FrameworkElement)sender);
    }

    private static void SetClipGeometry(FrameworkElement element)
    {
        var radius = GetCornerRadius(element);

        element.Clip = new RectangleGeometry(
            new Rect(element.RenderSize), radius, radius);
    }
}

It would be applied like shown below, where the XAML namespace prefix local: might be adjusted to whatever namespace you put the ClipHelper class into. You would also not need to disable the horizontal ScrollBar.

<Grid local:ClipHelper.CornerRadius="15">
    <DataGrid x:Name="dgRound" ...>
        ...
    </DataGrid>
</Grid>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.