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

2024-03-19 03:08

本文主要是介绍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"”对应的是我们之前设计时的图层名称,我们在程序中引用此资源时要使用这个名称。

     


    <?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”文件的设计视图,点击窗体边缘以选中窗体,依照下图所示,在属性面板中更改AllowsTransparencyWindowStyle属性。

    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设计文件):不规则窗体


这篇关于WPF界面设计技巧(1)—不规则窗体图文指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/824590

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(五):Blender锥桶建模

前言 本系列教程旨在使用UE5配置一个具备激光雷达+深度摄像机的仿真小车,并使用通过跨平台的方式进行ROS2和UE5仿真的通讯,达到小车自主导航的目的。本教程默认有ROS2导航及其gazebo仿真相关方面基础,Nav2相关的学习教程可以参考本人的其他博客Nav2代价地图实现和原理–Nav2源码解读之CostMap2D(上)-CSDN博客往期教程: 第一期:基于UE5和ROS2的激光雷达+深度RG

SigLIP——采用sigmoid损失的图文预训练方式

SigLIP——采用sigmoid损失的图文预训练方式 FesianXu 20240825 at Wechat Search Team 前言 CLIP中的infoNCE损失是一种对比性损失,在SigLIP这个工作中,作者提出采用非对比性的sigmoid损失,能够更高效地进行图文预训练,本文进行介绍。如有谬误请见谅并联系指出,本文遵守CC 4.0 BY-SA版权协议,转载请联系作者并注

如何掌握面向对象编程的四大特性、Lambda 表达式及 I/O 流:全面指南

这里写目录标题 OOP语言的四大特性lambda输入/输出流(I/O流) OOP语言的四大特性 面向对象编程(OOP)是一种编程范式,它通过使用“对象”来组织代码。OOP 的四大特性是封装、继承、多态和抽象。这些特性帮助程序员更好地管理复杂的代码,使程序更易于理解和维护。 类-》实体的抽象类型 实体(属性,行为) -》 ADT(abstract data type) 属性-》成

小技巧绕过Sina Visitor System(新浪访客系统)

0x00 前言 一直以来,爬虫与反爬虫技术都时刻进行着博弈,而新浪微博作为一个数据大户更是在反爬虫上不遗余力。常规手段如验证码、封IP等等相信很多人都见识过…… 当然确实有需要的话可以通过新浪开放平台提供的API进行数据采集,但是普通开发者的权限比较低,限制也比较多。所以如果只是做一些简单的功能还是爬虫比较方便~ 应该是今年的早些时候,新浪引入了一个Sina Visitor Syst

CentOS 7 x64下安装MySql5.7图文详解

参考: https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ http://www.jianshu.com/p/7cccdaa2d177 http://www.linuxidc.com/Linux/2016-09/135288.htm 最近搞了台阿里云服务器,搭载的是CentOS 7系统,这里记录下mysql5.7的安装流程 查