为 WPF 按钮创建自定义阴影的方法

Question

如何为 WPF 按钮（或边框等）创建如下所示的投影？阴影是“弯曲的”，两端较厚，中间较薄。如果可能的话，我想避免使用图像（PNG），但如果这是最好的选择，那就这样吧。有没有办法以某种方式使用渐变来做到这一点？

Answer 1

我认为您必须为 Button 编辑默认的 Template 并添加一个 Shape 以将 DropShadowEffect 添加到其中。一个更好的方法是创建一个从 Button 派生的自定义控件，该控件具有此 Template 然后您可以为您希望能够配置的值添加依赖属性，例如 ShadowDepth、BlurRadius、弧的角度等。

这是一个例子。它需要引用 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>