如何在像谷歌按钮这样的 wpf 按钮周围创建阴影效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12635307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a shadow drop effect around a wpf button like the google button
提问by tesla1060
I am trying to create a google button in wpf. I have found the following link that specifies the google's button css style
我正在尝试在 wpf 中创建一个 google 按钮。我发现以下链接指定了 google 的按钮 css 样式
Right now I have also searched the net and found out this style that resembles google's button
现在我也在网上搜了一下，发现这个样式很像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">part i need to produce some shadow drop effect as in the above Google button css style, may I know how can i achieve that?
<Trigger Property="IsPressed" Value="True">我需要在上面的Google 按钮 css 样式中产生一些阴影效果，我可以知道如何实现吗？
回答by Eirik
You can produce a shadow drop ish effect by changing the BorderThickness some. Try something like this:
您可以通过更改一些 BorderThickness 来产生阴影下降效果。尝试这样的事情：
<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>
Note that doing it this way can mess up your layout a bit, since it changes the total width and height of your button, so other controls around it may "bump around" just a tad when hovering the button.
请注意，这样做可能会稍微弄乱您的布局，因为它会更改按钮的总宽度和高度，因此当悬停按钮时，它周围的其他控件可能会“颠簸”一下。
If you want to play around with proper drop shadow, you can add drop shadow to your button like this:
如果您想使用适当的阴影，可以像这样为按钮添加阴影：
<Button>
<Button.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320" Softness="1" ShadowDepth="10" Opacity="0.5" />
</Button.BitmapEffect>
</Button>
EDIT:
编辑：
As MrDosu commented, BitMapEffectis deprecated so you should probably use Effectinstead.
正如 MrDosu 评论的那样，BitMapEffect已被弃用，因此您可能应该改用Effect。
Here's a sample using Effect:
这是一个使用 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>
回答by Davide Cannizzo
If you want to implement a material shadow (the so-called elevation), you could use this 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;
}
}
And then:
进而：
<Button local:Elevation="2">Elevated button</Button>
You can set any value between 2 and 12 as elevation of any UIElement.
您可以将 2 到 12 之间的任何值设置为 any 的高程UIElement。
