wpf - 形のグラデーション

Question

次のような要素の背景を作成する必要があります

グラデーションやその他の手法でこれを実装することは可能ですか、それとも画像ファイルを使用する必要がありますか？

私が問題を抱えているのは背景だけであり、ドロップシャドウ効果ではありません。

Answer 1

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>

もちろん、あなたはあなたが望むものを正確に得るためにあなたの色とサイズで遊ぶ必要があるでしょう、しかしこれはうまくいけばあなたのために始めるのに良い場所であるはずです。乾杯