Wie kann ich einem WPF-Element einen rechteckigen, flachen 3D-Rahmen geben?

Question

Ich möchte ein rechteckiges "flaches 3D" -Look für eine meiner Kontrollschablonen erstellen. In seiner einfachsten Version bedeutet dies, dass eine untere Linie dunkler ist als die obere, und vielleicht auch eine Variation zwischen der linken und der rechten Linie.

Eine komplexere Version würde es mir ermöglichen, eine oder mehrere Pinsel bereitzustellen, damit Farbverläufe angewendet werden können.

Das Standardelement <Border> in WPF lässt Sie eine andere Dicke pro Kante angeben, aber ich kann keine Möglichkeit finden, mehrere Pinsel anzugeben.

Also, wie kann ich den gewünschten Effekt so einfach wie möglich erzeugen?

BEARBEITEN es wurde vorgeschlagen, dass ich ein Beispiel posten, wie ich das verwenden möchte. Persönlich wäre ich glücklich, einen Stil oder eine Benutzerkontrolle zu haben. Die Benutzersteuerung kann somit verwendet werden:

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

Oder noch einfacher:

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

Dies sind nur Ideen. Jede vernünftige, prägnante Lösung ist willkommen.

Answer 1

Hier ist eine Lösung, die ich entwickelt, dass das meiste von dem erreicht, was ich will. Es bietet keine vollständige Kontrolle über alle vier Seiten unabhängig, aber es gibt die rechteckige flache 3D-Ansicht, die ich möchte.

Hier ist, wie es aussieht:

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

Paste diese in Kaxaml es für sich selbst zu sehen:

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

Hoffnung, dass jemand anderes heraus hilft. Ich bin immer noch auf der Suche nach innovativen Lösungen für dieses Problem, also schreibe weiter und ich akzeptiere eine bessere Antwort als diese.

Answer 2

Ehrlich wahrscheinlich wäre der einfachste Weg, Schichttechniken zu verwenden. Zum Beispiel ein Raster wie folgt erstellen:

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

Ich denke, Sie bekommen die Idee. Dies ist wahrscheinlich der einfachste Weg, dies zu tun. Sie können dies als eine Vorlage einrichten und verwenden Sie es wie folgt:

Answer 3

Ich habe so etwas gemacht, indem ich mehrere Ränder direkt übereinander gelegt habe. Beispiel:

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

Dies bietet den zusätzlichen Vorteil aller anderen Funktionen, die Grenze bietet - Eckenradius und so weiter.

Answer 4

können Sie das PresentationFramework verweisen.Klassische Montage und verwenden Sie dann

<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 this technique for looking at control templates wurde mit sehen, wie Standard-Tasten