├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── PlayButton_Shorts.mp4 ├── README.ko.md ├── README.md ├── README.zh-CN.md ├── img ├── eig.png ├── fiv.png ├── fou.png ├── fst.png ├── sec.png ├── sev.png ├── six.png ├── temp.md └── tre.png └── src ├── LolPlayButton.sln ├── LolPlayButton ├── App.xaml ├── App.xaml.cs ├── AssemblyInfo.cs ├── Images │ └── logo.png ├── LolPlayButton.csproj ├── MainWindow.xaml └── MainWindow.xaml.cs └── VickyPlayButton ├── App.xaml ├── App.xaml.cs ├── AssemblyInfo.cs ├── Images └── logo.png ├── MainWindow.xaml ├── MainWindow.xaml.cs ├── VickyPlayButton.csproj └── VickyPlayButton.csproj.user /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [vickyqu115] 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Ll]og/ 33 | [Ll]ogs/ 34 | 35 | # Visual Studio 2015/2017 cache/options directory 36 | .vs/ 37 | # Uncomment if you have tasks that create the project's static files in wwwroot 38 | #wwwroot/ 39 | 40 | # Visual Studio 2017 auto generated files 41 | Generated\ Files/ 42 | 43 | # MSTest test Results 44 | [Tt]est[Rr]esult*/ 45 | [Bb]uild[Ll]og.* 46 | 47 | # NUnit 48 | *.VisualState.xml 49 | TestResult.xml 50 | nunit-*.xml 51 | 52 | # Build Results of an ATL Project 53 | [Dd]ebugPS/ 54 | [Rr]eleasePS/ 55 | dlldata.c 56 | 57 | # Benchmark Results 58 | BenchmarkDotNet.Artifacts/ 59 | 60 | # .NET Core 61 | project.lock.json 62 | project.fragment.lock.json 63 | artifacts/ 64 | 65 | # ASP.NET Scaffolding 66 | ScaffoldingReadMe.txt 67 | 68 | # StyleCop 69 | StyleCopReport.xml 70 | 71 | # Files built by Visual Studio 72 | *_i.c 73 | *_p.c 74 | *_h.h 75 | *.ilk 76 | *.meta 77 | *.obj 78 | *.iobj 79 | *.pch 80 | *.pdb 81 | *.ipdb 82 | *.pgc 83 | *.pgd 84 | *.rsp 85 | *.sbr 86 | *.tlb 87 | *.tli 88 | *.tlh 89 | *.tmp 90 | *.tmp_proj 91 | *_wpftmp.csproj 92 | *.log 93 | *.tlog 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio 6 auto-generated project file (contains which files were open etc.) 298 | *.vbp 299 | 300 | # Visual Studio 6 workspace and project file (working project files containing files to include in project) 301 | *.dsw 302 | *.dsp 303 | 304 | # Visual Studio 6 technical files 305 | *.ncb 306 | *.aps 307 | 308 | # Visual Studio LightSwitch build output 309 | **/*.HTMLClient/GeneratedArtifacts 310 | **/*.DesktopClient/GeneratedArtifacts 311 | **/*.DesktopClient/ModelManifest.xml 312 | **/*.Server/GeneratedArtifacts 313 | **/*.Server/ModelManifest.xml 314 | _Pvt_Extensions 315 | 316 | # Paket dependency manager 317 | .paket/paket.exe 318 | paket-files/ 319 | 320 | # FAKE - F# Make 321 | .fake/ 322 | 323 | # CodeRush personal settings 324 | .cr/personal 325 | 326 | # Python Tools for Visual Studio (PTVS) 327 | __pycache__/ 328 | *.pyc 329 | 330 | # Cake - Uncomment if you are using it 331 | # tools/** 332 | # !tools/packages.config 333 | 334 | # Tabs Studio 335 | *.tss 336 | 337 | # Telerik's JustMock configuration file 338 | *.jmconfig 339 | 340 | # BizTalk build output 341 | *.btp.cs 342 | *.btm.cs 343 | *.odx.cs 344 | *.xsd.cs 345 | 346 | # OpenCover UI analysis results 347 | OpenCover/ 348 | 349 | # Azure Stream Analytics local run output 350 | ASALocalRun/ 351 | 352 | # MSBuild Binary and Structured Log 353 | *.binlog 354 | 355 | # NVidia Nsight GPU debugger configuration file 356 | *.nvuser 357 | 358 | # MFractors (Xamarin productivity tool) working folder 359 | .mfractor/ 360 | 361 | # Local History for Visual Studio 362 | .localhistory/ 363 | 364 | # Visual Studio History (VSHistory) files 365 | .vshistory/ 366 | 367 | # BeatPulse healthcheck temp database 368 | healthchecksdb 369 | 370 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 371 | MigrationBackup/ 372 | 373 | # Ionide (cross platform F# VS Code tools) working folder 374 | .ionide/ 375 | 376 | # Fody - auto-generated XML schema 377 | FodyWeavers.xsd 378 | 379 | # VS Code files for those working on multiple tools 380 | .vscode/* 381 | !.vscode/settings.json 382 | !.vscode/tasks.json 383 | !.vscode/launch.json 384 | !.vscode/extensions.json 385 | *.code-workspace 386 | 387 | # Local History for Visual Studio Code 388 | .history/ 389 | 390 | # Windows Installer files from build outputs 391 | *.cab 392 | *.msi 393 | *.msix 394 | *.msm 395 | *.msp 396 | 397 | # JetBrains Rider 398 | *.sln.iml 399 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 quyang115 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PlayButton_Shorts.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/PlayButton_Shorts.mp4 -------------------------------------------------------------------------------- /README.ko.md: -------------------------------------------------------------------------------- 1 | # RiotPlayButton [![English](https://img.shields.io/badge/Language-English-blue.svg)](README.md) [![中文](https://img.shields.io/badge/Language-中文-red.svg)](README.zh-CN.md) [![한국어](https://img.shields.io/badge/Language-한국어-green.svg)](README.ko.md) 2 | 3 | 리그 오브 레전드의 PLAY 버튼에서 영감을 받은 사용자 정의 WPF ToggleButton 기반 컨트롤 4 | 5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 6 | [![.NET](https://img.shields.io/badge/.NET-8.0-blue.svg)](https://dotnet.microsoft.com/download) 7 | [![Stars](https://img.shields.io/github/stars/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/stargazers) 8 | [![Issues](https://img.shields.io/github/issues/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/issues) 9 | 10 | ## 프로젝트 개요 11 | 12 | RiotPlayButton은 리그 오브 레전드 게임 클라이언트의 PLAY 버튼을 재현한 사용자 정의 WPF 컨트롤입니다. 사용자 정의 형태 생성, 그라데이션 브러시, 애니메이션, 효율적인 XAML 디자인 등 고급 WPF 기술을 보여줍니다. 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ## 주요 기능 및 구현 사항 22 | #### 1. 사용자 정의 WPF 컨트롤 개발 23 | - [x] 특수 기능을 위한 WPF ToggleButton 확장 24 | - [x] 순수 XAML을 사용한 복잡한 UI 요소 구현 25 | 26 | #### 2. 고급 XAML 기술 27 | - [x] Path와 Geometry를 사용한 불규칙한 형태 생성 28 | - [x] 정교한 색상 효과를 위한 LinearGradientBrush 활용 29 | 30 | #### 3. 복잡한 형태 생성 31 | - [x] 다중 포인트 형태 생성을 위한 Polygon 사용 32 | - [x] 부드럽고 복잡한 곡선을 위한 Cubic Bezier 곡선 구현 33 | - [x] 간단한 곡선 형태를 위한 Quadratic Bezier 곡선 적용 34 | 35 | #### 4. 애니메이션 및 상호작용 36 | - [x] Jamesnet.WPF Nuget 패키지를 사용한 부드러운 애니메이션 37 | - [x] 마우스 오버 및 체크 상태에 대한 상호작용 효과 38 | 39 | #### 5. 성능 최적화 40 | - [x] 클리핑 기술을 사용한 효율적인 렌더링 41 | - [x] 성능 향상을 위한 최적화된 XAML 구조 42 | 43 | #### 6. 충실한 재현 44 | - [x] 리그 오브 레전드 PLAY 버튼의 픽셀 퍼펙트 재현 45 | - [x] 디자인과 기능성에 대한 세심한 주의 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ## 기술 스택 55 | - WPF (Windows Presentation Foundation) 56 | - .NET 8.0 57 | - C# 58 | - Jamesnet.WPF Nuget 패키지 59 | 60 | ## 시작하기 61 | ### 필요 조건 62 | - Visual Studio 2022 이상 63 | - .NET 8.0 SDK 64 | 65 | ### 설치 및 실행 66 | #### 1. 리포지토리 복제: 67 | 68 | ``` 69 | git clone https://github.com/vickyqu115/riotplaybutton.git 70 | ``` 71 | 72 | #### 2. 솔루션 열기 73 | - [x] Visual Studio 74 | - [x] Visual Studio Code 75 | - [x] JetBrains Rider 76 | 77 | 78 | 79 | 80 | 81 | #### 3. 빌드 및 실행 82 | - [x] 시작 프로젝트 설정 83 | - [x] F5를 누르거나 실행 버튼 클릭 84 | - [x] Windows 11 권장 85 | 86 | ## 학습 자료 87 | - [구현에 대한 상세 아티클 (jamesnet.dev)](https://jamesnet.dev/article/51) 88 | - [YouTube 튜토리얼 (영어, 한글자막)](https://bit.ly/40YoVIo) 89 | - [BiliBili 튜토리얼 (중국어)](https://bit.ly/49L6dXu) 90 | 91 | ## 기여하기 92 | RiotPlayButton에 대한 기여를 환영합니다! 이슈를 제출하거나, 풀 리퀘스트를 생성하거나, 개선 사항을 제안해 주세요. 93 | 94 | ## 라이선스 95 | 이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요. 96 | 97 | ## 연락처 98 | - 웹사이트: https://jamesnet.dev 99 | - 이메일: vickyqu115@hotmail.com, james@jamesnet.dev 100 | 101 | 고급 형태 생성 기술을 갖춘 이 매력적인 리그 오브 레전드 스타일의 PLAY 버튼으로 WPF 애플리케이션을 향상시켜 보세요! 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RiotPlayButton [![English](https://img.shields.io/badge/docs-English-blue.svg)](README.md) [![中文](https://img.shields.io/badge/docs-中文-red.svg)](README.zh-CN.md) [![한국어](https://img.shields.io/badge/docs-한국어-red.svg)](README.ko.md) 2 | 3 | A customizable WPF ToggleButton-based control inspired by the League of Legends PLAY button 4 | 5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 6 | [![.NET](https://img.shields.io/badge/.NET-8.0-blue.svg)](https://dotnet.microsoft.com/download) 7 | [![Stars](https://img.shields.io/github/stars/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/stargazers) 8 | [![Issues](https://img.shields.io/github/issues/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/issues) 9 | 10 | ## Project Overview 11 | 12 | RiotPlayButton is a custom WPF control that recreates the PLAY button from the League of Legends game client. It demonstrates advanced WPF techniques including custom shape creation, gradient brushes, animations, and efficient XAML design. 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ## Key Features and Implementations 22 | #### 1. Custom WPF Control Development 23 | - [x] Extension of WPF ToggleButton for specialized functionality 24 | - [x] Implementation of complex UI elements using pure XAML 25 | 26 | #### 2. Advanced XAML Techniques 27 | - [x] Creation of irregular shapes using Path and Geometry 28 | - [x] Utilization of LinearGradientBrush for sophisticated color effects 29 | 30 | #### 3. Complex Shape Generation 31 | - [x] Use of Polygon for creating multi-point shapes 32 | - [x] Implementation of Cubic Bezier curves for smooth, complex curves 33 | - [x] Application of Quadratic Bezier curves for simpler curved shapes 34 | 35 | #### 4. Animation and Interactivity 36 | - [x] Smooth animations using Jamesnet.WPF Nuget package 37 | - [x] Interactive mouseover and checked state effects 38 | 39 | #### 5. Performance Optimization 40 | - [x] Efficient rendering using clipping techniques 41 | - [x] Optimized XAML structure for better performance 42 | 43 | #### 6. Faithful Recreation 44 | - [x] Pixel-perfect recreation of the League of Legends PLAY button 45 | - [x] Attention to detail in design and functionality 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ## Technology Stack 55 | - WPF (Windows Presentation Foundation) 56 | - .NET 8.0 57 | - C# 58 | - Jamesnet.WPF Nuget package 59 | 60 | ## Getting Started 61 | ### Prerequisites 62 | - Visual Studio 2022 or later 63 | - .NET 8.0 SDK 64 | 65 | ### Installation and Execution 66 | #### 1. Clone the repository: 67 | 68 | ``` 69 | git clone https://github.com/vickyqu115/riotplaybutton.git 70 | ``` 71 | 72 | #### 2. Open the solution 73 | - [x] Visual Studio 74 | - [x] Visual Studio Code 75 | - [x] JetBrains Rider 76 | 77 | 78 | 79 | 80 | 81 | #### 3. Build and Run 82 | - [x] Set the startup project 83 | - [x] Press F5 or click the Run button 84 | - [x] Windows 11 recommended 85 | 86 | ## Learning Resources 87 | - [Detailed Article on Implementation (jamesnet.dev)](https://jamesnet.dev/article/51) 88 | - [YouTube Tutorial (English)](https://bit.ly/40YoVIo) 89 | - [BiliBili Tutorial (Chinese)](https://bit.ly/49L6dXu) 90 | 91 | ## Contributing 92 | Contributions to RiotPlayButton are welcome! Feel free to submit issues, create pull requests, or suggest improvements. 93 | 94 | ## License 95 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 96 | 97 | ## Contact 98 | - Website: https://jamesnet.dev 99 | - Email: vickyqu115@hotmail.com, james@jamesnet.dev 100 | 101 | Enhance your WPF applications with this engaging League of Legends-inspired PLAY button, featuring advanced shape generation techniques! 102 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # RiotPlayButton [![English](https://img.shields.io/badge/Language-English-blue.svg)](README.md) [![中文](https://img.shields.io/badge/Language-中文-red.svg)](README.zh-CN.md) [![한국어](https://img.shields.io/badge/Language-한국어-red.svg)](README.ko.md) 2 | 3 | 一个受英雄联盟游戏PLAY按钮启发的可自定义WPF ToggleButton控件 4 | 5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 6 | [![.NET](https://img.shields.io/badge/.NET-8.0-blue.svg)](https://dotnet.microsoft.com/download) 7 | [![Stars](https://img.shields.io/github/stars/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/stargazers) 8 | [![Issues](https://img.shields.io/github/issues/vickyqu115/riotplaybutton.svg)](https://github.com/vickyqu115/riotplaybutton/issues) 9 | 10 | ## 项目概述 11 | 12 | RiotPlayButton是一个自定义WPF控件，重现了英雄联盟游戏客户端的PLAY按钮。它展示了高级WPF技术，包括自定义形状创建、渐变画笔、动画和高效的XAML设计。 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ## 主要特性和实现 22 | #### 1. 自定义WPF控件开发 23 | - [x] 扩展WPF ToggleButton以实现特殊功能 24 | - [x] 使用纯XAML实现复杂的UI元素 25 | 26 | #### 2. 高级XAML技术 27 | - [x] 使用Path和Geometry创建不规则形状 28 | - [x] 利用LinearGradientBrush实现复杂的颜色效果 29 | 30 | #### 3. 复杂形状生成 31 | - [x] 使用Polygon创建多点形状 32 | - [x] 实现Cubic Bezier曲线以创建平滑复杂的曲线 33 | - [x] 应用Quadratic Bezier曲线创建简单的曲线形状 34 | 35 | #### 4. 动画和交互性 36 | - [x] 使用Jamesnet.WPF Nuget包实现流畅动画 37 | - [x] 交互式鼠标悬停和选中状态效果 38 | 39 | #### 5. 性能优化 40 | - [x] 使用裁剪技术实现高效渲染 41 | - [x] 优化XAML结构以提高性能 42 | 43 | #### 6. 忠实重现 44 | - [x] 像素级精确重现英雄联盟PLAY按钮 45 | - [x] 注重设计和功能的细节 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ## 技术栈 55 | - WPF (Windows Presentation Foundation) 56 | - .NET 8.0 57 | - C# 58 | - Jamesnet.WPF Nuget包 59 | 60 | ## 入门指南 61 | ### 先决条件 62 | - Visual Studio 2022或更高版本 63 | - .NET 8.0 SDK 64 | 65 | ### 安装和执行 66 | #### 1. 克隆仓库： 67 | 68 | ``` 69 | git clone https://github.com/vickyqu115/riotplaybutton.git 70 | ``` 71 | 72 | #### 2. 打开解决方案 73 | - [x] Visual Studio 74 | - [x] Visual Studio Code 75 | - [x] JetBrains Rider 76 | 77 | 78 | 79 | 80 | 81 | #### 3. 构建和运行 82 | - [x] 设置启动项目 83 | - [x] 按F5或点击运行按钮 84 | - [x] 推荐使用Windows 11 85 | 86 | ## 学习资源 87 | - [详细实现文章 (jamesnet.dev)](https://jamesnet.dev/article/51) 88 | - [YouTube教程 (English)](https://bit.ly/40YoVIo) 89 | - [哔哩哔哩教程 (Chinese)](https://bit.ly/49L6dXu) 90 | 91 | ## 贡献 92 | 欢迎为RiotPlayButton做出贡献！随时提交问题、创建拉取请求或提出改进建议。 93 | 94 | ## 许可证 95 | 该项目基于MIT许可证分发。有关详细信息，请参阅[LICENSE](LICENSE)文件。 96 | 97 | ## 联系方式 98 | - 网站：https://jamesnet.dev 99 | - 电子邮件：vickyqu115@hotmail.com, james@jamesnet.dev 100 | 101 | 使用这个具有高级形状生成技术的吸引人的英雄联盟风格PLAY按钮来增强您的WPF应用程序！ 102 | -------------------------------------------------------------------------------- /img/eig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/eig.png -------------------------------------------------------------------------------- /img/fiv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/fiv.png -------------------------------------------------------------------------------- /img/fou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/fou.png -------------------------------------------------------------------------------- /img/fst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/fst.png -------------------------------------------------------------------------------- /img/sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/sec.png -------------------------------------------------------------------------------- /img/sev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/sev.png -------------------------------------------------------------------------------- /img/six.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/six.png -------------------------------------------------------------------------------- /img/temp.md: -------------------------------------------------------------------------------- 1 | t 2 | -------------------------------------------------------------------------------- /img/tre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/img/tre.png -------------------------------------------------------------------------------- /src/LolPlayButton.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.8.34302.71 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LolPlayButton", "LolPlayButton\LolPlayButton.csproj", "{BF02DB45-FC56-4000-9B4C-9E47B8333945}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {BF02DB45-FC56-4000-9B4C-9E47B8333945}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {BF02DB45-FC56-4000-9B4C-9E47B8333945}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {BF02DB45-FC56-4000-9B4C-9E47B8333945}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {BF02DB45-FC56-4000-9B4C-9E47B8333945}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ExtensibilityGlobals) = postSolution 23 | SolutionGuid = {1E2D269F-021D-473C-8B05-50FD43CB516C} 24 | EndGlobalSection 25 | EndGlobal 26 | -------------------------------------------------------------------------------- /src/LolPlayButton/App.xaml: -------------------------------------------------------------------------------- 1 |  6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 31 | 32 | 38 | 39 | 45 | 46 | 54 | 55 | 63 | 64 | 76 | 77 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /src/LolPlayButton/App.xaml.cs: -------------------------------------------------------------------------------- 1 | using System.Configuration; 2 | using System.Data; 3 | using System.Windows; 4 | 5 | namespace LolPlayButton 6 | { 7 | /// 8 | /// Interaction logic for App.xaml 9 | /// 10 | public partial class App : Application 11 | { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/LolPlayButton/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Windows; 2 | 3 | [assembly: ThemeInfo( 4 | ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located 5 | //(used if a resource is not found in the page, 6 | // or application resource dictionaries) 7 | ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located 8 | //(used if a resource is not found in the page, 9 | // app, or any theme specific resource dictionaries) 10 | )] 11 | -------------------------------------------------------------------------------- /src/LolPlayButton/Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/src/LolPlayButton/Images/logo.png -------------------------------------------------------------------------------- /src/LolPlayButton/LolPlayButton.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | WinExe 5 | net7.0-windows 6 | enable 7 | enable 8 | true 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | PreserveNewest 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/LolPlayButton/MainWindow.xaml: -------------------------------------------------------------------------------- 1 |  10 | 11 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/LolPlayButton/MainWindow.xaml.cs: -------------------------------------------------------------------------------- 1 | using System.Text; 2 | using System.Windows; 3 | using System.Windows.Controls; 4 | using System.Windows.Data; 5 | using System.Windows.Documents; 6 | using System.Windows.Input; 7 | using System.Windows.Media; 8 | using System.Windows.Media.Imaging; 9 | using System.Windows.Navigation; 10 | using System.Windows.Shapes; 11 | 12 | namespace LolPlayButton 13 | { 14 | /// 15 | /// Interaction logic for MainWindow.xaml 16 | /// 17 | public partial class MainWindow : Window 18 | { 19 | public MainWindow() 20 | { 21 | InitializeComponent(); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/VickyPlayButton/App.xaml: -------------------------------------------------------------------------------- 1 |  6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 31 | 32 | 38 | 39 | 45 | 46 | 54 | 55 | 63 | 64 | 76 | 77 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /src/VickyPlayButton/App.xaml.cs: -------------------------------------------------------------------------------- 1 | using System.Configuration; 2 | using System.Data; 3 | using System.Windows; 4 | 5 | namespace VickyPlayButton 6 | { 7 | /// 8 | /// Interaction logic for App.xaml 9 | /// 10 | public partial class App : Application 11 | { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/VickyPlayButton/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Windows; 2 | 3 | [assembly: ThemeInfo( 4 | ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located 5 | //(used if a resource is not found in the page, 6 | // or application resource dictionaries) 7 | ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located 8 | //(used if a resource is not found in the page, 9 | // app, or any theme specific resource dictionaries) 10 | )] 11 | -------------------------------------------------------------------------------- /src/VickyPlayButton/Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesnetGroup/riotplaybutton/7737f143f430bfc625d47f5c4ed4d4b34ae9fe9a/src/VickyPlayButton/Images/logo.png -------------------------------------------------------------------------------- /src/VickyPlayButton/MainWindow.xaml: -------------------------------------------------------------------------------- 1 |  10 | 11 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/VickyPlayButton/MainWindow.xaml.cs: -------------------------------------------------------------------------------- 1 | using System.Text; 2 | using System.Windows; 3 | using System.Windows.Controls; 4 | using System.Windows.Data; 5 | using System.Windows.Documents; 6 | using System.Windows.Input; 7 | using System.Windows.Media; 8 | using System.Windows.Media.Imaging; 9 | using System.Windows.Navigation; 10 | using System.Windows.Shapes; 11 | 12 | namespace VickyPlayButton 13 | { 14 | /// 15 | /// Interaction logic for MainWindow.xaml 16 | /// 17 | public partial class MainWindow : Window 18 | { 19 | public MainWindow() 20 | { 21 | InitializeComponent(); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/VickyPlayButton/VickyPlayButton.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | WinExe 5 | net7.0-windows 6 | enable 7 | enable 8 | true 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | PreserveNewest 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/VickyPlayButton/VickyPlayButton.csproj.user: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Designer 7 | 8 | 9 | 10 | 11 | Designer 12 | 13 | 14 | --------------------------------------------------------------------------------