Come posso assegnare a un elemento WPF un bordo 3D piatto rettangolare?

Question

Vorrei creare un aspetto rettangolare "3D piatto" per uno dei miei modelli di controllo. Nella sua versione più semplice questo significa avere una linea in basso più scura rispetto a quella in alto, e forse anche qualche variazione tra le linee sinistra e destra.

Una versione più complessa mi consentirebbe di fornire uno o più pennelli in modo da poter applicare gradienti.

L'elemento <Border> predefinito in WPF consente di specificare uno spessore diverso per spigolo, ma non riesco a trovare un modo per specificare più pennelli.

Quindi, come posso produrre l'effetto che voglio nel modo più semplice possibile?

EDIT è stato suggerito di pubblicare un esempio di come voglio utilizzarlo. Personalmente sarei felice di avere uno stile o un controllo utente. Il controllo utente potrebbe essere utilizzato in tal modo:

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

O forse ancora più semplice:

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

Queste sono solo idee. Qualsiasi soluzione ragionevole e concisa è la benvenuta.

Answer 1

Ecco una soluzione che ho ideato che raggiunge la maggior parte di ciò che voglio. Non dà il controllo completo su tutti e quattro i lati in modo indipendente, ma fornisce la vista 3D piana rettangolare che voglio.

Ecco come appare:

http://img62.imageshack.us/img62/9638/flatrectanglebackground.png

incollarlo in Kaxaml per vedere di persona:

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

Speranza che aiuta a qualcun altro fuori. Sono ancora alla ricerca di soluzioni innovative a questo problema, quindi continua a postare e accetterò una risposta migliore di questa.

Answer 2

Onestamente, probabilmente il modo più semplice sarebbe utilizzare le tecniche di stratificazione. Ad esempio, crea una griglia come questa:

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

Penso che tu abbia l'idea. Questo è probabilmente il modo più semplice per farlo. È possibile impostare questo come un modello e usarlo in questo modo:

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

Ho fatto qualcosa di simile semplicemente posizionando più bordi direttamente uno sopra l'altro. Es .:

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

Ciò fornisce il vantaggio aggiuntivo di tutte le altre funzionalità fornite dal bordo: raggio dell'angolo e così via.

Answer 4

è possibile fare riferimento a PresentationFramework.Classic montaggio e quindi utilizzare

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

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

usavo this technique for looking at control templates per vedere come pulsanti predefiniti sono stati in stile