wpf - 带有形状的渐变

Question

我需要为如下所示的元素创建背景

是否可以使用渐变或其他技术来实现这一点，还是我必须使用图像文件？

这只是我遇到问题的背景，而不是投影效果。

Answer 1

如果你只想用一个元素来做，那么像;

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

如果你想让你的曲线在渐变中，那么就像;

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

您当然需要使用您的颜色和尺寸来获得您想要的东西，但这应该是您开始的好地方。干杯