WPF界面设计技巧（1）—不规则窗体图文指南

原文:WPF界面设计技巧（1）—不规则窗体图文指南
 

初到园子，奉上第一篇入门级教程，请勿见笑。

以往WinForm编程中，实现不规则窗体是有一定难度的，更难的是不规则窗体的边缘抗锯齿及局部透明处理。而现在，WPF的出现使这个问题迎刃而解，使得我们可以轻松、灵活地美化用户界面。

下面就让我们来看看如何实现一个不规则窗体：

首先我们需要借助Microsoft Expression Design 2来进行图形设计。（这里使用Photoshop等传统软件也可以，但是只能利用PNG格式来实现透明，其缺点就是不支持无损缩放，且不支持动态修改。）

打开Microsoft Expression Design 2中文版，点击菜单“文件 > 新建”，依照下图进行设置，这里将文档尺寸单位设为“像素”，便于与应用程序的布局单位相对应。

然后随心所欲的画吧，想画成什么样都行，但注意Microsoft Expression Design 2中绘制的图形并非全部都是矢量的，比如纹理填充、一些特殊笔刷以及滤镜效果(输出时有“将实时效果转换为XAML效果”的选项，但是点了无用，不知道是不是BUG)都会以位图形式输出。

这是我画出来的图形：

这里要注意的是：最好将所有元素都放在一个图层里，因为我们后面导出资源字典的时候需要依据图层来分组，我们画好之后要给图层重命名，在这里我给它命名为“back”，这个名称将在后面代码中引用资源时使用。

接下来点击菜单“文件 > 导出...”，将格式设为“XAML WPF 资源字典”，分组依据设为“层”，实时效果设为“转换为XAML效果”(貌似无用的设置)。然后按“浏览...”按钮选择输出路径，然后按“全部导出”按钮完成导出。

然后就可以保存文件，关闭Microsoft Expression Design 2了。

打开Microsoft Visual Studio 2008，点击菜单“文件 > 新建 > 项目...”，选择“WPF 应用程序”，名称设为“不规则窗体”。

点击菜单“项目 > 添加现有项...”，浏览并选择此前导出的资源字典文件(选的时候注意把右边的文件类型过滤改一下，默认是C#文件类型)。如下图所示，这就是导入的资源字典文件。

引入的资源字典内容如下，我们不需要搞明白这些对图形的描述语法，只要了解其中的“x:Key="back"”对应的是我们之前设计时的图层名称，我们在程序中引用此资源时要使用这个名称。

 

Code
<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingBrush x:Key="back" Stretch="Uniform">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                    <GeometryDrawing Geometry="F1 M 314,22.1249C 432.672,22.1249 528.875,118.328 528.875,237C 528.875,355.672 432.672,451.875 314,451.875C 195.328,451.875 99.1248,355.672 99.1248,237C 99.1248,118.328 195.328,22.1249 314,22.1249 Z M 314,51.0359C 211.295,51.0359 128.036,134.295 128.036,237C 128.036,339.705 211.295,422.964 314,422.964C 416.705,422.964 499.964,339.705 499.964,237C 499.964,134.295 416.705,51.0359 314,51.0359 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="7" LineJoin="Round" Brush="#27000000"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#C0FFAA00" Offset="0"/>
                                    <GradientStop Color="#C0FF7B00" Offset="0.52968"/>
                                    <GradientStop Color="#C0C33600" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing Geometry="F1 M 314,75.2265C 403.345,75.2265 475.773,147.655 475.773,237C 475.773,326.345 403.345,398.773 314,398.773C 224.655,398.773 152.226,326.345 152.226,237C 152.226,147.655 224.655,75.2265 314,75.2265 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="7" LineJoin="Round" Brush="#40000000"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="0.613236" RadiusY="0.613236" Center="0.349879,0.320823" GradientOrigin="0.349879,0.320823">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFAA00" Offset="0"/>
                                    <GradientStop Color="#FFFF7B00" Offset="0.52968"/>
                                    <GradientStop Color="#FFC33600" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="#4DFFFFFF" Geometry="F1 M 157.841,265.533C 142.319,179.133 199.776,96.5089 286.175,80.9863C 372.575,65.4637 455.199,122.921 470.722,209.321C 478.801,254.288 467.111,298.233 441.861,332.227C 463.016,301.118 472.481,262.027 465.303,222.074C 450.748,141.06 373.274,87.1843 292.26,101.739C 211.246,116.294 157.37,193.768 171.925,274.782C 182.834,335.504 229.091,380.98 285.691,393.823C 222.386,382.241 169.892,332.609 157.841,265.533 Z "/>
                    <GeometryDrawing Brush="#FF7D2500" Geometry="F1 M 159.711,201.088C 157.087,201.784 154.011,202.391 150.484,202.911C 146.958,203.431 142.101,204.247 135.913,205.36C 132.212,205.939 128.786,207.234 125.634,209.247C 122.483,211.259 121.171,214.356 121.698,218.535C 122.983,223.02 125.175,225.092 128.274,224.752C 131.372,224.412 133.686,227.139 135.215,232.934C 136.424,240.111 137.31,250.716 137.873,264.748C 138.435,278.781 138.127,289.269 136.946,296.211C 135.849,299.806 133.934,302.056 131.204,302.962C 128.474,303.868 127.314,306.26 127.724,310.137C 128.364,314.5 131.276,317.005 136.463,317.651C 141.649,318.297 150.21,317.462 162.146,315.146C 166.995,314.526 173.157,312.979 180.631,310.506C 188.105,308.033 191.723,303.905 191.487,298.123C 190.41,294.828 188.268,293.298 185.06,293.533C 181.851,293.768 179.622,291.772 178.372,287.546C 176.32,276.163 175.665,269.193 176.406,266.637C 177.148,264.081 178.341,262.917 179.984,263.144C 183.631,263.169 185.679,265.6 186.129,270.438C 186.579,275.275 189.303,277.58 194.3,277.354C 200.028,275.484 202.986,270.56 203.175,262.582C 203.365,254.605 202.872,248.021 201.696,242.829C 201.163,239.458 199.914,236.045 197.949,232.59C 195.984,229.135 193.105,227.599 189.313,227.983C 184.573,229.47 182.392,232.295 182.772,236.459C 183.151,240.623 181.194,243.406 176.899,244.81C 176.019,245.023 175.246,245.108 174.58,245.062C 173.914,245.017 173.478,244.52 173.271,243.569C 172.924,241.392 172.699,238.405 172.596,234.609C 172.494,230.813 172.457,227.75 172.486,225.421C 172.075,222.597 172.584,220.466 174.014,219.029C 175.444,217.593 179.436,216.287 185.989,215.112C 193.137,214.479 197.742,216.408 199.803,220.899C 201.865,225.389 205.519,227.495 210.766,227.216C 214.542,226.401 217.034,224.612 218.242,221.848C 219.451,219.084 219.713,215.959 219.028,212.473C 218.189,208.142 215.983,203.528 212.41,198.631C 208.836,193.733 204.642,191.477 199.826,191.862C 199.345,192.031 197.891,192.623 195.464,193.637C 193.048,194.514 188.857,195.562 182.891,196.779L 159.711,201.088 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="8" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="#FF7D2500" Geometry="F1 M 317.536,217.552C 317.431,216.434 317.334,215.089 317.244,213.517C 317.155,211.945 317.019,210.607 316.837,209.503C 316.273,206.881 315.048,205.241 313.161,204.582C 311.273,203.923 309.108,203.849 306.664,204.357C 303.574,204.915 300.001,206.022 295.944,207.68C 291.887,209.338 288.842,211.37 286.811,213.776C 284.356,217.671 283.601,223.653 284.545,231.722C 285.49,239.791 285.269,248.004 283.882,256.363C 283.376,258.611 282.434,261.022 281.055,263.596C 279.676,266.17 277.715,267.789 275.171,268.453C 271.933,268.424 270.107,265.976 269.694,261.107C 269.281,256.239 269.154,252.943 269.311,251.22C 269.305,246.592 269.297,241.225 269.286,235.121C 269.276,229.016 269.004,224.245 268.473,220.808C 267.965,217.857 266.948,215.728 265.422,214.423C 263.897,213.117 261.637,212.738 258.643,213.284C 254.345,214.127 250.127,215.561 245.987,217.585C 241.847,219.608 237.995,221.917 234.431,224.511C 232.012,226.122 229.487,228.328 226.856,231.128C 224.225,233.927 223.072,236.945 223.397,240.179C 223.845,242.153 224.79,243.317 226.231,243.672C 227.672,244.026 229.221,244.093 230.879,243.874C 233.392,243.79 234.877,244.512 235.334,246.04C 235.792,247.568 236.026,249.425 236.039,251.61C 236.326,257.364 236.432,263.229 236.357,269.207C 236.282,275.185 236.649,280.276 237.457,284.482C 239.77,294.667 245.437,299.168 254.46,297.985C 262.762,296.119 269.537,292.513 274.785,287.17C 280.033,281.826 283.556,278.664 285.355,277.682C 287.744,277.844 289.437,279.957 290.432,284.018C 291.427,288.08 294.238,289.984 298.865,289.731C 304.405,288.591 311.071,285.404 318.864,280.171C 326.656,274.938 330.439,269.275 330.213,263.18C 329.861,261.311 329.19,260.27 328.201,260.06C 327.212,259.849 325.828,259.918 324.047,260.268C 320.959,261.034 319.083,259.77 318.418,256.476C 318.043,254.03 317.898,251.541 317.983,249.01L 317.536,217.552 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="8" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="#FF7D2500" Geometry="F1 M 392.063,233.962C 392.137,238.293 392.142,242.893 392.076,247.762C 392.011,252.631 392.316,257.134 392.993,261.272C 393.692,264.82 395.188,267.289 397.48,268.679C 399.772,270.07 402.634,270.444 406.064,269.803C 411.242,268.796 417.403,265.981 424.547,261.357C 431.692,256.733 435.119,251.441 434.83,245.479C 434.023,242.879 432.511,241.708 430.294,241.967C 428.077,242.225 426.558,241.015 425.736,238.336C 424.998,233.097 424.719,226.519 424.899,218.601C 425.079,210.684 424.765,203.922 423.959,198.315C 422.863,193.4 420.337,189.967 416.383,188.017C 412.428,186.068 408.125,185.516 403.474,186.361C 396.708,188.225 390.955,191.721 386.216,196.849C 381.476,201.977 378.1,205.031 376.087,206.012C 374.029,205.788 372.486,203.648 371.455,199.593C 370.425,195.538 367.708,193.616 363.305,193.828C 359.267,194.699 354.586,196.569 349.261,199.437C 343.936,202.306 339.675,205.132 336.478,207.915C 334.82,209.224 333.296,210.814 331.904,212.685C 330.513,214.556 329.949,216.527 330.213,218.598C 330.667,221.62 332.414,222.898 335.456,222.433L 337.02,222.142C 340.132,221.626 341.894,222.978 342.304,226.198C 343.607,233.627 344.087,242.12 343.743,251.676C 343.4,261.231 343.49,268.283 344.015,272.831C 344.772,276.214 346.395,278.27 348.883,279C 351.372,279.73 354.064,279.707 356.96,278.931C 366.674,276.774 372.875,273.829 375.562,270.095C 378.248,266.362 379.039,260.209 377.935,251.639C 377.186,245.96 377.006,238.938 377.394,230.573C 377.781,222.209 380.663,217.112 386.039,215.285C 387.507,215.046 388.683,215.332 389.568,216.143C 390.453,216.954 391.03,218.087 391.297,219.544L 392.063,233.962 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="8" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="#FF7D2500" Geometry="F1 M 485.297,224.766C 489.908,220.926 493.953,220.178 497.431,222.523C 500.908,224.868 502.35,228.046 501.756,232.057C 501.162,236.069 498.825,239.613 494.746,242.688C 490.666,245.764 486.82,246.601 483.206,245.2C 479.592,243.799 477.884,241.003 478.082,236.812C 478.281,232.621 480.685,228.606 485.297,224.766 Z M 512.582,146.766C 511.527,151.242 508.59,163.661 503.772,184.021C 498.954,204.381 495.368,214.779 493.014,215.217C 490.66,215.654 489.939,206.04 490.849,186.372C 491.76,166.705 492.472,154.486 492.983,149.714C 493.495,144.942 495.849,140.991 500.044,137.86C 504.24,134.73 507.642,134.308 510.249,136.595C 512.857,138.883 513.634,142.273 512.582,146.766 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="8" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                    <GeometryDrawing Geometry="F1 M 158.184,198.688C 155.56,199.384 152.484,199.991 148.957,200.511C 145.431,201.031 140.574,201.847 134.387,202.96C 130.685,203.539 127.259,204.834 124.107,206.847C 120.956,208.859 119.644,211.955 120.171,216.135C 121.457,220.62 123.648,222.692 126.747,222.352C 129.845,222.012 132.159,224.739 133.688,230.534C 134.897,237.711 135.783,248.316 136.346,262.348C 136.908,276.381 136.6,286.868 135.42,293.81C 134.322,297.406 132.407,299.656 129.677,300.562C 126.947,301.468 125.787,303.859 126.198,307.736C 126.837,312.1 129.75,314.605 134.936,315.251C 140.122,315.897 148.683,315.062 160.619,312.746C 165.469,312.126 171.63,310.579 179.104,308.106C 186.578,305.633 190.197,301.505 189.96,295.723C 188.883,292.428 186.741,290.898 183.533,291.133C 180.324,291.368 178.095,289.372 176.845,285.146C 174.793,273.762 174.138,266.793 174.88,264.237C 175.621,261.681 176.814,260.517 178.457,260.744C 182.104,260.769 184.152,263.2 184.602,268.037C 185.053,272.874 187.776,275.18 192.773,274.954C 198.501,273.084 201.459,268.16 201.648,260.182C 201.838,252.205 201.345,245.62 200.169,240.429C 199.636,237.058 198.387,233.645 196.422,230.19C 194.457,226.735 191.578,225.199 187.786,225.583C 183.046,227.069 180.865,229.894 181.245,234.058C 181.625,238.222 179.667,241.006 175.372,242.409C 174.492,242.623 173.719,242.707 173.053,242.662C 172.387,242.617 171.951,242.119 171.744,241.169C 171.397,238.992 171.172,236.005 171.07,232.209C 170.967,228.413 170.93,225.35 170.959,223.021C 170.548,220.197 171.057,218.066 172.487,216.629C 173.917,215.193 177.909,213.887 184.462,212.711C 191.61,212.079 196.215,214.008 198.276,218.499C 200.338,222.989 203.992,225.095 209.24,224.816C 213.015,224.001 215.507,222.212 216.715,219.448C 217.924,216.684 218.186,213.559 217.501,210.073C 216.662,205.742 214.456,201.128 210.883,196.231C 207.309,191.333 203.115,189.077 198.299,189.462C 197.818,189.631 196.364,190.223 193.937,191.236C 191.521,192.114 187.33,193.162 181.364,194.379L 158.184,198.688 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1.5" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="0.763034" RadiusY="0.592149" Center="0.43784,0.434283" GradientOrigin="0.43784,0.434283">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#FFD5D5D5" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing Geometry="F1 M 316.009,215.152C 315.904,214.034 315.807,212.688 315.717,211.117C 315.628,209.545 315.492,208.207 315.31,207.103C 314.746,204.481 313.521,202.841 311.634,202.182C 309.747,201.523 307.581,201.448 305.137,201.957C 302.047,202.515 298.474,203.622 294.417,205.28C 290.36,206.938 287.316,208.97 285.284,211.376C 282.829,215.271 282.074,221.253 283.018,229.322C 283.963,237.39 283.742,245.604 282.355,253.963C 281.85,256.211 280.907,258.622 279.528,261.196C 278.149,263.77 276.188,265.389 273.644,266.053C 270.406,266.024 268.58,263.576 268.167,258.707C 267.754,253.838 267.627,250.543 267.784,248.82C 267.778,244.191 267.77,238.825 267.759,232.721C 267.749,226.616 267.478,221.845 266.946,218.407C 266.438,215.456 265.421,213.328 263.895,212.023C 262.37,210.717 260.11,210.338 257.116,210.884C 252.818,211.727 248.6,213.161 244.46,215.184C 240.32,217.208 236.468,219.517 232.904,222.11C 230.485,223.722 227.96,225.928 225.329,228.728C 222.698,231.527 221.545,234.544 221.87,237.779C 222.318,239.753 223.263,240.917 224.704,241.272C 226.145,241.626 227.694,241.693 229.352,241.474C 231.865,241.39 233.35,242.112 233.807,243.64C 234.265,245.168 234.5,247.025 234.512,249.21C 234.799,254.964 234.906,260.829 234.83,266.807C 234.755,272.784 235.122,277.876 235.93,282.081C 238.243,292.267 243.911,296.768 252.933,295.585C 261.235,293.719 268.01,290.113 273.258,284.77C 278.506,279.426 282.029,276.263 283.828,275.282C 286.217,275.444 287.91,277.556 288.905,281.618C 289.9,285.68 292.711,287.584 297.339,287.331C 302.878,286.191 309.544,283.004 317.337,277.771C 325.129,272.538 328.912,266.875 328.686,260.78C 328.334,258.91 327.663,257.87 326.674,257.659C 325.685,257.449 324.301,257.518 322.52,257.868C 319.433,258.634 317.556,257.37 316.891,254.076C 316.516,251.63 316.371,249.141 316.456,246.61L 316.009,215.152 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1.5" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="0.592287" RadiusY="0.672395" Center="0.450544,0.443124" GradientOrigin="0.450544,0.443124">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#FFD5D5D5" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing Geometry="F1 M 390.536,231.561C 390.61,235.893 390.615,240.493 390.549,245.362C 390.484,250.231 390.789,254.734 391.466,258.872C 392.165,262.42 393.661,264.889 395.953,266.279C 398.245,267.669 401.107,268.044 404.537,267.403C 409.715,266.396 415.876,263.581 423.02,258.957C 430.165,254.333 433.592,249.041 433.303,243.079C 432.496,240.479 430.984,239.308 428.767,239.566C 426.55,239.825 425.031,238.615 424.209,235.935C 423.471,230.697 423.192,224.119 423.372,216.201C 423.552,208.284 423.238,201.522 422.432,195.915C 421.336,191 418.81,187.567 414.856,185.617C 410.901,183.668 406.598,183.115 401.947,183.961C 395.181,185.825 389.428,189.321 384.689,194.449C 379.949,199.577 376.573,202.631 374.56,203.612C 372.502,203.388 370.959,201.248 369.928,197.193C 368.898,193.138 366.181,191.216 361.778,191.428C 357.74,192.299 353.059,194.169 347.734,197.037C 342.409,199.906 338.148,202.731 334.951,205.515C 333.293,206.824 331.769,208.414 330.377,210.285C 328.986,212.156 328.422,214.127 328.686,216.198C 329.14,219.22 330.887,220.498 333.929,220.033L 335.493,219.742C 338.605,219.226 340.367,220.578 340.777,223.798C 342.08,231.227 342.56,239.72 342.216,249.276C 341.873,258.831 341.963,265.883 342.488,270.431C 343.245,273.814 344.868,275.87 347.356,276.6C 349.845,277.329 352.537,277.307 355.433,276.531C 365.147,274.374 371.348,271.429 374.035,267.695C 376.721,263.961 377.512,257.809 376.408,249.238C 375.659,243.56 375.479,236.538 375.867,228.173C 376.254,219.808 379.136,214.712 384.512,212.885C 385.98,212.646 387.156,212.932 388.041,213.743C 388.927,214.554 389.503,215.687 389.77,217.144L 390.536,231.561 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1.5" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="0.592402" RadiusY="0.66297" Center="0.449238,0.438522" GradientOrigin="0.449238,0.438522">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#FFD5D5D5" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing Geometry="F1 M 483.77,222.366C 488.381,218.525 492.426,217.778 495.904,220.123C 499.381,222.467 500.823,225.646 500.229,229.657C 499.635,233.669 497.298,237.213 493.219,240.288C 489.139,243.364 485.293,244.201 481.679,242.8C 478.065,241.399 476.357,238.603 476.555,234.412C 476.754,230.221 479.158,226.206 483.77,222.366 Z M 511.055,144.366C 510,148.842 507.063,161.261 502.245,181.621C 497.427,201.98 493.841,212.379 491.487,212.817C 489.133,213.254 488.412,203.639 489.322,183.972C 490.233,164.305 490.945,152.085 491.456,147.314C 491.968,142.542 494.322,138.591 498.517,135.46C 502.713,132.329 506.115,131.908 508.722,134.195C 511.33,136.483 512.107,139.873 511.055,144.366 Z ">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1.5" LineJoin="Round" Brush="#FF7D2500"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush RadiusX="1.89231" RadiusY="0.597705" Center="0.451968,0.411473" GradientOrigin="0.451968,0.411473">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#FFD5D5D5" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup/>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</ResourceDictionary>


 

现在我们要把这个资源字典引入程序集，打开“App.xaml”文件，添加下图中红色框内的代码。

 

<Application x:Class="不规则窗体.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="cnblogs-SkyD.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

然后打开“Window1.xaml”文件的设计视图，点击窗体边缘以选中窗体，依照下图所示，在属性面板中更改AllowsTransparency及WindowStyle属性。

AllowsTransparency 指示窗体是否支持透明。

WindowStyle指示窗体边框样式，设为 None 为无边框。

切换到XAML代码视图，依照下图所示，为 Window 元素添加Background和 MouseDown属性定义。

Background 属性指示窗体的背景，这里引用资源中的“back”，就是我们之前画好的图形啦。

MouseDown 是鼠标按下时产生的事件，我们要为之定义一个事件处理函数以实现窗体拖动功能。

 

<Window x:Class="不规则窗体.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" 
    Height="450" 
    Width="450" 
    AllowsTransparency="True" 
    WindowStyle="None" 
    Background="{StaticResource back}"
    MouseDown="Window_MouseDown">
    <Grid>
        
    </Grid>
</Window>

 

在上图的“Window_MouseDown”字符上单击右键，在弹出菜单中选择“定位到事件处理程序”，即会转到“Window1.xaml.cs”代码视图，依照下图输入代码。

 

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if(e.ChangedButton==MouseButton.Left)this.DragMove();
        }

 

至此就完成了不规则窗体的创制了。

编译运行看看：

嗯嗯，效果很酷的说，你说什么？没有关闭按钮？这么好看的界面你舍得关吗？

好吧，要实现关闭按钮也很简单啦，自己搞个按钮在上面，在 Click 事件中执行 this.Close(); 就OK啦，我是懒得搞了哈。

 

此效果在任何装有.Net框架3.0的机器上都可以运作，不用再羡慕Adobe AIR的外观了，WPF可以做得更好！

 

再来张Vista切换窗口时的图：

 

 

 源代码下载(包含Design设计文件)：不规则窗体

时间： 2024-03-15 21:11:36

WPF界面设计技巧（1）—不规则窗体图文指南的相关文章

WPF界面设计技巧（3）—实现不规则动画按钮

原文:WPF界面设计技巧(3)-实现不规则动画按钮    发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作.   不规则按钮的做法实际上和先前我们做不规则窗体的方法差不多,只是为按钮弄个不是那么方方正正的背景而已.   我们这次沿用自定义窗体时的设计图形,设计一个动态的不规则按钮,在这个示例中我们要将先前设计的整个图形作为按钮,并让外围的圆环始终围绕中心圆形旋转,在鼠标移入时,还要产生颜色变化及发光效果.   首先用 Microsoft Expr

