Como posso fazer um elemento WPF uma borda plana retangular 3D?

Question

Eu gostaria de criar uma aparência rectangular 'flat 3D' para um dos meus modelos de controle. Em sua versão mais simples, isso significa ter uma linha na parte inferior que é mais escura do que no topo, e talvez alguma variação entre as linhas esquerda e direita também.

A versão mais complexa iria permitir-me para fornecer on ou mais escovas de modo que os gradientes poderia ser aplicada.

O elemento <Border> padrão no WPF permite que você especifique uma espessura diferente por aresta, mas não consigo encontrar uma maneira de especificar vários pincéis.

Então, como posso produzir o efeito que eu quero tão simples quanto possível?

Editar tem sido sugerido que eu postar um exemplo de como eu quero usar isso. Pessoalmente, eu ficaria feliz em ter um estilo ou um controle de usuário. O controle de usuário pode ser usado assim:

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

Ou talvez ainda mais simples:

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

Estes são apenas idéias. Qualquer solução sensata, concisa é bem-vinda.

Answer 1

Aqui está uma solução que concebeu que atinge mais do que eu quero. Ele não dá o controle completo sobre todos os quatro lados de forma independente, mas dá a rectangular plana vista 3D que eu quero.

Aqui está como ele olha:

Cole isto em Kaxaml para ver por si mesmo:

<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 ajude alguém fora. Eu ainda estou à procura de soluções inovadoras para este problema, de modo a manter postagem e eu vou aceitar uma resposta melhor do que este.

Answer 2

Eu fiz algo parecido com isto apenas por colocar várias fronteiras diretamente em cima uns dos outros. Por exemplo:.

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

Isto proporciona a vantagem de todos os outros recursos que raio beira de canto disponha e tal.

Answer 3

Honestamente, provavelmente, a maneira mais fácil seria usar camadas técnicas. Por exemplo criar uma grade como esta:

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

Eu acho que você começa a idéia. Esta é provavelmente a maneira mais fácil de fazê-lo. Você pode configurá-lo como um modelo e usá-lo como este:

<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

você pode fazer referência a PresentationFramework.Classic montagem e, em seguida, 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>

Eu estava usando esta técnica para olhar para modelos de controle para ver como botões padrão foram denominados