C#中的Drawing 类案例详解

<window x:class="demodrawing.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        title="drawing 示例" width="300" height="200">
    <grid>
        <!-- 使用 drawingbrush 做背景 -->
        <rectangle x:name="btnrect" width="180" height="60"
                   mouseenter="btnrect_mouseenter"
                   mouseleave="btnrect_mouseleave">
            <rectangle.resources>
                <!-- 阴影 drawing -->
                <geometrydrawing x:key="shadow"
                                 geometry="m 5,5 175,5 175,55 5,55 z"
                                 brush="#80000000">
                    <geometrydrawing.pen>
                        <pen brush="transparent" thickness="1"/>
                    </geometrydrawing.pen>
                </geometrydrawing>
                <!-- 按钮主体 drawing -->
                <geometrydrawing x:key="body" geometry="m 0,0 170,0 170,50 0,50 z">
                    <geometrydrawing.brush>
                        <lineargradientbrush startpoint="0,0" endpoint="0,1">
                            <gradientstop offset="0"  color="#ff4c9aff"/>
                            <gradientstop offset="1"  color="#ff0050dd"/>
                        </lineargradientbrush>
                    </geometrydrawing.brush>
                    <geometrydrawing.pen>
                        <pen brush="#ff003399" thickness="2"/>
                    </geometrydrawing.pen>
                </geometrydrawing>
                <!-- 组合 drawinggroup -->
                <drawinggroup x:key="combined">
                    <!-- 先画阴影 -->
                    <drawinggroup.children>
                        <drawinggroup>
                            <drawinggroup.children>
                                <staticresource resourcekey="shadow"/>
                            </drawinggroup.children>
                            <drawinggroup.bitmapeffect>
                                <blurbitmapeffect radius="5"/>
                            </drawinggroup.bitmapeffect>
                        </drawinggroup>
                        <!-- 再画按钮主体 -->
                        <staticresource resourcekey="body"/>
                    </drawinggroup.children>
                </drawinggroup>
                <!-- 把 drawinggroup 变成 brush -->
                <drawingbrush x:key="btnbrush" drawing="{staticresource combined}"/>
            </rectangle.resources>
            <rectangle.fill>
                <staticresource resourcekey="btnbrush"/>
            </rectangle.fill>
        </rectangle>
    </grid>
</window>

public partial class mainwindow : window
{
    public mainwindow()
    {
        initializecomponent();
    }
    private void btnrect_mouseenter(object sender, mouseeventargs e)
    {
        // 找到 drawing 里的渐变刷
        var rect = (rectangle)sender;
        var brush = (drawingbrush)rect.fill;
        var dg = (drawinggroup)brush.drawing;
        var body = (geometrydrawing)((drawinggroup)dg.children[1]).children[0];
        var lg = (lineargradientbrush)body.brush;
        // 动画高亮
        var da = new coloranimation(color.fromrgb(0x6f, 0xba, 0xff),
                                    timespan.frommilliseconds(300));
        lg.gradientstops[0].beginanimation(gradientstop.colorproperty, da);
    }
    private void btnrect_mouseleave(object sender, mouseeventargs e)
    {
        var rect = (rectangle)sender;
        var brush = (drawingbrush)rect.fill;
        var dg = (drawinggroup)brush.drawing;
        var body = (geometrydrawing)((drawinggroup)dg.children[1]).children[0];
        var lg = (lineargradientbrush)body.brush;
        var da = new coloranimation(color.fromrgb(0x4c, 0x9a, 0xff),
                                    timespan.frommilliseconds(300));
        lg.gradientstops[0].beginanimation(gradientstop.colorproperty, da);
    }
}

protected override void onpaint(painteventargs e)
{
    var g = e.graphics;
    g.smoothingmode = smoothingmode.antialias;
    // 1. 阴影
    using (var path = createroundrect(5, 5, 175, 55, 8))
    using (var brush = new solidbrush(color.fromargb(128, 0, 0, 0)))
    using (var blur = new bitmap(180, 60))
    {
        using (var g2 = graphics.fromimage(blur))
        {
            g2.smoothingmode = smoothingmode.antialias;
            g2.fillpath(brush, path);
        }
        // 手动高斯模糊（略）...
        g.drawimage(blur, 0, 0);
    }
    // 2. 主体
    using (var path = createroundrect(0, 0, 170, 50, 8))
    using (var brush = new lineargradientbrush(
        new point(0, 0), new point(0, 50),
        color.fromargb(255, 0x4c, 0x9a, 0xff),
        color.fromargb(255, 0x00, 0x50, 0xdd)))
    using (var pen = new pen(color.fromargb(255, 0x00, 0x33, 0x99), 2))
    {
        g.fillpath(brush, path);
        g.drawpath(pen, path);
    }
}
private graphicspath createroundrect(float x, float y, float w, float h, float r)
{
    var gp = new graphicspath();
    gp.addarc(x + w - r, y, r, r, 270, 90);
    gp.addarc(x + w - r, y + h - r, r, r, 0, 90);
    gp.addarc(x, y + h - r, r, r, 90, 90);
    gp.addarc(x, y, r, r, 180, 90);
    gp.closefigure();
    return gp;
}