Obramowanie obiektu obramowania WPF Narożnik innego niż obramowanie tła CornerRadius - wpf, xaml, border, cornerradius

Mam dwie granice jedna na drugiej. Jeden z obramowaniem, ale bez tła, drugi bez grubości obramowania, ale z tłem. Oba Granice mają CornerRadius of 3. Problem polega na tym, że róg tła jednego z Granic wystaje zza rogu drugiej Granicy.

Oto XAML z pierwszym elementem granicznym mającym tło i Border o nazwie FocusVisual z 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 mający inny wpływ na tło i obramowanie obiektu obramowania wydaje się być błędem w WPF.

Mogę dodać obramowanie obramowania do obramowania za pomocąTło i ustaw BorderBrush na kolor tła, ale spowoduje to, że elementy potomne tej granicy zostaną wciśnięte przez BorderThickness. Prawdopodobnie mogę to obejść, zmieniając elementy, ale jest to rodzaj bólu, więc pomyślałem, że zobaczę, czy ktoś ma lepsze obejście.

Odpowiedzi:

Powinieneś ponownie obliczyć CornerRadius twojej wewnętrznej granicy.
Załóżmy prostszy przykład jak ten:

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

Szerokość i wysokość InnerBorder jest mniejsza niż OuterBorder przez BorderThickness / 2 z każdej strony, więc należy obliczyć promień corder w ten sposób:

„CornerRadius wewnętrznej granicy” = „CornerRadius zewnętrznej granicy” - „BorderThickness wewnętrznej granicy” / 2.

W tym przykładzie CornerRadius wewnętrznej granicy powinien wynosić 3.

Edytować: Myślę to więc jest lepsza odpowiedź na twoje pytanie.

Dodaj przezroczystą ramkę do ciemnoszarej ramki, a wyrówna się z niebieskawą ramką. Upewnij się, że mają tę samą grubość ramki.

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