Method to create custom drop shadow for a WPF button
How would I go about cre开发者_如何学JAVAating 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?
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>
精彩评论