Question

我想在内容周围创建一个自定义边框，边框的上边和下边不连续，它应该有一个类似括号的样式，如下所示。（在＆＃34;支架边框＆＃34内;应放置内容，例如网格，堆叠面板等）请注意，右边框和左边框的高度可以根据内容的高度进行更改，而顶部和底部应该具有标准宽度。

[样本内容]

为了实现这一点，我在3列网格中分离了视图：

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="22px"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="22px"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" BorderBrush="Blue" BorderThickness="6px 6px 0px 6px"></Border>
        <Border Grid.Column="1" BorderBrush="Transparent" BorderThickness="6px">
            <!--Place for the actual content of the border-->
            <TextBlock Text="Test" FontSize="15"></TextBlock>
        </Border>
        <Border Grid.Column="2" BorderBrush="Blue" BorderThickness="0px 6px 6px 6px"></Border>
    </Grid>

是否有其他方法可以实现这种风格？

Answer 1

一种可能的解决方案是根据装饰器编写自己的边框。

可以在How can I draw a border with squared corners in wpf?

中找到（不同边框）的实现

Answer 2

一个简单的诀窍是尝试为LinearGradientBrush设置一些BorderBrush。如果您的文字具有固定的宽度，它将始终看起来最好。然而，当文本的宽度可能改变时，水平线（在2端）将以某种比率收缩/延伸。这是因为我们为Offset设置了一些GradientStop，很遗憾这个Offset只能根据某个比例（从0到1）进行设置整个画笔的宽度（正好是背景拉伸时边框的宽度）。请注意，MappingMode无法更改此行为，只适用于StartPoint和EndPoint。

这是纯XAML代码：

<Border VerticalAlignment="Center" HorizontalAlignment="Center" 
        BorderThickness="3" Padding="5,0,5,0">
    <TextBlock Text="Square bracket border here" FontSize="30" 
                HorizontalAlignment="Center"/>
    <Border.BorderBrush>
       <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
          <GradientStop Offset="0.03" Color="Blue"/>
          <GradientStop Offset="0.03" Color="Transparent"/>
          <GradientStop Offset="0.97" Color="Transparent"/>
          <GradientStop Offset="0.97" Color="Blue"/>
       </LinearGradientBrush>
    </Border.BorderBrush>
 </Border>

您可以将前2个GradientStop的Offset更改为您想要的，其余GradentStops的Offset应该是1的第一个偏移量的减法

如果使用了一些代码，您可以准确地确定水平线的长度（在两端）。这样我们需要在边界的Offset和ActualWidth之间进行一些绑定。接下来我们需要一些Converter，此转换器会将ActualWidth和所需的精确长度转换为正确的比率。因此，当文本宽度发生变化时，水平线的长度将始终为某个固定值。

Answer 3

您可以尝试以下XAML代码：

<Grid>
    <Border BorderBrush="Black" BorderThickness="1"/>
    <TextBlock Text="sample content"/>
    <Border BorderBrush="White" BorderThickness="0,1,0,1" Margin="8,0,8,0"/>
 </Grid>

第二个边框颜色＆＃34;白色＆＃34;可以用实际的背景颜色替换。＆＃34;透明＆＃34;颜色无济于事。

谢谢，

RDV

WPF自定义边框 - 支架样式

[样本内容]

3 个答案: