Google बटन

Question

जैसे wpf बटन के चारों ओर छाया ड्रॉप प्रभाव कैसे बनाएं I wpf में एक Google बटन बनाने का प्रयास कर रहा हूं। मैं नीचे दिए गए लिंक है कि गूगल के बटन सीएसएस शैली निर्दिष्ट करता है अब

Google button css style

सही मैं भी शुद्ध खोज की है और इस शैली है कि गूगल के बटन

<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"> भाग मैं की जरूरत है जैसा दिखता है पता चला है पाया है उपरोक्त Google button css style में कुछ छाया ड्रॉप प्रभाव उत्पन्न करने के लिए, क्या मुझे पता चलेगा कि मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

आप कुछ सीमाओं को बदलकर छाया ड्रॉप आईश प्रभाव उत्पन्न कर सकते हैं। कुछ इस तरह का प्रयास करें:,

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

ध्यान दें कि यह इस तरह से गंदगी अपने लेआउट थोड़ा कर सकते हैं कर के बाद से यह कुल चौड़ाई और अपने बटन की ऊंचाई में परिवर्तन, इसलिए अन्य नियंत्रण उसके चारों ओर "चारों ओर टक्कर" हो सकता है सिर्फ एक बटन को घुमाने पर टैड करें।

आप उचित ड्रॉप छाया के साथ चारों ओर खेलने के लिए चाहते हैं, तो आप ड्रॉप छाया अपने बटन को इस तरह जोड़ सकते हैं:

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

संपादित करें:

रूप MrDosu टिप्पणी की, BitMapEffect तो आप अब मान्य नहीं है शायद इसके बजाय 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>