Граничный объект WPF Border CornerRadius отличается от пограничного фона

Question

У меня есть две Границы друг на друга.Один с BorderThickness, но без фона, другой без толщины границы, но с фоном.Обе границы имеют угловой угол 3. Проблема в том, что угол фона одной из границ торчит из-за угла другой границы.

ЗдесьXAML с первым элементом границы, имеющим фон, и Border с именем FocusVisual, имеющим 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, оказывающий различное влияние на фон и границу объекта Border, выглядит как ошибка в WPF.

Я мог бы добавить BorderThickness к границе с фоном и установить BorderBrush на цвет фона, но это заставит BorderThickness выдвигать дочерние элементы этой границы.Я, вероятно, могу обойти это, переставив элементы, но это отчасти боль, поэтому я подумал, что увижу, есть ли у кого-нибудь лучший обходной путь.

Answer 1

Вы должны пересчитать CornerRadius вашей внутренней границы.
Предположите более простой пример, подобный этому:

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

Ширина и высота InnerBorder меньше, чем OuterBorder, на BorderThickness / 2 от каждогосторона, поэтому вы должны рассчитать радиус кордера следующим образом:

'CornerRadius внутренней границы' = 'CornerRadius внешней границы' - 'BorderThickness of внутренней границы' / 2.

В этом примереCornerRadius внутренней границы должен быть 3.

Редактировать: Я думаю это SO является лучшим ответом на ваш вопрос.

Answer 2

Добавьте прозрачную рамку к темно-серой рамке, и она выровняется с голубоватой рамкой. Убедитесь, что они имеют одинаковую толщину границы.

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