wpf - 为 WPF 按钮创建自定义投影的方法

Question

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

Answer 1

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

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