首页 文章

WPF边框对象边框CornerRadius与边框背景CornerRadius不同

提问于
浏览 次
2

我有两个彼此重叠的边界 . 一个有BorderThickness但没有背景，另一个没有边框厚度，但有背景 . 两个边界的CornerRadius都是3.问题是其中一个边界的背景角落从另一个边界的角落后面突出 .

Notice the grey protruding out from behind the blue at the corners.

这是XAML，第一个边框元素具有背景，边框名为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对象的Background和Border有不同的影响，看起来像是WPF中的一个bug .

我可以将BorderThickness添加到具有背景的边框并将BorderBrush设置为背景颜色，但这会导致该边框的子元素被BorderThickness推入 . 我可以通过重新排列元素来解决这个问题，但这有点痛苦，所以我想如果有人有更好的解决方法我会看到 .

wpf xaml border cornerradius

2 回答

  • 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的宽度和高度比每边的BorderThickness / 2小于OuterBorder，所以你应该用这种方式计算corder半径：

    '内边界的CornerRadius'='外边界的CornerRadius' - '内边界的边界'/ 2 .

    在此示例中，内边框的CornerRadius应为3 .

    Edit: 我认为this SO更能回答你的问题 .

    回复于
  • 0

    在深灰色边框处添加透明边框，它将与蓝色边框对齐 . 确保它们具有相同的边框厚度 .

    <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>
    回复于

相关问题