Как я могу дать элементу WPF прямоугольную плоскую трехмерную рамку?

Question

Я хотел бы создать прямоугольный «плоский 3D» вид для одного из моих шаблонов управления. В его самой простой версии это означает, что линия внизу темнее, чем вверху, и, возможно, некоторые различия между левой и правой линиями тоже.

Более сложная версия позволила бы мне использовать одну или несколько кистей, чтобы можно было применять градиенты.

Элемент по умолчанию <Border> в WPF позволяет указать разную толщину для каждого края, но я не могу найти способ указать несколько кистей.

Итак, как я могу получить желаемый эффект настолько просто, насколько это возможно?

РЕДАКТИРОВАТЬ было предложено опубликовать пример того, как я хочу использовать это. Лично я был бы счастлив иметь стиль или пользовательский контроль. Пользовательский элемент управления может быть использован таким образом:

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

Или, может быть, даже проще:

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

Это всего лишь идеи. Любое разумное, краткое решение приветствуется.

Answer 1

Я сделал что-то подобное, просто поместив несколько границ прямо друг на друга. E.g.:

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

Это обеспечивает дополнительное преимущество всех других функций, которые предоставляет граница - радиус угла и тому подобное.

Answer 2

Вот решение, которое я разработал, которое достигает большинства того, чего я хочу. Он не дает полного контроля над всеми четырьмя сторонами независимо, но дает прямоугольное плоское трехмерное изображение, которое мне нужно.

Вот как это выглядит:

Вставьте это в 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 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>

Answer 4

вы можете сослаться на 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>

Я использовал этот метод для просмотра шаблонов элементов управления , чтобы увидеть, как кнопки по умолчанию были стилизованы