2012-09-28 41 views
10

Estoy intentando crear un botón de google en wpf. He encontrado el siguiente enlace que especifica el estilo css botón del GoogleCómo crear un efecto de sombreado alrededor de un botón wpf como el botón de 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?

+0

Debe considerar el uso de Expression Blend para crear la interfaz de usuario de WPF. cumple con su necesidad muy bien – Yohannes

Respuesta

17

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

En .NET Framework 4 o posterior, la clase BitmapEffect es obsoleta. Si intenta utilizar la clase BitmapEffect, obtendrá una excepción obsoleta. La alternativa no obsoleta a la clase BitmapEffect es la clase Effect. En la mayoría de las situaciones, la clase Effect es significativamente más rápida. – MrDosu

+0

una pregunta más, ¿cuál es la propiedad de Disparo para el botón izquierdo del mouse después de hacer clic en el botón? Me gustaría que el botón vuelva al estado 'IsEnabled' después de hacer clic. – tesla1060

+0

muy hermoso :) increíble –

Cuestiones relacionadas