WPF 使用border绘制出只显示四个直角的效果-526互联

前段时间为项目做了个人脸识别登录的功能，但无奈本人功底有限（样式没有那么让老板满意），最后请了个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>