WPF Custom Border - bracket style

Question

I would like to create a custom border around a content, that the upper and lower side of the border is not continuous, it should have a style like bracket as below. (inside the "bracket border" the content should be placed e.g. grid, stackpanel, etc.) Note that the height of the right and the left border can be changed depending on the content's height, whereas the top and the bottom should have a standard width.

[ sample content ]

In order to achieve this, I separated the view in a 3 columns grid:

    <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>

Is there another approach for achieving this style?

Seems somewhat the way I would do it, but instead of a `Border` for the middle column, I'd use a `Grid` with a `Margin`. But I'm not sure what you're asking, are you looking for a best-practice? — Sjeijoet, Oct 29 '14 at 12:45
Yes exactly, I am asking whether this is the best way to do it, or there is a more obvious solution. — felicia, Oct 29 '14 at 12:56

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

One possible solution is to write your own Border based on a Decorator.

An implementation (for a different border) can be found in How can I draw a border with squared corners in wpf?

edited May 23 '17 at 10:33

Community

1
1

answered Oct 29 '14 at 12:53

Frank Lindecke

16
1

score 0 · Answer 2 · answered Oct 29 '14 at 17:16

One simple trick is try setting some LinearGradientBrush for the BorderBrush. If your text has a fixed width, it will look best at all time. However when the text's width may change, the horizontal lines (at 2 ends) will shrink/extend at some ratio. That's because we set some Offset for the GradientStop and it's pity that this Offset can only be set based on some ratio (from 0 to 1) with the width of the whole Brush (which is exactly the width of the Border when the background is stretched). Note that the MappingMode cannot change this behavior, it just works for StartPoint and EndPoint.

Here is the pure XAML code:

<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>

You can change the Offset of the first 2 GradientStops to what you want, the Offset of the remaining GradentStops should be the subtraction of the first's Offset from 1.

If using some code behind, you can pinpoint exactly the length of the horizontal lines (at the 2 ends). That way we need some Binding between the Offset and the ActualWidth of the Border. Next we need some Converter here, this Converter will convert the ActualWidth and the desired exact length to the correct ratio. So when the text width changes, the length of the horizontal lines will always be some fixed value.

Unfortunately the text does not have a fixed width, thus the horizontal line will be changed! Thanks — felicia, Oct 30 '14 at 16:07
@felicia I don't think it's some kind of unfortunate here. It just requires an additional ***Converter*** (as I ***said*** in my answer). — King King, Oct 30 '14 at 16:35

score 0 · Answer 3 · answered Jan 03 '18 at 18:35

You can try the following XAML code:

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

Second border's color "White" can be replaced with the actual background color. "Transparent" color will not help.

Thanks,

RDV

WPF Custom Border - bracket style

[ sample content ]

3 Answers3