Sample 002 非矩形窗口的实现

一、知识要点

本文主要涉及Path 应用
Path：绘制一系列相互连接的直线和曲线。 public sealed class Path : Shape

二、实现方法

1. 设置窗体样式和透明

WindowStyle=“None”
AllowsTransparency=“True”
Background=“Transparent”

2. 使用 Path 创建非矩形窗口边缘

LinearGradientBrush使用线性渐变绘制区域
GradientStop:描述渐变中转换点的位置和颜色。
PathGeometry:表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状。
PathFigure: 表示几何图形的一个子部分、一系列单独连接的二维几何线段
LineSegment:表示两点之间创建一条直线
ArcSegment:表示两点之间的一条椭圆弧。

 <Path Stroke="DarkGray" StrokeThickness="2">

    <Path.Fill>
        <LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1" >
            <GradientStop Color="White"  Offset="0" />
            <GradientStop Color="White"  Offset="0.45" />
            <GradientStop Color="LightBlue" Offset="0.9" />
            <GradientStop Color="Gray" Offset="1" />
        </LinearGradientBrush>
    </Path.Fill>

    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="40,20" IsClosed="True">
                <LineSegment Point="160,20" />
                <ArcSegment Point="180,40" Size="20,20" SweepDirection="Clockwise" />
                <LineSegment Point="180,80" />
                <ArcSegment Point="160,100" Size="20,20" SweepDirection="Clockwise" />
                <LineSegment Point="90,100" />
                <LineSegment Point="100,150" />
                <LineSegment Point="60,100" />
                <LineSegment Point="40,100" />
                <ArcSegment Point="20,80" Size="20,20" SweepDirection="Clockwise" />
                <LineSegment Point="20,40" />
                <ArcSegment Point="40,20" Size="20,20" SweepDirection="Clockwise" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>

效果如图

3.为图形右上角添加一个自绘按钮

<Button Canvas.Top="30" Canvas.Left="150" >
    <Button.Template>
        <ControlTemplate>
            <Canvas>
                <Rectangle x:Name="buttonBorder" Width="15" Height="
                           Stroke="Black" 
                           StrokeThickness="1" 
                           Fill="Red"
                           RadiusX="3" RadiusY="3" />
             
   

    <!--Polyline 不会自动闭合-->
    <Polyline Stroke="White" StrokeThickness="2"
                        StrokeLineJoin="Round" Points="3,3 12,12" 
                        StrokeStartLineCap="Round"
                        StrokeEndLineCap="Round"/>
    <Polyline Stroke="White" StrokeThickness="2"
                        StrokeLineJoin="Round" Points="12,3 3,12" 
                        StrokeStartLineCap="Round"
                        StrokeEndLineCap="Round"/>

最终效果图如下:

参考 https://blog.csdn.net/qianshen88/article/details/16969833