WPF Grid自定义不规则背景

---

前言

因为设计需要如上图类似效果的边框，所以需要使用PathGeometry来绘制自定义的图形来实现效果。天也不早了,人也不少了,鸡也不叫了,狗也不咬了，下面来看实现。

---

一、代码实现、

1.1、编写样式

LineSegment  画直线，
ArcSegment 画弧线实现圆角效果

<DrawingImage x:Key="radius_irr">
        <DrawingImage.Drawing>
            <GeometryDrawing>
                <GeometryDrawing.Pen>
                    <!-- 设置边框颜色和粗细  -->
                    <Pen Thickness="0.2" Brush="Gray" />
                </GeometryDrawing.Pen>
                <GeometryDrawing.Geometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,90" IsClosed="true" >
                            <ArcSegment Size="10,10"  IsLargeArc="False" SweepDirection="CounterClockwise" Point="5,100" />
                            <LineSegment Point="85,100"></LineSegment>
                            <ArcSegment Size="10,10"  IsLargeArc="False" SweepDirection="CounterClockwise" Point="90,95" />
                            <LineSegment Point="90,80"></LineSegment>
                            <LineSegment Point="88,78"></LineSegment>
                            <LineSegment Point="88,30"></LineSegment>
                            <LineSegment Point="90,29"></LineSegment>
                            <LineSegment Point="90,15"></LineSegment>
                            <ArcSegment Size="10,10"  IsLargeArc="False" SweepDirection="CounterClockwise" Point="85,10" />
                            <LineSegment Point="85,10"></LineSegment>
                            <LineSegment Point="5,10"></LineSegment>
                            <ArcSegment Size="10,10"  IsLargeArc="False" SweepDirection="CounterClockwise" Point="0,20" />
                            <LineSegment Point="0,29"></LineSegment>
                            <LineSegment Point="2,30"></LineSegment>
                            <LineSegment Point="2,78" ></LineSegment>
                            <LineSegment Point="0,80" ></LineSegment>
                            <!--<LineSegment Point="0,12"></LineSegment>-->
                        </PathFigure>
                    </PathGeometry>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingImage.Drawing>
    </DrawingImage>

1.2、将背景加入页面

 <Grid>
 	<Grid.Background>
    	 <ImageBrush ImageSource="{StaticResource radius_irr}"></ImageBrush>
    </Grid.Background>
</Grid>                    

1.3、效果展示

最终实现了类似效果