WPF 使用border绘制出只显示四个直角的效果
前段时间为项目做了个人脸识别登录的功能,但无奈本人功底有限(样式没有那么让老板满意),最后请了个UI工程师重新设计了一份。UI设计的效果开发再去实现的过程(懂的都懂),最后居然卡在了一个直角边框上。搜寻了很多资料居然没有着相关的样式,这个也是踩坑了挺久。这里奉上结果的代码
<Border BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="0.1" Color="Black" />
<GradientStop Offset="0.1" Color="Transparent" />
<GradientStop Offset="0.4" Color="Transparent" />
<GradientStop Offset="0.4" Color="Black" />
<GradientStop Offset="0.6" Color="Black" />
<GradientStop Offset="0.6" Color="Transparent" />
<GradientStop Offset="0.9" Color="Transparent" />
<GradientStop Offset="0.9" Color="Black" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
修改直角的边的长度可以通过修改内部的 GradientStop标记的Offset属性来实现
同时也奉上虚线边框的样式,同样是使用BorderBrush实现的
<Border.BorderBrush>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle
x:Name="AlertBox"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"
Margin="5"
Stroke="Black"
StrokeDashArray="5"
StrokeDashOffset="2" />
</VisualBrush.Visual>
</VisualBrush>
</Border.BorderBrush>
浙公网安备 33010602011771号