我有一个简单的窗口,其中包含一个带有圆角半径的外边框和一个带背景的内边框。边框基本上只是我想放置在圆角外边框内的任何类型内容的占位符。
<Window x:Class="TestRunner.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True"
WindowStyle="None" Background="{x:Null}" >
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="8" >
<Border Background="White">
</Border>
</Border>
</Window>
问题是内部控件没有继承圆角,所以它绘制在圆角的顶部,如下所示:
如何调整外部控件,因此内部控件不会尝试在圆角上绘制。
在内部控件上设置圆角不是一个可行的选项,因为它会导致角半径的可怕重复。
答案 0 :(得分:4)
我假设您在Border
内有Border
只是为了说明问题。如果可能的话,只要在外部Border
内不包含任何在角落里呈现任何内容的控件,就可以完全避免这个问题。
如果你必须包含一个在角落里呈现内容的控件,你可以使用Clip
:
<Border x:Name="border" CornerRadius="10">
<Border.Clip>
<RectangleGeometry Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}" RadiusX="10" RadiusY="10"/>
</Border.Clip>
<Border Background="White"/>
</Border>
另一个选项(取决于您的具体情况)可能是将外部Border
“置于”其他内容之上。只要透明Fill
和IsHitTestVisible
设置为false
,就足够了:
<Grid>
<Border Background="White"/>
<Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Fill="Transparent" IsHitTestVisible="false"/>
</Grid>
答案 1 :(得分:2)
RectangleGeometry
没有Width
属性,至少在WPF中。
根据我的需要,我必须按照此处的说明创建IMultiValueConverter
:https://stackoverflow.com/a/5650367/2663813
之后,我仍然在拐角处遇到问题,所以我使用了Kent的第二个解决方案(注意Border.Fill
也不存在)。
这是我写的:
<Grid>
<Border x:Name="canvasBorder" CornerRadius="5">
<Border.Resources>
<tools:ContentClipConverter x:Key="ContentClipConverter" />
</Border.Resources>
<Border.Clip>
<MultiBinding Converter="{StaticResource ContentClipConverter}">
<Binding Path="ActualWidth"
RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight"
RelativeSource="{RelativeSource Self}"/>
<Binding Path="CornerRadius"
RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.Clip>
<!-- ... -->
</Border>
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Transparent" IsHitTestVisible="false" />
</Grid>
并在ContentClipConverter.cs中:
/// <summary>
/// Clips the content of a rounded corner border.
/// Code taken from <a href="https://stackoverflow.com/a/5650367/2663813">this topic</a>
/// </summary>
public class ContentClipConverter : IMultiValueConverter {
/// <summary>
/// Gets a clipping geometry for the item
/// </summary>
/// <param name="values">The input values</param>
/// <param name="targetType">The parameter is not used.</param>
/// <param name="parameter">The parameter is not used.</param>
/// <param name="culture">The parameter is not used.</param>
/// <returns>The clipping geometry</returns>
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
if (values.Length == 3 && values[0] is double && values[1] is double && values[2] is CornerRadius) {
var width = (double)values[0];
var height = (double)values[1];
if (width < double.Epsilon || height < double.Epsilon) {
return Geometry.Empty;
}
var radius = (CornerRadius)values[2];
// Actually we need more complex geometry, when CornerRadius has different values.
// But let me not to take this into account, and simplify example for a common value.
var clip = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft);
clip.Freeze();
return clip;
}
return DependencyProperty.UnsetValue;
}
/// <summary>
/// Not implemented
/// </summary>
/// <param name="value">The parameter is not used.</param>
/// <param name="targetTypes">The parameter is not used.</param>
/// <param name="parameter">The parameter is not used.</param>
/// <param name="culture">The parameter is not used.</param>
/// <returns>This function does not return anything</returns>
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
throw new NotSupportedException();
}
答案 2 :(得分:0)
一种可能性是在外边框上加一些填充:
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="8" Padding="4">
....
</Border>
但这可能会导致应用程序中出现太多空白区域。