WPF Border Object Border CornerRadius diferente de Border Background CornerRadius - wpf, xaml, border, cornerradius

Tengo dos fronteras una encima de la otra. Uno con un grosor de borde pero sin fondo, el otro sin grosor de borde, pero con un fondo. Ambas Fronteras tienen un CornerRadius de 3. El problema es que la esquina del Fondo de una de las Fronteras sobresale por detrás de la esquina de la otra Frontera.

Aquí está el XAML con el primer elemento de borde que tiene el fondo y el borde llamado FocusVisual con el BorderThickness.

<Grid x:Name="grid">
<Border Background="{TemplateBinding Background}"
CornerRadius="3">
<Grid>
<Border x:Name="MouseOverVisual"
Opacity="0"
Background="{StaticResource NuiFieldHoverBrush}"
CornerRadius="3" />
<Border>
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter x:Name="PART_WatermarkHost"
Content="{TemplateBinding Watermark}"
ContentTemplate="{TemplateBinding WatermarkTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"
Visibility="Collapsed"/>
</Grid>
</Border>
</Grid>
</Border>
<Border x:Name="FocusVisual"
Opacity="0"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource NuiFocusBrush}"
CornerRadius="3" />
</Grid>

CornerRadius, que tiene un efecto diferente en el objeto Fondo y Borde de un borde, parece un error en WPF.

Podría agregar un BorderThickness al Border conel Fondo y establezca el BorderBrush en el color de Fondo, pero esto hace que los elementos secundarios de ese borde sean empujados por el BorderThickness. Probablemente pueda solucionar esto mediante la reorganización de los elementos, pero es una especie de dolor, así que pensé que vería si alguien tiene una solución mejor.

Respuestas

Debes recalcular el CornerRadius de su borde interior.
Supongamos un ejemplo más simple como este:

<Border x:Name="OuterBorder" Width="50" Height="25" Background="Gray" CornerRadius="5">
<Border x:Name="InnerBorder" BorderBrush="red" BorderThickness="4" CornerRadius="5"/>
</Border>

El ancho y la altura de InnerBorder es menor que OuterBorder por BorderThickness / 2 de cada lado, por lo que debe calcular el radio del cordón de esta manera:

"CornerRadius del borde interior" = "CornerRadius del borde exterior" - "BorderThickness del borde interior" / 2.

En este ejemplo, CornerRadius del borde interno debe ser 3.

Editar: creo este SO Es mejor responder a tu pregunta.

Agregue un borde transparente al borde gris oscuro y se alineará con el borde azulado. Asegúrese de que tengan el mismo grosor de borde.

<Grid Width="50" Height="40">
<Border Background="Red" CornerRadius="3" BorderBrush="Transparent" BorderThickness="1">
<TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<Border BorderBrush="Blue" CornerRadius="3" BorderThickness="1" Background="Transparent"/>
</Grid>