8

我想为我的一个控件模板创建一个矩形“平面 3D”外观。在最简单的版本中，这意味着底部的线比顶部的线更暗，左右线之间也可能存在一些变化。

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

WPF 中的默认<Border>元素允许您为每个边缘指定不同的厚度，但我找不到指定多个画笔的方法。

那么，如何才能尽可能简单地产生我想要的效果呢？

编辑有人建议我发布一个我想如何使用它的例子。就我个人而言，我很乐意拥有样式或用户控件。用户控件可以这样使用：

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

或者甚至更简单：

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

这些只是想法。欢迎任何明智、简洁的解决方案。

4

6 回答 6

15

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

这是它的外观：

[![][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]：https ://i.stack.imgur.com/eMStF.png

于 2009-02-24T16:23:37.787 回答
14

我只是通过将多个边框直接放在彼此之上来完成类似的操作。例如：

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

这提供了边界提供的所有其他功能的额外优势 - 拐角半径等。

于 2011-03-17T18:05:59.627 回答
3

老实说，最简单的方法可能是使用分层技术。例如创建一个像这样的网格：

  <Grid Width="50" Height="50">  
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
     </Grid.ColumnDefinitions>

     <!-- Top Border -->
     <Border Height="3" Background="LightGray" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />

     <!-- Right Border -->
     <Border Width="3" Background="DarkGray" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" />

     <!-- Content -->
     <Border Background="Gray" Grid.Row="1" Grid.Column="1" />

     <!-- Left Border -->
     <Border Width="3" Background="LightGray" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />

     <!-- Bottom Border -->
     <Border Height="3" Background="DarkGray" Grid.Row="2" Grid.Column="1" />

  </Grid>

我想你应该已经明白了。这可能是最简单的方法。您可以将其设置为模板并像这样使用它：

<Template x:Key="My3DBorder" TargetType="ContentControl">
    <!-- Put the Grid definition in here from above -->
</Template>

<ContentControl Template="{StaticResource My3dBorder}">
   <!-- My Content Goes Here -->
</ContentControl>
于 2009-02-24T14:10:23.413 回答
2

需要一个经典的 3D 'inset' 边框。基于@GregD 的回答（谢谢！）：

    <Border BorderThickness="0,0,1,1" BorderBrush="{x:Static SystemColors.ControlLightLightBrush}">
        <Border BorderThickness="1,1,0,0" BorderBrush="{x:Static SystemColors.ControlDarkBrush}">
            <Border BorderThickness="0,0,1,1" BorderBrush="{x:Static SystemColors.ControlLightBrush}">
                <Border BorderThickness="1,1,0,0" BorderBrush="{x:Static SystemColors.ControlDarkDarkBrush}">
                ..
                </Border>
            </Border>
        </Border>
    </Border>

要使其成为“开始”，请恢复第一个和第二个元素对的顺序。

于 2020-03-20T21:24:37.280 回答
1

您可以引用PresentationFramework.Classic程序集，然后使用

<Window xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic">
...

<Grid Width="50" Height="50">
    <mwt:ClassicBorderDecorator BorderThickness="3,3,3,3"/>
</Grid>

我正在使用这种技术来查看控件模板以查看默认按钮的样式

于 2012-09-22T21:39:36.200 回答
0

我更喜欢的酷方法的两分钱 - 也使用阴影（作为一种风格，所以你可以在任何地方使用它）：

  <Style x:Key="border_style" TargetType="{x:Type Border}">
        <Style.Resources>
            <DropShadowEffect x:Key="dropShadowEffect" BlurRadius="8" ShadowDepth="1" Color="#FF2686AA" RenderingBias="Quality"/>
         </Style.Resources>

        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="Effect" Value="{StaticResource dropShadowEffect}"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="BorderThickness" Value="1.2,1.2,0.3,0.3"/>
    </Style>

用法（当您注册样式时）：

<Border Style="{StaticResource border_style}">

 </Border>

3D 边框效果的位置由 BorderThickness 完成。您可以使用颜色、ShadowDepth、BlurRadius、CornerRadius 等。

于 2020-02-04T11:25:20.760 回答