Cómo crear un efecto de sombreado alrededor de un botón wpf como el botón de google

Question

Estoy intentando crear un botón de google en wpf. He encontrado el siguiente enlace que especifica el estilo css botón del Google

Google button css style

En este momento también he buscado la red y se enteró de este estilo que se asemeja botón de Google

<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"> parte que necesito para producir algún efecto de sombreado como en el anterior Google button css style, ¿puedo saber cómo puedo lograr eso?

Answer 1

Puede producir un efecto de caída de sombra cambiando el valor de BorderThickness. Intentar algo como esto:

<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> 

Tenga en cuenta que hacerlo de esta manera puede estropear su diseño un poco, ya que cambia la anchura total y la altura de su botón, por lo demás controles que lo rodea puede "reactivar en torno a" sólo una tad cuando se pasa el botón.

Si quieres jugar un poco con sombra adecuada, puede agregar sombra a su botón de la siguiente manera:

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

EDIT:

Como se comentó MrDosu, BitMapEffect es obsoleto por lo que probablemente debería usar Effect en su lugar.

Aquí hay una muestra usando Efecto:

<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>