Corner-only borders in wpf/xaml - wpf

Question

In some xaml, I'd like to have a border that is only out to a few pixels from each corner. So, along the top, the border would be, say, 5 pixels of black at the left edge, then be transparent across the rest of the top until 5 pixels of the right edge, and then the final 5 pixels of the border at the right edge would be black. The intent is to provide some guidance for selection of occasionally transparent things; however, in this application, the presence of a full border would interfere with the content (in the perceptual-visual sense). The corners are not rounded.
Something that looks like this:
-- --
| |
| |
-- --
What type of Brush should I use to achieve this effect?
I've tried a linear gradient, like so:
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="0.01" />
<GradientStop Color="Transparent" Offset="0.0101" />
<GradientStop Color="Transparent" Offset="0.9899" />
<GradientStop Color="Black" Offset="0.99" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
Of course, this only does the top left and bottom right. That could be reasonable for the intended application, but the size of the line on each corner is only the same if the region bordered is square (if the bordered area is a long rectangle, for instance, the section of border goes much further along one side than the other).
I did note the MappingMode value of "Absolute" on the gradient brushes. That works well for the top-left corner but not the other corners.
I also tried a RadialGradientBrush, thinking that I could get a ring to hit the corners, but wasn't successful in either centering it correctly or having it hit equal lengths along the sides.
This is part of the ItemContainerStyle in a ListBox, and the border is changed with a Trigger for IsSelected. For this reason, I also can't do borders within borders (within borders, etc.).
Edit #2: I also tried a VisualBrush. I knew I could get the behavior I wanted in a grid (at least, the stretching behavior).
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
<RowDefinition Height="*" />
<RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="1" Grid.Row="0" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="0" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="0" Grid.Row="2" Fill="Black" />
<Rectangle Grid.Column="1" Grid.Row="2" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="2" Fill="Black" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
However, this doesn't work out, either. It seems like sizing doesn't happen in the same way inside a brush. In this case, the size of the Grid in the VisualBrush ended up being 20x20, with the middle transparent parts taking up no space. Setting HorizontalAlignment and VerticalAlignment to Stretch didn't help, either. Stretch="Fill" on the VisualBrush didn't do anything, either.
Edit #1: the wider context:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<Setter Property="Margin" Value="3" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderBrush" Value="Fuchsia" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="4" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="0.01" />
<GradientStop Color="Transparent" Offset="0.0101" />
<GradientStop Color="Transparent" Offset="0.9899" />
<GradientStop Color="Black" Offset="0.99" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

Answer 1

You could use Path ... this will draw something similar to what you're looking for:
<Path Stroke="Black" Stretch="Fill"
Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10"
Height="100" Width="100" Margin="10" />
Full code sample:
<Window x:Class="WpfApplication1.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">
<Grid>
<Path Stroke="Black" Stretch="Fill"
Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10"
Height="100" Width="100" Margin="10" />
</Grid>
</Window>

Answer 2

A radial gradient brush would probably achieve what you're looking for. Set the center of the radial brush to the center of your box. Start with a transparent center color, fade from the center to the desired "border color" (black), and then set the radius big enough that the black color only shows up in the corners.
And make sure to set the "gradient" to be very short - don't fade it gradually, but make it sharp.
If you size it right, you'll get an effect similar to that which is (poorly) illustrated below. The red box represents your content. Everything outside that box illustrates what your corners would look like. Make the radius of the "transparent" part bigger, to make your black corners smaller.
Finally; this would pretty much only look good with thin borders. If you have a thick border, it's going to look "funny" at the 'tips' of the corner brush.
Update:
Here's an actual example with some code:
<Border BorderThickness="1" Height="100" Width="100">
<Border.BorderBrush>
<RadialGradientBrush RadiusX="0.6" RadiusY="0.6">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#00000000" Offset="0.99"/>
</RadialGradientBrush>
</Border.BorderBrush>
<Rectangle Fill="Red" />
</Border>
And here's what it looks like:
For rectangular shapes (i.e. not a perfect square), in order to keep the corners the same size, you'd have to scale the RadiusX and RadiusY values accordingly. They should scale with the width/height ratio.

Answer 3

This is a fun question, so here's yet another possibility. I hope you agree that this qualifies as a fully separate answer from my previous one...
You can use a composite set of simple shapes - contained within a Grid - to achieve your desired effect. Layer your "content" box on top of 4 black rectangles, with each black rectangle positioned in the appropriate corner of the grid.
Here's my crappy paint illustration. Once again, the red box indicates your content. Anything outside of that red box is what the user will see as a border.
And the real-life example with code:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="200">
<!-- These rectangles will be the four corner "borders" -->
<Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
<Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<!-- Here is the content. The "margin" property will effectively be the thickness of your corner borders. -->
<Rectangle Fill="Red" Margin="2" />
</Grid>
It looks like this:
This has the added benefit of scaling very well; the corner borders will always be the same size, no matter the size of your content. In addition, the border can be any thickness you like, without looking "weird" as the previous, radial-brush answer did.