如何为WPF元素提供矩形平面3D边框？

Question

我想为我的一个控件模板创建一个矩形的"平面3D"外观.在它最简单的版本中,这意味着底部的线条比顶部的线条暗,并且左侧和右侧线条之间也可能存在一些差异.

更复杂的版本允许我提供一个或多个画笔,以便可以应用渐变.

默认 <Border>WPF中元素允许您为每条边指定不同的厚度,但我找不到指定多个笔刷的方法.

那么,我怎样才能尽可能简单地产生我想要的效果呢？

编辑有人建议我发布一个我想如何使用它的例子.就个人而言,我很乐意拥有一个风格或用户控件.因此可以使用用户控件:

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

或者甚至更简单:

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

这些只是想法.任何明智,简洁的解决方案都是受欢迎的.

Answer 1

这是我设计的解决方案,可以实现我想要的大部分功能.它并不能完全控制所有四个边,但它确实提供了我想要的矩形平面3D视图.

以下是它的外观:

http://img62.imageshack.us/img62/9638/flatrectanglebackground.png

将其粘贴到Kaxaml中以便自己查看:

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

希望能帮助别人.我仍然在寻找这个问题的创新解决方案,所以继续发帖,我会接受比这更好的答案.

Answer 2

我只是通过将多个边框直接放在另一个上面来完成这样的事情.例如:

<Border 
  x:Name="TopAndLeft" 
  BorderThickness="3,3,0,0" 
  BorderBrush="{x:Static SystemColors.ControlLightBrush}">
<Border 
  x:Name="BottomAndRight" 
  BorderThickness="0,0,3,3" 
  BorderBrush="{x:Static SystemColors.ControlDarkBrush}">
    <ContentPresenter ... />
</Border>
</Border>

这提供了边界提供的所有其他特征的附加优点 - 角半径等.