Frage Wie man einen Schattentropfeneffekt um eine wpf-Taste wie die Google-Taste erzeugt


Ich versuche eine Google-Schaltfläche in WPF zu erstellen. Ich habe den folgenden Link gefunden, der den Google Button CSS-Stil angibt

Google-Taste CSS-Stil

Gerade jetzt habe ich auch im Internet gesucht und habe diesen Stil gefunden, der Googles Button ähnelt

<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"> Teil muss ich einen Schattentropfeneffekt wie oben produzieren Google-Taste CSS-StilKann ich wissen, wie ich das erreichen kann?


10
2017-09-28 07:14


Ursprung


Antworten:


Sie können einen Shadow-Drop-Ish-Effekt erzeugen, indem Sie den BorderThickness-Wert ändern. Versuchen Sie etwas wie folgt:

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

Beachten Sie, dass Sie dadurch Ihr Layout ein wenig durcheinander bringen können, da es die Gesamtbreite und -höhe Ihrer Schaltfläche ändert, sodass andere Steuerelemente in der Umgebung nur ein bisschen herumstolpern können, wenn Sie die Maustaste gedrückt halten.

Wenn Sie mit dem richtigen Schlagschatten herumspielen möchten, können Sie Ihrer Schaltfläche Schlagschatten hinzufügen:

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

BEARBEITEN:

Wie Herr Dosu bemerkte, BitMapEffect ist veraltet, also sollten Sie wahrscheinlich verwenden Bewirken stattdessen.

Hier ist ein Beispiel mit Effekt:

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

17
2017-09-28 07:46