google düğmesi gibi bir wpf düğmesi etrafında gölge bırakma efekti oluşturma

Question

Wpf'de bir google düğmesi oluşturmaya çalışıyorum. Ben de net aradı ve google'ın düğmesi ihtiyacım

<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"> bölümünü andıran bu tarz öğrendim şimdi

Google button css style

Sağ google'ın düğme css stil belirten aşağıdaki linki bulduk Yukarıdaki Google button css style'da olduğu gibi bazı gölge düşüşleri üretmek için bunu nasıl başarabilirim?

Answer 1

BorderThickness bazılarını değiştirerek gölge düşüşü ish efekti üretebilirsiniz. Böyle bir şey deneyin: Bu Düğmenizin toplam genişlik ve yüksekliğini değiştirir beri böylece diğer kontroller onun etrafında "etrafında çarpmak" olabilir,

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

Not bu şekilde altüst düzeni biraz can yapıyor bu sadece bir düğmeyi tutarken biraz. Doğru gölge düşen etrafında oynamak istiyorsanız

, bu gibi düğmeye gölge ekleyebilirsiniz:

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

DÜZENLEME:

MrDosu yorumladığı gibi, BitMapEffect size böylece kullanımdan kaldırıldı bunun yerine Effect kullanmalısınız.

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