在边界路径周围创建边框刷＃34;

Question

我试图在边框路径周围创建一个渐变笔划的边框，而不是在整个元素周围，而是围绕边框本身。

我不想要的一个简单例子是：

<Border BorderThickness="10" Width="100" Height="50">
    <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

这会创建一个如下所示的边框：

我要实现的愿望如下图所示。请注意，这是通过模糊实现的，我宁可不这样做，因为这会限制可以做的事情 - 更重要的是：它会模糊所有子元素，或者我将失去使用边界处于预期位置。 （边界将是对其内容＆＃34;）的嘲弄

Answer 1

稍微进入shadow边框，它看起来更近了

<Border BorderThickness="5" Width="100" Height="50" CornerRadius="5"  BorderBrush="Gray">
    <Border.Effect>
        <DropShadowEffect BlurRadius="20" Opacity="1" ShadowDepth="1" Color="Black">
        </DropShadowEffect>
    </Border.Effect>
</Border>

它会给你类似的东西

<强>替代地

你可以使用当前的一个（绑定宽度和高度）在同一个地方绘制Blured dummy边框，但在标记中更低，在这种情况下，UI会在容器边框上绘制dummy边框并且你会在不伤害树的情况下看到bluring

<Border BorderThickness="0" Width="100" Height="50" CornerRadius="5" BorderBrush="Gray" x:Name="x">
    <TextBox Width="70" Height="20">Some data</TextBox>
</Border>
<Border BorderThickness="5" Width="{Binding Width, ElementName=x}" Height="{Binding Height, ElementName=x}" CornerRadius="0" BorderBrush="Black">
    <Border.Effect>
        <BlurEffect Radius="10"></BlurEffect>
    </Border.Effect>
</Border>

Answer 2

如果你真的希望能够有一个模糊的渐变边框，我想你可能不得不这样做。

1. 使用渐变创建一个空格形状：



1. 然后复制此形状3次并应用一些渲染变换以获得边框形状

2. 对整个形状应用模糊效果



我直接从WPF结果制作了所有截图。