.net - 如何为 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 View 。

它的外观如下:

[![][1]][1]

将其粘贴到 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>

希望对其他人有帮助。我仍在寻找解决此问题的创新解决方案，因此请继续发帖，我会接受比这个更好的答案。[1]: /image/eMStF.png