如何仅从边界外完成发光效果?
How can glowing effect be done only from outside the border?
我想要的是只有按钮边框外的阴影,里面没有阴影。有没有办法在按钮样式中做到这一点?
找到了我需要的东西,但阴影来自边界内外。
我试图在 DropShadowEffect
属性和 Border
属性中搜索或在互联网上搜索,但我没有找到任何东西。
<Style x:Key="GlowingBorder" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Margin="10" Background="Transparent"
BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="#72f4aa"
Opacity="1"
BlurRadius="6"/>
</Border.Effect>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
预期:外部有阴影,边界内部没有阴影。带有边框颜色的填充按钮。
当前结果:边界内外都有阴影。 Foreground
和 Background
属性在 Style
中无效,按钮的 Context
也不显示。不知道为什么。
我该如何解决?
我还没有测试过这个,但我假设你的按钮的背景是透明的。可能正常情况下只有外面有影子,但因为里面是透明的,你可以透过按钮看到,里面也会发光。
编辑:显然您可以为效果添加填充,这可能会解决您遇到的问题:https://www.oreilly.com/library/view/hlsl-and-pixel/9781449324995/ch04.html
在我链接的网站上找到这个:
这样的事情怎么样:
<Style x:Key="GlowingBorder" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border Margin="10" Background="Transparent"
BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="#72f4aa"
Opacity="1"
BlurRadius="6"/>
</Border.Effect>
</Border>
<Border BorderBrush="#171e25" BorderThickness="1"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding Border.CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这应该适用于所有没有透明背景的按钮,因为您将另一个 Border 控件放置在发光的按钮之上,从而覆盖了内部发光。
我想要的是只有按钮边框外的阴影,里面没有阴影。有没有办法在按钮样式中做到这一点?
找到了我需要的东西,但阴影来自边界内外。
我试图在 DropShadowEffect
属性和 Border
属性中搜索或在互联网上搜索,但我没有找到任何东西。
<Style x:Key="GlowingBorder" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Margin="10" Background="Transparent"
BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="#72f4aa"
Opacity="1"
BlurRadius="6"/>
</Border.Effect>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
预期:外部有阴影,边界内部没有阴影。带有边框颜色的填充按钮。
当前结果:边界内外都有阴影。 Foreground
和 Background
属性在 Style
中无效,按钮的 Context
也不显示。不知道为什么。
我该如何解决?
我还没有测试过这个,但我假设你的按钮的背景是透明的。可能正常情况下只有外面有影子,但因为里面是透明的,你可以透过按钮看到,里面也会发光。
编辑:显然您可以为效果添加填充,这可能会解决您遇到的问题:https://www.oreilly.com/library/view/hlsl-and-pixel/9781449324995/ch04.html
在我链接的网站上找到这个:
这样的事情怎么样:
<Style x:Key="GlowingBorder" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border Margin="10" Background="Transparent"
BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="#72f4aa"
Opacity="1"
BlurRadius="6"/>
</Border.Effect>
</Border>
<Border BorderBrush="#171e25" BorderThickness="1"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding Border.CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这应该适用于所有没有透明背景的按钮,因为您将另一个 Border 控件放置在发光的按钮之上,从而覆盖了内部发光。