如何在像google按钮这样的wpf按钮周围创建阴影下拉效果

I am trying to create a google button in wpf. I have found the following link that specifies the google's button css style

我想在wpf中创建一个谷歌按钮。我找到了以下链接，指定了谷歌的按钮css样式

Google button css style

谷歌按钮css风格

Right now I have also searched the net and found out this style that resembles google's button

现在我也搜索了网络，发现这种风格类似谷歌的按钮

<Style x:Key="GoogleGreyButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FFF5F5F5"/>
    <Setter Property="BorderBrush" Value="#FFDCDCDC"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#FF666666"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="8,7"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    CornerRadius="1" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                </Border>

                <ControlTemplate.Triggers>
                    <!--TODO: Set the right colors-->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FFC6C6C4" />
                        <Setter Property="Foreground" Value="#FF020202" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                       ` <!--Some setters here--> `

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Trigger Property="IsPressed" Value="True"> part i need to produce some shadow drop effect as in the above Google button css style, may I know how can i achieve that?

部分我需要产生一些阴影掉落效果，如上面的Google按钮css样式，我可以知道如何实现这一点？

1 个解决方案

#1

You can produce a shadow drop ish effect by changing the BorderThickness some. Try something like this:

您可以通过更改BorderThickness来产生阴影效果。尝试这样的事情：

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="BorderThickness" Value="1,1,2,2" />
</Trigger>

Note that doing it this way can mess up your layout a bit, since it changes the total width and height of your button, so other controls around it may "bump around" just a tad when hovering the button.

请注意，这样做可能会使您的布局陷入困境，因为它会改变按钮的总宽度和高度，因此当它悬停按钮时，它周围的其他控件可能会“晃动”一点点。

If you want to play around with proper drop shadow, you can add drop shadow to your button like this:

如果你想玩适当的阴影，你可以添加阴影到你的按钮，如下所示：

<Button>
    <Button.BitmapEffect>
        <DropShadowBitmapEffect Color="Black" Direction="320" Softness="1" ShadowDepth="10" Opacity="0.5" />
    </Button.BitmapEffect>
</Button>

EDIT:

编辑：

As MrDosu commented, BitMapEffect is deprecated so you should probably use Effect instead.

正如MrDosu评论的那样，BitMapEffect已被弃用，因此您应该使用Effect。

Here's a sample using Effect:

这是使用Effect的示例：

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Button.Effect">
        <Setter.Value>
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
        </Setter.Value>
    </Setter>
</Trigger>

#1