WPF 自定义边框 - 括号样式答案

【问题标题】：WPF Custom Border - bracket styleWPF 自定义边框 - 括号样式
【发布时间】：2014-10-29 11:49:51
【问题描述】：

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

[示例内容]

为了实现这一点，我将视图分隔为 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>

还有其他方法可以实现这种风格吗？

【问题讨论】：

似乎有点像我会这样做，但不是Border 用于中间列，而是使用Grid 和Margin。但我不确定您在问什么，您是否在寻找最佳实践？
是的，我想问这是最好的方法，还是有更明显的解决方案。

标签： wpf border

【解决方案1】：

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

可以在How can I draw a border with squared corners in wpf?中找到一个实现（用于不同的边框）

【讨论】：

【解决方案2】：

一个简单的技巧是尝试为BorderBrush 设置一些LinearGradientBrush。如果您的文本有固定的宽度，它会一直看起来最好。但是，当文本的宽度可能发生变化时，水平线（两端）将以某种比例缩小/延伸。那是因为我们为GradientStop设置了一些Offset，可惜这个Offset只能基于与整个Brush的宽度（正好是拉伸背景时的边框）。请注意，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 个 GradientStops 的 Offset 更改为您想要的，其余 GradentStops 的 Offset 应该是从 1 减去第一个的 Offset。

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

【讨论】：

可惜文字没有固定宽度，横线会变！谢谢
@felicia 我不认为这是某种不幸。它只需要一个额外的 Converter （正如我在回答中所说）。

【解决方案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>

第二个边框的颜色“白色”可以替换为实际的背景颜色。 “透明”颜色无济于事。

谢谢，

RDV

【讨论】：