2011-08-10 163 views
2

我有两个边框在彼此之上。一个具有BorderThickness但没有背景,另一个没有边框厚度,但是具有背景。两个边界的拐角半径均为3.问题在于其中一个边界的背景的拐角从另一个边界的拐角后伸出。WPF边框对象边框CornerRadius不同于边框背景CornerRadius

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

这里是有背景和边框命名具有了borderThickness FocusVisual第一边界元素的XAML。

<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推入。我可以通过重新排列元素来解决这个问题,但这是一种痛苦,所以我想我会看看是否有人有更好的解决方法。

+0

你是否尝试删除第一个边框内的Grid元素,看看是否有什么区别? –

+0

尝试在http://snoopwpf.codeplex.com上使用Peter Blois的snoop来检查每个边框是否具有相同的ActualWidth和ActualHeight,并且没有隐式边距或填充混淆等等。 –

回答

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内边框'='外边框的角边框' - '边框内边框的厚度'/ 2。

在这个例子内边界的CornerRadius应为3

编辑:我觉得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>