Gradient mit einer Form - WPF, XAML, Stile, Farbverlauf

Ich muss einen Hintergrund für ein Element erstellen, das wie folgt aussieht

Kann man dies mit Farbverläufen oder einer anderen Technik implementieren oder muss ich eine Image-Datei verwenden?

Es ist nur der Hintergrund, mit dem ich Probleme habe, nicht der Schlagschatteneffekt.

Antworten:

Wenn Sie es mit nur einem Element machen möchten, dann ähnelt etwas;

<Border Width="300" Height="75"
BorderThickness="3"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFC4C3C3" Offset="0.429"/>
<GradientStop Color="#FFE9E9E9" Offset="0.652"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE9E9E9" Offset="0"/>
<GradientStop Color="#FFB9B6B6" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
</Border.Effect>
</Border>

Wenn Sie Ihre Kurve in der Steigung haben möchten, dann etwas wie;

<Grid Width="300" Height="75">
<Border
BorderThickness="3"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFC4C3C3" Offset="0.429"/>
<GradientStop Color="#FFE9E9E9" Offset="0.652"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE9E9E9" Offset="0"/>
<GradientStop Color="#FFB9B6B6" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
</Border.Effect>
</Border>
<Path Data="M0,0 L300,0 L300,40.768158 L296.83832,41.189522 C253.5976,46.794456 203.45944,50.000004 150,50.000004 C96.540565,50.000004 46.402409,46.794456 3.1617098,41.189522 L0,40.768158 z" Fill="#FFDADADA" Margin="3" Height="50" VerticalAlignment="Top" Stretch="Fill" UseLayoutRounding="False"/>
</Grid>

Sie müssen natürlich mit Ihren Farben und Größen spielen, um genau das zu bekommen, was Sie wollen, aber dies sollte hoffentlich ein guter Startpunkt für Sie sein. Prost