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>