Question

How would I go about creating the drop shadow that is shown below for a WPF button (or a Border, etc)? The drop shadow is “curved” and is thicker on the ends and thinner in the middle. I’d like to avoid using images (PNG) if possible, but if that is the best option then so be it. Is there a way to do it using gradients instead somehow?

Answer 1

I think you’ll have to edit the default Template for the Button and add a Shape that you add the DropShadowEffect to. An even better approach is to create a custom control which derives from Button that has this Template Then you could add Dependency Properties for the values that you would like to be able to configure, like ShadowDepth, BlurRadius, Angle for the Arc etc.

Here is an example. It requires a reference to PresentationFramework.Aero.

<Style x:Key="BottomArcShadowButton" TargetType="{x:Type Button}"
       xmlns:MS_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <MS_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </MS_Themes:ButtonChrome>
                    <Path Grid.ZIndex="-1"
                          Stroke="Green"
                          StrokeThickness="6"
                          Stretch="Fill"
                          Fill="Green"
                          StrokeEndLineCap="Square"
                          StrokeStartLineCap="Square"
                          Data="M0,0 L1,0 L1,1 A1,1 180 0 0 0,1 L0,0">
                        <Path.Effect>
                            <DropShadowEffect ShadowDepth="15"
                                              Direction="270"
                                              Color="Black"
                                              Opacity="0.5"
                                              BlurRadius="4"/>
                        </Path.Effect>
                    </Path>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                        <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>