WPF界面设计技巧（2）—自定义漂亮的按钮样式

原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了.   首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮:     然后给各个按钮设置不同的背景颜色:     设置好之后就是这样啦:     然后我们就开始在 App.xaml 文件中定义按钮样式了:     定义的样式

WPF界面设计技巧（4）—自定义列表项样式

原文:WPF界面设计技巧(4)-自定义列表项样式   有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲"好看"部分.   打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局.   在  Window1.xaml 中为窗体 Loaded 事件及按钮 Click 事件添加事件处理:       Code<Window

WPF界面设计技巧（8）—自制山寨版CheckListBox

原文:WPF界面设计技巧(8)-自制山寨版CheckListBox    近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来.   喏,CheckListBox 就是下面这玩意啦:       为什么要搞它?我们是山寨耶,说搞谁就搞谁!   我也不知道为什么,WPF里没有提供 CheckListBox 控件,但凭借WPF强大的外观定制能力,我们可以轻松的创制一个自己的 CheckListBox .   CheckListBox 的基本功能其实和 Lis

WPF界面设计技巧（9）—使用UI自动化布局

原文:WPF界面设计技巧(9)-使用UI自动化布局    最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail   今天开始编写附属的加密/解密工具,对UI自动化布局有些心得,就此分享出来.   我们先来看一下实现的效果:       这样的界面是怎么个自动法呢?请看下图:       就是说界面在适度的伸缩时,不会破坏其布局结构及美观性.   这样做有什么好处呢?你可以想象以下情况:   1.需要用户或通过程序控制变更窗体尺寸以适应特殊要求时.UI自动化

