Comment créer une ombre à l'effet de goutte autour d'un wpf bouton comme le bouton google

Je suis en train de créer un bouton google en wpf. J'ai trouvé le lien suivant qui indique le google bouton de style css

Google touche de style css

Droit maintenant, j'ai aussi cherché sur le net et découvert ce style qui ressemble à google bouton

<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"> la partie i de la nécessité de produire de l'ombre effet de goutte comme ci-dessus Google touche de style css, mai je sais comment puis-je y parvenir?

Vous devriez envisager d'utiliser expression blend pour créer votre INTERFACE utilisateur wpf. il répond à votre besoin joliment

OriginalL'auteur tesla1060 | 2012-09-28

19

Vous pouvez produire une ombre baisse ish effet en changeant la BorderThickness certains. Essayez quelque chose comme ceci:
```
<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>
```
Noter que cette façon de faire peut gâcher votre mise en page un peu, car il modifie la largeur totale et la hauteur de votre bouton, de sorte que les autres contrôles autour d'elle ne "bosse autour de" juste un peu lors du survol du bouton.

Si vous voulez jouer avec une bonne ombre portée, vous pouvez ajouter de l'ombre portée à votre bouton comme ceci:
```
<Button>
    <Button.BitmapEffect>
        <DropShadowBitmapEffect Color="Black" Direction="320" Softness="1" ShadowDepth="10" Opacity="0.5" />
    </Button.BitmapEffect>
</Button>
```
EDIT:

Comme MrDosu commenté, BitMapEffect est obsolète, de sorte que vous devriez utiliser Effet à la place.

Voici un échantillon à l'aide de l'Effet:
```
<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>
```
Dans l' .NET Framework 4 ou plus tard, le BitmapEffect classe est obsolète. Si vous essayez d'utiliser la BitmapEffect classe, vous obtiendrez un objet d'exception. Le non-obsolète alternative à la BitmapEffect classe est la classe d'Effet. Dans la plupart des cas, la classe d'Effet est nettement plus rapide.
encore une question, quel est le Déclencheur de la propriété pour de la souris bouton gauche après avoir cliqué sur le bouton? Je voudrais que le bouton revenir à IsEnabled état après avoir cliqué.
très belle 🙂 incroyable

OriginalL'auteur Eirik

Si vous souhaitez mettre en œuvre un matériel de l'ombre (la soi-disant élévation), vous pouvez utiliser ce code:

public static class UI
{
public static readonly DependencyProperty ElevationProperty = DependencyProperty.RegisterAttached("Elevation", typeof(double), typeof(UI), new FrameworkPropertyMetadata(default(double), FrameworkPropertyMetadataOptions.AffectsRender, null, OnElevationChanged));
public static double GetElevation(this UIElement element) => element.GetValue(ElevationProperty) as double? ?? default;
public static void SetElevation(this UIElement element, double elevation) => element.SetValue(ElevationProperty, elevation);
private static object OnElevationChanged(DependencyObject d, object value)
{
if (d is UIElement element && value is double elevation)
if (elevation == 0)
element.Effect = null;
else
{
Effect e = CreateElevation(elevation, element.Effect);
if (e != null)
element.Effect = e;
}
return value;
}
private static Effect CreateElevation(double elevation, Effect source)
{
void MixShadows(DropShadowEffect nearest, DropShadowEffect matched, double balance)
{
matched.BlurRadius = matched.BlurRadius * (1 - balance) + nearest.BlurRadius * balance;
matched.ShadowDepth = matched.ShadowDepth * (1 - balance) + nearest.ShadowDepth * balance;
}
DropShadowEffect[] shadows = new DropShadowEffect[]
{
new DropShadowEffect()
{
BlurRadius = 5,
ShadowDepth = 1
},
new DropShadowEffect()
{
BlurRadius = 8,
ShadowDepth = 1.5
},
new DropShadowEffect()
{
BlurRadius = 14,
ShadowDepth = 4.5
},
new DropShadowEffect()
{
BlurRadius = 25,
ShadowDepth = 8
},
new DropShadowEffect()
{
BlurRadius = 35,
ShadowDepth = 13
}
};
elevation = Math.Max(0, elevation / 12 * shadows.Length - 1);
int prevIndex = (int)Math.Floor(elevation), index = (int)elevation, nextIndex = (int)Math.Ceiling(elevation);
double approx = elevation - index;
DropShadowEffect shadow = shadows[index];
if (approx != 0)
MixShadows(approx < 0 ? shadows[prevIndex] : shadows[nextIndex], shadow, Math.Abs(approx));
bool modify = false;
if (source is DropShadowEffect sourceShadow)
{
sourceShadow.BlurRadius = shadow.BlurRadius;
sourceShadow.ShadowDepth = shadow.ShadowDepth;
shadow = sourceShadow;
modify = true;
}
shadow.Direction = 270;
shadow.Color = Color.FromArgb(0xAA, 0, 0, 0);
shadow.Opacity = .42;
shadow.RenderingBias = RenderingBias.Performance;
return modify ? null : shadow;
}
}

Et puis:

<Button local:Elevation="2">Elevated button</Button>

Vous pouvez régler une valeur entre 2 et 12 de l'altitude de tout UIElement.

OriginalL'auteur Davide Cannizzo

Vous devez vous connecter pour publier un commentaire.