How can I give a WPF element a rectangular flat 3D border?

Question

I would like to create a rectangular 'flat 3D' look for one of my control templates. In it's most simple version this means having a line at the bottom that is darker than that at the top, and maybe some variation between the left and right lines too.

A more complex version would allow me to provide on or more brushes so that gradients could be applied.

The default <Border> element in WPF lets you specify a different thickness per edge, but I can't find a way to specify multiple brushes.

So, how can I produce the effect I want as simply as possible?

EDIT it's been suggested that I post an example of how I want to use this. Personally I'd be happy to have a style or a user control. The user control might be used thus:

<FourSidedBorder LeftSideBrush="#00f" RightSideBrush="#0f0" ... />

Or perhaps even simpler:

<FourSidedBorder BorderBrush="#00f,#0f0,#f00,#fff"
                 BorderThickness="1,2,3,4" ... />

These are just ideas. Any sensible, concise solution is welcome.

Answer 1

Here is a solution I devised that achieves most of what I want. It doesn't give complete control over all four sides independently, but it does give the rectangular flat 3D view that I want.

Here's how it looks:

[![][1]][1]

Paste this into Kaxaml to see it for yourself:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="#CCC">
  <Page.Resources>
    <!-- A brush for flat 3D panel borders -->
    <LinearGradientBrush x:Key="Flat3DBorderBrush"
                         StartPoint="0.499,0" EndPoint="0.501,1">
      <GradientStop Color="#FFF" Offset="0" />
      <GradientStop Color="#DDD" Offset="0.01" />
      <GradientStop Color="#AAA" Offset="0.99" />
      <GradientStop Color="#888" Offset="1" />
    </LinearGradientBrush>
  </Page.Resources>
  <Grid>  
    <!-- A flat 3D panel -->
    <Border
          HorizontalAlignment="Center" VerticalAlignment="Center"
          BorderBrush="{StaticResource Flat3DBorderBrush}"
          BorderThickness="1" Background="#BBB">

          <!-- some content here -->
          <Control Width="100" Height="100"/>

    </Border>  
  </Grid>
</Page>

Hope that helps someone else out. I'm still on the lookout for innovative solutions to this problem, so keep posting and I'll accept a better answer than this one. [1]: https://i.stack.imgur.com/eMStF.png