Fluent Theme CornerRadius

[robert-abeo]

In the new, unreleased Fluent theme based on WPF UI, what is the correct way to set the corner radius? These are set in the styles using a Border.CornerRadius attached property. That works well enough in the ControlTemplate, but what about when I want to set this in a view?

For example if I have a TextBox as below and try to set it, it will fail.

<TextBox Border.CornerRadius="0,4,4,0" />

I can set this through a style but it's really cumbersome to do so. ModernWPF added a separate attached property for this case ControlHelper.CornerRadius. I think we might need something similar in WPF... however, we should just add CornerRadius to the controls directly now. That change isn't monumental and was done in Avalonia UI in a fairly straightforward way:

AvaloniaUI/Avalonia#6347

[lindexi]

Keeping this be open until the Win11 Theme Stylus finish. And I'm worried this feature is still missing.

[robert-abeo]

@dipeshmsft @singhashish-wpf @himgoyalmicro

I see you on most of the Fluent theme PRs so am including all of you. Could you please comment on viability for the below solution? Something is required before Fluent is considered stable and this seems to be the best compromise (if you don't want to invest in adding CornerRadius to all controls).

---

Internally, the best solution found is to use the ModernWPF approach. ModernWPF created an attached property and then just uses that in all controls. Again, Border.CornerRadius does not work in most cases outside default control styles. The attached property approach works everywhere as expected.

Since we already have some Fluent.Controls namespace classes for converters I think it can go there nicely:

// Based on Modern WPF. Licensed under the MIT License. https://github.com/Kinnara/ModernWpf
// Auto-generate tag is used to disable code analyzers for imported classes.
// <auto-generated />

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Fluent.Controls
{
    public static class ControlHelper
    {
        /// <summary>
        /// Gets the radius for the corners of the control's border.
        /// </summary>
        /// <param name="control">The element from which to read the property value.</param>
        /// <returns>
        /// The degree to which the corners are rounded, expressed as values of the CornerRadius
        /// structure.
        /// </returns>
        public static CornerRadius GetCornerRadius(Control control)
        {
            return (CornerRadius)control.GetValue(CornerRadiusProperty);
        }

        /// <summary>
        /// Sets the radius for the corners of the control's border.
        /// </summary>
        /// <param name="control">The element on which to set the attached property.</param>
        /// <param name="value">The property value to set.</param>
        public static void SetCornerRadius(Control control, CornerRadius value)
        {
            control.SetValue(CornerRadiusProperty, value);
        }

        /// <summary>
        /// Identifies the CornerRadius dependency property.
        /// </summary>
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.RegisterAttached(
                "CornerRadius",
                typeof(CornerRadius),
                typeof(ControlHelper),
                null);
    }
}

Then in control styles:

    <Style
        x:Key="DefaultButtonStyle"
        TargetType="{x:Type ButtonBase}">
        <Setter Property="fluentControls:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type ButtonBase}">
                    <Border
                        x:Name="ContentBorder"
                        CornerRadius="{TemplateBinding m:ControlHelper.CornerRadius}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Everywhere in applications corner radius can then be set as expected:

    <TextBox fluentControls:ControlHelper.CornerRadius="4,0,0,4" />