WPF界面设计技巧（6）—玩玩数字墨水手绘涂鸦

原文:WPF界面设计技巧(6)-玩玩数字墨水手绘涂鸦        想让你的程序支持鼠标及手写笔涂鸦吗?只要敲入"<InkCanvas/>"这几个字符,你就会领悟什么叫"很好很强大",今天我们来做一个手写板的演示,你可把它当作屏幕便笺使用.   首先要用 Microsoft Expression Design 2 画一幅英俊的界面背景,这里我们剽窃索尼 VAIO CR 笔记本的设计,做出了一个油光锃亮的面板:     记住还是要都绘制到一个图层上哦,图层

WPF界面设计技巧（11）-认知流文档 &amp; 小议WPF的野心

原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容.   直接来看代码吧,需要讲解的地方比较多,我就直接注释在代码里了,看起来更方便些:     Code<Window x:Class="流文档.Window1"     xmlns="http://schemas.microso

WPF界面设计技巧（10）-样式的继承

原文:WPF界面设计技巧(10)-样式的继承     PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnblogs.com/SkyD/archive/2008/08/09/1264083.html  欢迎帮我捉虫,以及与我交流WPF技术   WPF的样式的继承属性极少被文章提及,以至于我在编写MailMail期间为此踌躇数日,最后终于在E文版的MS社区得到指点才得以解惑.   现将其分享出来,这

WPF界面设计技巧（7）—模拟电梯升降的缓动动画

原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画     如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程.   WPF在关键帧动画中提供了样条内插(Spline)型的关键帧,用以控制变化的速率曲线,但这东西实在有些复杂,且不够形象化,我研究很久也没明白如何实现"缓入--缓出"的效果,随后我从一本经典牛X却鲜有人知的过时的Flash