¿Cómo puedo dar un elemento de WPF un borde 3D plana rectangular?

Question

Me gustaría crear una apariencia rectangular 'plana 3D' para una de mis plantillas de control. En su versión más sencilla, esto significa tener una línea en la parte inferior que es más oscuro que el de la parte superior, y tal vez alguna variación entre las líneas izquierda y derecha también.

Una versión más compleja me permitiría proporciona en los cepillos o más para que los gradientes se podrían aplicar.

El elemento <Border> por defecto en WPF permite especificar un grosor diferente por filo, pero no puedo encontrar una manera de especificar varios cepillos.

Entonces, ¿cómo puedo producir el efecto yo quiero lo más sencillamente posible?

Editar se ha sugerido que publico un ejemplo de cómo quiero usar esto. En lo personal yo estaría feliz de tener un estilo o un control de usuario. El control de usuario puede ser utilizado por lo tanto:

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

O tal vez aún más simple:

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

Estos son sólo ideas. Cualquier solución sensata, concisa es bienvenido.

Answer 1

Aquí es una solución ideé que logra la mayor parte de lo que quiero. No da un control completo sobre los cuatro lados de forma independiente, pero se da la vista 3D rectangular plana que quiero.

Así es como se ve:

Kaxaml que verlo por ti mismo:

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

Espero que ayude a otra persona a cabo. Todavía estoy en la búsqueda de soluciones innovadoras a este problema, a fin de mantener la publicación y voy a aceptar una respuesta mejor que éste.

Answer 2

he hecho algo como esto simplemente mediante la colocación de múltiples fronteras directamente en uno encima del otro. Por ejemplo:.

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

Esto proporciona la ventaja añadida de todas las otras características que limitan con radio de esquina contenga disposiciones y tal.

Answer 3

Sinceramente probablemente la forma más fácil sería utilizar técnicas de estratificación. Por ejemplo crear una cuadrícula de esta manera:

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

Creo que se entiende la idea. Esta es probablemente la forma más fácil de hacerlo. Se podría instalar esto como una plantilla y utilizar de esta manera:

<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

puede hacer referencia al PresentationFramework.Classic montaje y luego usar

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

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

I estaba usando esta técnica para mirar las plantillas de control para ver cómo fueron labrados botones predeterminados