Come creare un effetto drop shadow attorno a un pulsante wpf come il pulsante google

Question

Sto provando a creare un pulsante google in wpf. Ho trovato il seguente link che specifica il pulsante stile css del google

Google button css style

In questo momento ho cercato anche in rete e scoperto questo stile che ricorda il pulsante di 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 ho bisogno per produrre un effetto goccia d'ombra come nel precedente numero Google button css style, posso sapere come posso ottenerlo?

Answer 1

È possibile produrre un effetto di riduzione dell'ombra ish cambiando il BorderThickness alcuni. Provare qualcosa di simile:

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

Nota che facendo in questo modo può rovinare il layout un po ', dal momento che cambia la larghezza totale e l'altezza del pulsante, in modo che altri controlli intorno ad esso possono "bump intorno" solo un tad quando si passa il mouse sul pulsante.

Se si vuole giocare con adeguata ombra, è possibile aggiungere un'ombra al pulsante in questo modo:

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

EDIT:

Come ha commentato MrDosu, BitMapEffect è deprecato in modo da dovrebbe probabilmente usare Effect invece.

Ecco un esempio utilizzando Effetto:

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