WPF Border Object Border CornerRadius diverso da Border Background CornerRadius - wpf, xaml, border, cornerradius

Ho due bordi uno sopra l'altro. Uno con un BorderThickness ma senza sfondo, l'altro senza spessore del bordo, ma con uno sfondo. Entrambi i Borders hanno un CornerRadius di 3. Il problema è che l'angolo dello Sfondo di uno dei Borders sporge da dietro l'angolo dell'altro Border.

Ecco la XAML con il primo elemento del bordo con lo sfondo e il bordo denominato FocusVisual con il 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 che ha un effetto diverso sullo sfondo e sul bordo di un oggetto Border sembra un bug in WPF.

Potrei aggiungere un BorderThickness al bordo conlo sfondo e impostare il BorderBrush sul colore di sfondo, ma questo fa sì che gli elementi secondari di quel bordo vengano spinti dal BorderThickness. Probabilmente posso aggirare il problema riorganizzando gli elementi, ma è una specie di dolore quindi ho pensato di vedere se qualcuno ha una soluzione migliore.

risposte:

Dovresti ricalcolare il CornerRadius del tuo confine interiore.
Assumi un esempio più semplice come questo:

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

La larghezza e l'altezza di InnerBorder è inferiore a OuterBorder di BorderThickness / 2 da ciascun lato, quindi è necessario calcolare il raggio del corder in questo modo:

"CornerRadius of inner border" = "CornerRadius of outer border" - "BorderThickness of inner border" / 2.

In questo esempio CornerRadius del bordo interno dovrebbe essere 3.

Modificare: credo questo SO è meglio rispondere alla tua domanda.

Aggiungi un bordo trasparente al bordo grigio scuro e si allineerà con il bordo bluastro. Assicurati che abbiano lo stesso spessore del bordo.

<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>