-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
681 lines (602 loc) · 131 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>你好 Hexo</title>
<url>/2024/08/11/hello-world/</url>
<content><![CDATA[<p>欢迎来到<a class="link" href="https://hexo.io/">Hexo <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>!这是你第一次发文章。查阅<a class="link" href="https://hexo.io/docs/">documentation <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>更多信息， 如果您在使用 Hexo 时遇到任何问题，可以在以下文档中找到答案<a class="link" href="https://hexo.io/docs/troubleshooting.html">troubleshooting <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>或者您可以在<a class="link" href="https://github.com/hexojs/hexo/issues">GitHub <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>咨询我。</p>
<h2 id="快速开始"><a href="#快速开始" class="headerlink" title="快速开始"></a>快速开始</h2><h3 id="创建一个文章"><a href="#创建一个文章" class="headerlink" title="创建一个文章"></a>创建一个文章</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure></div>
<p>更多信息: <a class="link" href="https://hexo.io/docs/writing.html">Writing <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="运行服务"><a href="#运行服务" class="headerlink" title="运行服务"></a>运行服务</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure></div>
<p>更多信息: <a class="link" href="https://hexo.io/docs/server.html">Server <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure></div>
<p>更多信息: <a class="link" href="https://hexo.io/docs/generating.html">Generating <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="部署到远程地址"><a href="#部署到远程地址" class="headerlink" title="部署到远程地址"></a>部署到远程地址</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure></div>
<p>更多信息: <a class="link" href="https://hexo.io/docs/one-command-deployment.html">Deployment <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
]]></content>
<categories>
<category>开发</category>
</categories>
<tags>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>Revit开发环境配置</title>
<url>/2024/08/11/Revit-Dev-Starter/</url>
<content><![CDATA[<p>安装Revit主程序;</p>
<p>再次安装主程序。工具和实用程序就是Revit SDK文件，包含了Revit API帮助文档和开发样例等。默认位置都在C盘。</p>
<p>安装Visual Studio</p>
<p>配置Add-In Manager（用于调试二次开发命令）和Revit Lookup工具（查询Revit图元信息，下载地址：<a class="link" href="https://github.com/jeremytammik/RevitLookup">https://github.com/jeremytammik/RevitLookup <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> 先进行编译，生成dll文件）将文件解压到以下路径对应Revit版本文件夹下（用于加载插件的3个文件夹）</p>
<ul>
<li><p>C:\ProgramData\Autodesk\Revit\Addins（一般使用此目录）</p>
</li>
<li><p>C:\ProgramData\Autodesk\ApplicationPlugins（所有本机用户）</p>
</li>
<li><p>C:\Users\用户名\AppData\Roaming\Autodesk\Revit\Addins(仅当前登录用户）</p>
</li>
</ul>
<p>打开Revit，会发现有提示是否载入。全部总是载入。新建项目，在附加模块菜单下面，就会发现第一个就是外部工具，里面就是addin Manager. 到此，Revit二次开发环境已经配置完成。</p>
<p>新建项目-类库(.NET Framework)</p>
<p>框架：根据不同Revit版本有不同的.Net框架要求，如Revit 2017 要求4.5.2以上，详见Revit SDK；</p>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/Revit-Dev-Starter/NewProject.png" alt="新建项目"></p>
<p>添加引用组件，组件位于Revit安装目录</p>
<img lazyload src="/images/loading.svg" data-src="/2024/08/11/Revit-Dev-Starter/AddDependencies.png" class title="添加依赖">
<p>创建外部命令</p>
<img lazyload src="/images/loading.svg" data-src="/2024/08/11/Revit-Dev-Starter/NewCommand.png" class title="创建命令">
<p>入门HelloWorld！</p>
]]></content>
<categories>
<category>开发</category>
</categories>
<tags>
<tag>Revit</tag>
<tag>BIM</tag>
<tag>二次开发</tag>
<tag>.Net</tag>
</tags>
</entry>
<entry>
<title>Mahapps快速入门</title>
<url>/2024/08/11/Mahapps-QuickStart/</url>
<content><![CDATA[<h1 id="1-快速开始"><a href="#1-快速开始" class="headerlink" title="1 快速开始"></a>1 快速开始</h1><h2 id="1-1-Table-Of-Contents"><a href="#1-1-Table-Of-Contents" class="headerlink" title="1.1 Table Of Contents"></a>1.1 Table Of Contents</h2><p>• Installation<br>• Styling the MetroWindow<br>• How does MetroWindow work<br>• Customization<br>• WindowButtonCommands<br>• (Left-/Right-) WindowCommands<br>• More Info<br>本指南将向您介绍 MahApps.Metro 的工作原理以及如何将其融入到您的应用程序。</p>
<h2 id="1-2-安装教程"><a href="#1-2-安装教程" class="headerlink" title="1.2 安装教程"></a>1.2 安装教程</h2><p>你可以安装 MahApps.Metro 通过 NuGet GUI（右键单击您的项目，单击管理 NuGet 程序包，选择浏览，然后搜索MahApps.Metro）或程序包管理器控制台︰<br><code>PM> Install-Package MahApps.Metro</code><br><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-22-56.png" alt="MahApps"><br>如果你想要使用的 MahApps.Metro （这些有最新的代码和最新功能） 的预发行版软件包，您需要启用在 GUI 中包括预发布版︰<br>或使用程序包管理器控制台︰<br><code>PM> Install-Package MahApps.Metro -Pre</code></p>
<h2 id="1-3-设计窗体"><a href="#1-3-设计窗体" class="headerlink" title="1.3 设计窗体"></a>1.3 设计窗体</h2><p>有两种方式你可以设计您使用 MahApps.Metro 的窗口︰<br>• 您可以使用所包含的 MetroWindow 控件<br>• 设计你自己的窗口<br>现在我们会使用 MetroWindow，这种方法将为应用程序有很大一部分工作，是最快和最简单的方式。如果你想要了解滚动你自己的窗体，查阅指南 。</p>
<h3 id="1-3-1-使用-MetroWindow-控件"><a href="#1-3-1-使用-MetroWindow-控件" class="headerlink" title="1.3.1 使用 MetroWindow 控件"></a>1.3.1 使用 MetroWindow 控件</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-26-13.png" alt="MetroWindow"></p>
<h3 id="1-3-2-修改-XAML-文件"><a href="#1-3-2-修改-XAML-文件" class="headerlink" title="1.3.2 修改 XAML 文件"></a>1.3.2 修改 XAML 文件</h3><p>安装 MahApps.Metro后：<br>• 打开 MainWindow.xaml<br>• 打开的窗体标记里面添加此属性。 （这是你如何引用其他命名空间在 XAML 中的）︰<br><code>xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"</code><br>或者<br><code>xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"</code><br>• 修改 <Window …标记为 <Controls:MetroWindow … （记得也要更改结束标记！）<br>你应该做这些像这样的东西 （不要复制和粘贴这些）︰</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow x:Class="WpfApplication.MainWindow"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"</span><br><span class="line"> Title="MainWindow"</span><br><span class="line"> Height="600"</span><br><span class="line"> Width="800"></span><br><span class="line"> <!-- your content --></span><br><span class="line"></Controls:MetroWindow></span><br></pre></td></tr></table></figure></div>
<h3 id="1-3-3-修改后台代码"><a href="#1-3-3-修改后台代码" class="headerlink" title="1.3.3 修改后台代码"></a>1.3.3 修改后台代码</h3><p>你还需要修改 MainWindow.xaml.cs 文件，以便MainWindow的基类与 XAML 文件的 MetroWindow 类匹配。<br>// 若要访问 MetroWindow，添加下面的引用</p>
<div class="highlight-container" data-rel="Csharp"><figure class="iseeu highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">using</span> MahApps.Metro.Controls;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> <span class="title">WpfApplication</span></span><br><span class="line">{</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">partial</span> <span class="keyword">class</span> <span class="title">MainWindow</span> : <span class="title">MetroWindow</span></span><br><span class="line"> {</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="title">MainWindow</span>()</span></span><br><span class="line"> {</span><br><span class="line"> InitializeComponent();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">但在大多数情况下你可以省略这些基类 （因为XAML 应该照顾<span class="keyword">partial</span> 类）︰</span><br><span class="line"><span class="keyword">namespace</span> <span class="title">WpfApplication</span></span><br><span class="line">{</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">partial</span> <span class="keyword">class</span> <span class="title">MainWindow</span></span><br><span class="line"> {</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="title">MainWindow</span>()</span></span><br><span class="line"> {</span><br><span class="line"> InitializeComponent();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>最终的结果将如下所示︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-26-34.png" alt="MetroWindow"></p>
<hr>
<h3 id="1-3-4-使用内置样式"><a href="#1-3-4-使用内置样式" class="headerlink" title="1.3.4 使用内置样式"></a>1.3.4 使用内置样式</h3><p>所有 MahApp.Metro 的资源均包含在单独的资源字典。为了使控件中的大部分采用的 MahApps.Metro 主题，你需要将 ResourceDictionaries 添加到您的 App.xaml。<br>App.xaml</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Application x:Class="WpfApplication.App"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> StartupUri="MainWindow.xaml"></span><br><span class="line"> <Application.Resources></span><br><span class="line"> <ResourceDictionary></span><br><span class="line"> <ResourceDictionary.MergedDictionaries></span><br><span class="line"> <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! --></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" /></span><br><span class="line"> <!-- Accent and AppTheme setting --></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /></span><br><span class="line"> </ResourceDictionary.MergedDictionaries></span><br><span class="line"> </ResourceDictionary></span><br><span class="line"> </Application.Resources></span><br><span class="line"></Application></span><br></pre></td></tr></table></figure></div>
<p>请确保所有文件的名称都是区分大小写 ！<br>最终的结果将如下所示。如果你想要知道更多关于该控件的工作原理，可以在下面发现更多的信息。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-26-45.png" alt="MetroWindow"></p>
<h3 id="1-3-5-什么是MetroWindow？"><a href="#1-3-5-什么是MetroWindow？" class="headerlink" title="1.3.5 什么是MetroWindow？"></a>1.3.5 什么是MetroWindow？</h3><p>默认 MetroWindow 由几个部分组成︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-27-21.png" alt="MetroWindow"><br>如果你不喜欢被贴上标签的元素，不用担心，他们全都是可选。<br>• 除了你自己，标题栏是设置 MetroWindow。ShowTitleBar=”True|False”<br>• 大小调整手柄不是唯一的方式来调整MetroWindow大小 -可以抓住所有的边缘和角落，但是MetroWindow 没有一个像 aero 窗口那样引人注目的窗口 “chrome”, 调整手柄可以帮助用户放心。<br>• 替代使用静态图像，为最小化最大化/关闭的图标是称为 Marlett 字体。要解释为什么有如此需求，了解它的来历，或许至少访问有关它的维基百科文章。<br>• 您甚至可以通过设置标题栏上的图标来隐藏ShowIconOnTitleBar=”True|False”</p>
<h2 id="1-4-定制"><a href="#1-4-定制" class="headerlink" title="1.4 定制"></a>1.4 定制</h2><h3 id="1-4-1-窗口按钮命令"><a href="#1-4-1-窗口按钮命令" class="headerlink" title="1.4.1 窗口按钮命令"></a>1.4.1 窗口按钮命令</h3><p>WindowButtonCommands 是最小化、 最大化/还原和关闭按钮。你可以隐藏按钮通过 ShowMinButton=”True|False”, ShowMaxRestoreButton=”True|False” 和 ShowCloseButton=”True|False”.<br>最小化和最大化/还原按钮的可见性也可以被 ResizeMode影响。如果设置ResizeMode=”NoResize”按钮将被折叠. 如果设置 ResizeMode=”CanMinimize”最大化/还原按钮处于折叠状态。</p>
<h3 id="1-4-2-（左-右-）窗体命令"><a href="#1-4-2-（左-右-）窗体命令" class="headerlink" title="1.4.2 （左 / 右-）窗体命令"></a>1.4.2 （左 / 右-）窗体命令</h3><p>您可以将您自己的控件添加到 LeftWindowsCommands 或 RightWindowsCommands - 默认情况下，按钮自动将样式应用于他们，使他们适应其余的 WindowsCommands 。截至 0.9，你不再局限于只是按钮，但任何控件。要知道，你是负责设计按钮以外的任何东西。<br>包含这个在内 <code><MetroWindow> ... </MetroWindow></code>标记：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow.RightWindowCommands></span><br><span class="line"> <Controls:WindowCommands></span><br><span class="line"> <Button Content="settings" /></span><br><span class="line"> <Button></span><br><span class="line"> <StackPanel Orientation="Horizontal"></span><br><span class="line"> <Rectangle Width="20"</span><br><span class="line"> Height="20"</span><br><span class="line"> Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"></span><br><span class="line"> <Rectangle.OpacityMask></span><br><span class="line"> <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" /></span><br><span class="line"> </Rectangle.OpacityMask></span><br><span class="line"> </Rectangle></span><br><span class="line"> <TextBlock Margin="4 0 0 0"</span><br><span class="line"> VerticalAlignment="Center"</span><br><span class="line"> Text="deploy cupcakes" /></span><br><span class="line"> </StackPanel></span><br><span class="line"> </Button></span><br><span class="line"> </Controls:WindowCommands></span><br><span class="line"></Controls:MetroWindow.RightWindowCommands></span><br></pre></td></tr></table></figure></div>
<p>请确保包含图标以得到蛋糕图标。<br>产生这样的窗口标题栏︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-27-37.png" alt="Title"><br>除非禁用标题栏，（左 / 右-）WindowCommands 的前景 （链接） 颜色永远是白色，在这种情况下它将是您选择的任何主题的反向。例如，使用白光/主题，前景颜色将为黑色</p>
<h2 id="1-5-接下来是什么？"><a href="#1-5-接下来是什么？" class="headerlink" title="1.5 接下来是什么？"></a>1.5 接下来是什么？</h2><p>有关扩展文档，看看Controls 页面。</p>
<h1 id="2-高级MetroWindow指南"><a href="#2-高级MetroWindow指南" class="headerlink" title="2 高级MetroWindow指南"></a>2 高级MetroWindow指南</h1><h2 id="2-1-玩转自己的窗口"><a href="#2-1-玩转自己的窗口" class="headerlink" title="2.1 玩转自己的窗口"></a>2.1 玩转自己的窗口</h2><p>你自己的方法是非常价值的, 这取决于你要用什么风格的应用程序。 一个好的例子是code52’s MarkPad, 在那里我们需要的灵活性的同时仍然使用 MahApps.Metro 作为一种基本的视觉框架滚动我们自己的窗口。 The key elements used were 使用的关键元素是 WindowCommands （这里讨论的） 和 BorderlessWindowBehavior。</p>
<h3 id="2-1-1-无边框窗口行为"><a href="#2-1-1-无边框窗口行为" class="headerlink" title="2.1.1 无边框窗口行为"></a>2.1.1 无边框窗口行为</h3><p>一些命名空间将引用添加到打开的窗口标记︰</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line">xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"</span><br><span class="line">xmlns:Behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"</span><br></pre></td></tr></table></figure></div>
<p>然后在某个地方在窗口内，添加</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><i:Interaction.Behaviors></span><br><span class="line"> <Behaviours:BorderlessWindowBehavior/></span><br><span class="line"></i:Interaction.Behaviors></span><br></pre></td></tr></table></figure></div>
<p>做完后， BorderlessWindowBehavior 有一些选项，例如 ResizeWithGrip 和 AutoSizeToContent:<br> <code><Behaviours:BorderlessWindowBehavior ResizeWithGrip="False" /></code></p>
<h1 id="3-图标和资源-MahApps-Metro"><a href="#3-图标和资源-MahApps-Metro" class="headerlink" title="3 图标和资源 - MahApps.Metro"></a>3 图标和资源 - MahApps.Metro</h1><h2 id="3-1-图标和资源"><a href="#3-1-图标和资源" class="headerlink" title="3.1 图标和资源"></a>3.1 图标和资源</h2><p>MahApps.Metro 不会嵌入任何图标或”资源”以外的控件样式。而是通过MahApps.Metro.Resources 包。这允许更好的发现能力和定制。您可以安装使用 nuget 安装此软件包︰<br><code>PM> Install-PackageMahApps.Metro.Resources</code><br>目前，这包括 Entypo 和 Templarian’s Modern UI Icon pack<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-28-38.png" alt="Resources"></p>
<h2 id="3-2-用法"><a href="#3-2-用法" class="headerlink" title="3.2 用法"></a>3.2 用法</h2><p>资源只是 Canvas的环绕一个或多个 Paths. 若要使用这些各种各样的元素，您可以只使用 WPF 的 VisualBrush.</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Window.Resources></span><br><span class="line"> <ResourceDictionary></span><br><span class="line"> <ResourceDictionary.MergedDictionaries></span><br><span class="line"> <ResourceDictionary Source="/Resources/Icons.xaml" /></span><br><span class="line"> </ResourceDictionary.MergedDictionaries></span><br><span class="line"> </ResourceDictionary></span><br><span class="line"></Window.Resources></span><br></pre></td></tr></table></figure></div>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Rectangle></span><br><span class="line"> <Rectangle.Fill></span><br><span class="line"> <VisualBrush Visual="{StaticResource appbar_add}" /></span><br><span class="line"> </Rectangle.Fill></span><br><span class="line"></Rectangle></span><br></pre></td></tr></table></figure></div>
<p>如果你想创建 “circle” 按钮 ala Windows Phone 7, 最简单的方式是在Rectangle 上的VisualBrush 设置为 OpacityMask . 这意味着您只需改变状态变化的Rectangle的颜色 (hover, mouse down等)</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Rectangle Fill="Black"></span><br><span class="line"> <Rectangle.OpacityMask></span><br><span class="line"> <VisualBrush Visual="{StaticResource appbar_add}" Stretch="Fill" /></span><br><span class="line"> </Rectangle.OpacityMask></span><br><span class="line"></Rectangle></span><br></pre></td></tr></table></figure></div>
<h1 id="4-样式"><a href="#4-样式" class="headerlink" title="4 样式"></a>4 样式</h1><h2 id="4-1-目录"><a href="#4-1-目录" class="headerlink" title="4.1 目录"></a>4.1 目录</h2><p>• Overview<br>• How to change the current theme… via App.xaml<br>• How to change the current theme… via ThemeManager<br>• How to change the current theme… On a Window different to your Application’s MainPage<br>• Creating Custom Accents and Themes</p>
<h2 id="4-2-概述"><a href="#4-2-概述" class="headerlink" title="4.2 概述"></a>4.2 概述</h2><p>该指南向你介绍很多 MahApps.Metro 的 accents and themes，以及如何自己创建的方法。<br>所有的 MahApps.Metro’s accents and themes 被包含在各自的资源字典里 (确保所有的文件名都拼写正确，他们是区分大小写的！)。</p>
<h2 id="4-3-怎么去修改当前的theme"><a href="#4-3-怎么去修改当前的theme" class="headerlink" title="4.3 怎么去修改当前的theme"></a>4.3 怎么去修改当前的theme</h2><p>你可以选择以下可用的 accents:<br>“Red”, “Green”, “Blue”, “Purple”, “Orange”, “Lime”, “Emerald”, “Teal”, “Cyan”, “Cobalt”, “Indigo”, “Violet”, “Pink”, “Magenta”, “Crimson”, “Amber”, “Yellow”, “Brown”, “Olive”, “Steel”, “Mauve”, “Taupe”, “Sienna”<br>and these themes:<br>“BaseLight”, “BaseDark”</p>
<h3 id="4-3-1-通过App-xaml"><a href="#4-3-1-通过App-xaml" class="headerlink" title="4.3.1 通过App.xaml"></a>4.3.1 通过App.xaml</h3><p>最快的方法是在 App.xaml指定 the accent and theme resource。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Application x:Class="MahAppsMetroThemesSample.App"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> StartupUri="MainWindow.xaml"></span><br><span class="line"> <Application.Resources></span><br><span class="line"> <ResourceDictionary></span><br><span class="line"> <ResourceDictionary.MergedDictionaries></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" /></span><br><span class="line"></span><br><span class="line"> <!-- accent resource --></span><br><span class="line"> <!-- change "Cobalt" to the accent color you want --></span><br><span class="line"></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Cobalt.xaml" /></span><br><span class="line"></span><br><span class="line"> <!-- theme resource --></span><br><span class="line"> <!-- change "BaseLight" to the theme you want --></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /></span><br><span class="line"> </ResourceDictionary.MergedDictionaries></span><br><span class="line"> </ResourceDictionary></span><br><span class="line"> </Application.Resources></span><br><span class="line"></Application></span><br></pre></td></tr></table></figure></div>
<p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-29-01.png" alt="Resources"></p>
<h3 id="4-3-2-通过ThemeManager"><a href="#4-3-2-通过ThemeManager" class="headerlink" title="4.3.2 通过ThemeManager"></a>4.3.2 通过ThemeManager</h3><p>MahApps.Metro 拥有 ThemeManager的方法让你使用后台代码修改accent and theme. 使用两行代码解决, 如下:</p>
<div class="highlight-container" data-rel="Csharp"><figure class="iseeu highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">partial</span> <span class="keyword">class</span> <span class="title">App</span> : <span class="title">Application</span></span><br><span class="line">{</span><br><span class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">void</span> <span class="title">OnStartup</span>(<span class="params">StartupEventArgs e</span>)</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// get the current app style (theme and accent) from the application</span></span><br><span class="line"> <span class="comment">// you can then use the current theme and custom accent instead set a new theme</span></span><br><span class="line"> Tuple<AppTheme, Accent> appStyle = ThemeManager.DetectAppStyle(Application.Current);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// now set the Green accent and dark theme</span></span><br><span class="line"> ThemeManager.ChangeAppStyle(Application.Current,</span><br><span class="line"> ThemeManager.GetAccent(<span class="string">"Green"</span>),</span><br><span class="line"> ThemeManager.GetAppTheme(<span class="string">"BaseDark"</span>)); <span class="comment">// or appStyle.Item1</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">base</span>.OnStartup(e);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<h3 id="4-3-3-与应用程序主页不同的窗体"><a href="#4-3-3-与应用程序主页不同的窗体" class="headerlink" title="4.3.3 与应用程序主页不同的窗体"></a>4.3.3 与应用程序主页不同的窗体</h3><p>通过 MahApps.Metro ，你可以为MetroWindow指定不同的accent and theme . 主窗体或者其他任何 MetroWindow 将会保有在App.xaml文档中被指定的 accent and theme。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow.Resources></span><br><span class="line"> <ResourceDictionary></span><br><span class="line"> <ResourceDictionary.MergedDictionaries></span><br><span class="line"> <!-- this window should be blue --></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /></span><br><span class="line"> <!-- and should use the light theme --></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /></span><br><span class="line"> </ResourceDictionary.MergedDictionaries></span><br><span class="line"> </ResourceDictionary></span><br><span class="line"></Controls:MetroWindow.Resources></span><br></pre></td></tr></table></figure></div>
<p>你也可以 ThemeManager来实现，像这样：</p>
<div class="highlight-container" data-rel="Csharp"><figure class="iseeu highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">partial</span> <span class="keyword">class</span> <span class="title">AccentStyleWindow</span> : <span class="title">MetroWindow</span></span><br><span class="line">{</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">ChangeAppStyle</span>()</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// set the Red accent and dark theme only to the current window</span></span><br><span class="line"> ThemeManager.ChangeAppStyle(<span class="keyword">this</span>,</span><br><span class="line"> ThemeManager.GetAccent(<span class="string">"Red"</span>),</span><br><span class="line"> ThemeManager.GetAppTheme(<span class="string">"BaseDark"</span>));</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<h3 id="4-3-4-创建自定义-Accents-and-Themes"><a href="#4-3-4-创建自定义-Accents-and-Themes" class="headerlink" title="4.3.4 创建自定义 Accents and Themes"></a>4.3.4 创建自定义 Accents and Themes</h3><p>MahApps.Metro ThemeManager的另一个不错的功能是使用自定义的 accents和themes 或使用动态创建的 accent 和 theme.</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"</span><br><span class="line"> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><br><span class="line"> mc:Ignorable="options"></span><br><span class="line"></span><br><span class="line"> <!--ACCENT COLORS--></span><br><span class="line"> <Color x:Key="HighlightColor">#FF9F0055</Color></span><br><span class="line"></span><br><span class="line"> <!--80%--></span><br><span class="line"> <Color x:Key="AccentColor">#CCD80073</Color></span><br><span class="line"> <!--60%--></span><br><span class="line"> <Color x:Key="AccentColor2">#99D80073</Color></span><br><span class="line"> <!--40%--></span><br><span class="line"> <Color x:Key="AccentColor3">#66D80073</Color></span><br><span class="line"> <!--20%--></span><br><span class="line"> <Color x:Key="AccentColor4">#33D80073</Color></span><br><span class="line"></span><br><span class="line"> <!-- re-set brushes too --></span><br><span class="line"> <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentBaseColorBrush" Color="{StaticResource AccentBaseColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" /></span><br><span class="line"></span><br><span class="line"> <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"></span><br><span class="line"> <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="## 1.002,0.5" options:Freeze="True"></span><br><span class="line"> <GradientStop Color="{StaticResource HighlightColor}" Offset="0" /></span><br><span class="line"> <GradientStop Color="{StaticResource AccentColor3}" Offset="1" /></span><br><span class="line"> </LinearGradientBrush></span><br><span class="line"></span><br><span class="line"> <SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"></span><br><span class="line"> <Color x:Key="IdealForegroundColor">White</Color></span><br><span class="line"> <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource IdealForegroundColor}" Opacity="0.4" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /></span><br><span class="line"></span><br><span class="line"> <!-- DataGrid brushes --></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.HighlightBrush" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.HighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.MouseOverHighlightBrush" Color="{StaticResource AccentColor3}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.FocusBorderBrush" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightBrush" Color="{StaticResource AccentColor2}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /></span><br><span class="line"></span><br><span class="line"> <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchBrush.Win10" Color="{StaticResource AccentColor}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchMouseOverBrush.Win10" Color="{StaticResource AccentColor2}" options:Freeze="True" /></span><br><span class="line"> <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.ThumbIndicatorCheckedBrush.Win10" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /></span><br><span class="line"></ResourceDictionary></span><br></pre></td></tr></table></figure></div>
<p>为了使用自定义accent,首先你要在 ThemeManager 添加它：</p>
<div class="highlight-container" data-rel="Csharp"><figure class="iseeu highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">partial</span> <span class="keyword">class</span> <span class="title">App</span> : <span class="title">Application</span></span><br><span class="line">{</span><br><span class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">void</span> <span class="title">OnStartup</span>(<span class="params">StartupEventArgs e</span>)</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// add custom accent and theme resource dictionaries to the ThemeManager</span></span><br><span class="line"> <span class="comment">// you should replace MahAppsMetroThemesSample with your application name</span></span><br><span class="line"> <span class="comment">// and correct place where your custom accent lives</span></span><br><span class="line"> ThemeManager.AddAccent(<span class="string">"CustomAccent1"</span>, <span class="keyword">new</span> Uri(<span class="string">"pack://application:,,,/MahAppsMetroThemesSample;component/CustomAccents/CustomAccent## 1.xaml"</span>));</span><br><span class="line"></span><br><span class="line"> <span class="comment">// get the current app style (theme and accent) from the application</span></span><br><span class="line"> Tuple<AppTheme, Accent> theme = ThemeManager.DetectAppStyle(Application.Current);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// now change app style to the custom accent and current theme</span></span><br><span class="line"> ThemeManager.ChangeAppStyle(Application.Current,</span><br><span class="line"> ThemeManager.GetAccent(<span class="string">"CustomAccent1"</span>),</span><br><span class="line"> theme.Item1);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">base</span>.OnStartup(e);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>它也是可以通过使用特定颜色动态创建Accent的资源字典。看看这个在 GitHub 的完整示例。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/ThemeManager.gif" alt="ThemeManager"></p>
<h1 id="5-Control"><a href="#5-Control" class="headerlink" title="5 Control"></a>5 Control</h1><p>目前并不是所有的控件都记录。下面列出了与文档相关的控件列表︰</p>
<h2 id="5-1-MetroWindow"><a href="#5-1-MetroWindow" class="headerlink" title="5.1 MetroWindow"></a>5.1 MetroWindow</h2><h3 id="5-1-1-Default"><a href="#5-1-1-Default" class="headerlink" title="5.1.1 Default"></a>5.1.1 Default</h3><p>MetroWindow 的主要用途主要是在快速开始部分详解。<br>一个没有详细的属性是 SaveWindowPosition=”True|False” (默认 False) 选项. 设置该属性为 True 将意味着，它将自动被定位和大小调整为它是退出时的状态。 这被设计来提高用户体验和速度发展作为那些定期做的“plumbing” UI之一。<br>但是要注意 – 在程序退出并重新启动时如果监视器被分离，或出现某些情况时，您的应用程序可能会启动关闭屏幕。 一定要在代码中提供一个‘reset’ 选项或句柄。</p>
<h3 id="5-1-2-Windowboders"><a href="#5-1-2-Windowboders" class="headerlink" title="5.1.2 Windowboders"></a>5.1.2 Windowboders</h3><p>MetroWindow 可以拥有边框：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"</span><br><span class="line"> Title="MainWindow"</span><br><span class="line"> Height="200"</span><br><span class="line"> Width="600"</span><br><span class="line"> BorderBrush="{DynamicResource AccentColorBrush}"</span><br><span class="line"> BorderThickness="1"</span><br><span class="line"> WindowStartupLocation="CenterScreen"></span><br><span class="line"></Controls:MetroWindow></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-31-49.png" alt="MetroWindow"></p>
<p>发光的边框</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"</span><br><span class="line"> Title="MainWindow"</span><br><span class="line"> Height="200"</span><br><span class="line"> Width="600"</span><br><span class="line"> GlowBrush="{DynamicResource AccentColorBrush}"</span><br><span class="line"> WindowStartupLocation="CenterScreen"></span><br><span class="line"></Controls:MetroWindow></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-31-58.png" alt="MetroWindow"></p>
<p>或者阴影的边框</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"</span><br><span class="line"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><br><span class="line"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</span><br><span class="line"> xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"</span><br><span class="line"> Title="MainWindow"</span><br><span class="line"> Height="200"</span><br><span class="line"> Width="600"</span><br><span class="line"> BorderThickness="0" </span><br><span class="line"> GlowBrush="Black"</span><br><span class="line"> ResizeMode="CanResizeWithGrip"</span><br><span class="line"> WindowTransitionsEnabled="False"</span><br><span class="line"> WindowStartupLocation="CenterScreen"></span><br><span class="line"></Controls:MetroWindow></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-07.png" alt="MetroWindow"></p>
<h2 id="5-2-Buttons"><a href="#5-2-Buttons" class="headerlink" title="5.2 Buttons"></a>5.2 Buttons</h2><h3 id="5-2-1-Default-Look"><a href="#5-2-1-Default-Look" class="headerlink" title="5.2.1 Default Look"></a>5.2.1 Default Look</h3><p>这只是替换标准的按钮放在库中时，没有什么幻想来激活它。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-15.png" alt="Default"></p>
<h3 id="5-2-2-MetroCircleButton"><a href="#5-2-2-MetroCircleButton" class="headerlink" title="5.2.2 MetroCircleButton"></a>5.2.2 MetroCircleButton</h3><p>“Standard” 圆形按钮, 图标设计。<br>将以下内容添加到按钮以应用此样式： Style=”{DynamicResource MetroCircleButtonStyle}”<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-20.png" alt="MetroCircleButton"></p>
<h3 id="5-2-3-SquareButton"><a href="#5-2-3-SquareButton" class="headerlink" title="5.2.3 SquareButton"></a>5.2.3 SquareButton</h3><p>另一个 WP7 风格的按钮，这次为文本（非图标）。像这里所有的按钮，有正常，被单击，并悬停的状态。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-25.png" alt="SquareButton"><br>若要应用该样式的按钮，需添加以下内容︰ Style=”{DynamicResource SquareButtonStyle}”</p>
<h3 id="5-2-4-AccentedSquareButton"><a href="#5-2-4-AccentedSquareButton" class="headerlink" title="5.2.4 AccentedSquareButton"></a>5.2.4 AccentedSquareButton</h3><p>稍加修饰拥有当前皮肤颜色作为背景色的方形按钮版本。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-33.png" alt="AccentedSquareButton"><br>若要应用该样式的按钮添加以下内容︰ Style=”{StaticResource AccentedSquareButtonStyle}”</p>
<h3 id="5-2-5-FlatButton"><a href="#5-2-5-FlatButton" class="headerlink" title="5.2.5 FlatButton"></a>5.2.5 FlatButton</h3><p>当你制作一个电话上 Windows Phone-可以发现所有控件 （挂断，键盘等），此类按钮是 ‘flat buttons’。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-32-39.png" alt="FlatButton"><br>平面按钮存放在<br><code><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" /></code><br>你需要放入资源字典，并使用它。</p>
<h2 id="5-3-ContextMenu"><a href="#5-3-ContextMenu" class="headerlink" title="5.3 ContextMenu"></a>5.3 ContextMenu</h2><h1 id="ContextMenu-without-CompositeCollection"><a href="#ContextMenu-without-CompositeCollection" class="headerlink" title="ContextMenu without CompositeCollection"></a>ContextMenu without CompositeCollection</h1><p>当你熟悉了它，您可以使用ContextMenu︰</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ContextMenu></span><br><span class="line"> <MenuItem Command="ApplicationCommands.New" /></span><br><span class="line"> <MenuItem Command="ApplicationCommands.Delete" /></span><br><span class="line"> <MenuItem Command="ApplicationCommands.Print" /></span><br><span class="line"></ContextMenu></span><br></pre></td></tr></table></figure></div>
<h1 id="ContextMenu-with-CompositeCollection"><a href="#ContextMenu-with-CompositeCollection" class="headerlink" title="ContextMenu with CompositeCollection"></a>ContextMenu with CompositeCollection</h1><p>如果您想要使用声明为资源和共享的ContextMenu，必须使用如下的 CompositeCollection :</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><CompositeCollection x:Key="ContextMenuBase"</span><br><span class="line"> x:Shared="False"></span><br><span class="line"> <MenuItem Command="ApplicationCommands.New" /></span><br><span class="line"> <MenuItem Command="ApplicationCommands.Delete" /></span><br><span class="line"> <Separator /></span><br><span class="line"> <StaticResource ResourceKey="ContextMenuItemRefresh" /></span><br><span class="line"> <Separator /></span><br><span class="line"></CompositeCollection></span><br></pre></td></tr></table></figure></div>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ContextMenu></span><br><span class="line"> <ContextMenu.ItemsSource></span><br><span class="line"> <CompositeCollection></span><br><span class="line"> <CollectionContainer Collection="{StaticResource ContextMenuBase}"></CollectionContainer></span><br><span class="line"> <MenuItem Command="ApplicationCommands.Print" /></span><br><span class="line"> </CompositeCollection></span><br><span class="line"> </ContextMenu.ItemsSource></span><br><span class="line"></ContextMenu></span><br></pre></td></tr></table></figure></div>
<p>当您运行应用程序时你会遇到大量的绑定错误︰<br>System.Windows.Data 错误︰ 4︰ 找不到所绑定的引用源 ‘ RelativeSource FindAncestor，AncestorType=’System.Windows.Controls.ItemsControl’，AncestorLevel = 1 ‘。<br>BindingExpression:Path = VerticalContentAlignment;DataItem = null;目标元素是 ‘MenuItem’ (Name=’’);目标属性是 ‘VerticalContentAlignment’ （’VerticalAlignment’ 类型）。<br>这是在WPF创建一个自定义的MenuItem样式的一个已知的问题和解决方法：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Style TargetType="{x:Type MenuItem}"</span><br><span class="line"> BasedOn="{StaticResource MetroMenuItem}"></span><br><span class="line"> <Setter Property="HorizontalContentAlignment"</span><br><span class="line"> Value="Left" /></span><br><span class="line"> <Setter Property="VerticalContentAlignment"</span><br><span class="line"> Value="Center" /></span><br><span class="line"></Style></span><br></pre></td></tr></table></figure></div>
<p>缺点是你将失去通过在ContextMenu上设置内容对齐方式属性控制MenuItem的内容对齐的能力。</p>
<h2 id="5-4-DataGrid"><a href="#5-4-DataGrid" class="headerlink" title="5.4 DataGrid"></a>5.4 DataGrid</h2><p>DataGrid是关联着 .NET 4.0 默认情况下，提供支持的筛选、分组、排序以及你对 DataGrid 所期望的其他标准功能的控件。<br>MahApps.Metro 使用默认 DataGrid 控件，对它应用默认的样式，。它还包含Checkbox样式的 DataGridCheckBoxColumn，以及自定义的 DataGridNumberNumericUpDownColumn。</p>
<h3 id="5-4-1-Getting-Started"><a href="#5-4-1-Getting-Started" class="headerlink" title="5.4.1 Getting Started"></a>5.4.1 Getting Started</h3><p>为了使要应用的样式，你将必须在你 App.xaml 和namespace里引用Styles/Controls的资源字典。<br><code>xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"</code><br>在你正在使用的窗体 ，介绍关于怎么使用它，可以在快速入门指南中找到。<br>包括引用后, 在 XAML 中放置的任何 DataGrid 将按照上面的样式显示。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><DataGrid ItemsSource="{Binding People}"></span><br><span class="line"></DataGrid></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-33-35.png" alt="DataGrid"></p>
<h3 id="5-4-2-Alternative-Style"><a href="#5-4-2-Alternative-Style" class="headerlink" title="5.4.2 Alternative Style"></a>5.4.2 Alternative Style</h3><p>MahApps.Metro 还提供了一种，试图模仿在微软 Azure 上发现的 AzureDataGrid的DataGrid的样式。使用它而不是默认样式，简单对 DataGrid 的 Style 属性设置为 {StaticResource AzureDataGrid}。像往常一样，确保你有引用定义。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><DataGrid ItemsSource="{Binding People}" Margin="10,20,10,0"</span><br><span class="line"> AutoGenerateColumns="True"</span><br><span class="line"> Style="{StaticResource AzureDataGrid}"></span><br><span class="line"></DataGrid></span><br></pre></td></tr></table></figure></div>
<p>AzureDataGrid 样式将看起来像这样︰<br><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-33-45.png" alt="AzureDataGrid"></p>
<h3 id="5-4-3-DataGrid-Numeric-Updown-Control"><a href="#5-4-3-DataGrid-Numeric-Updown-Control" class="headerlink" title="5.4.3 DataGrid Numeric Updown Control"></a>5.4.3 DataGrid Numeric Updown Control</h3><p>为了设计 DataGrid，MahApps.Metro 还提供了一个控件，允许用户添加NumericUpDown作为他们 DataGrid 的列之一。若要将自定义的列添加到您的 DataGrid， MahApps 命名空间下添加DataGridNumericUpDownColumn到您的 DataGrid.Columns 属性。如果还没有这样做，一定要将 AutoGenerateColumns 设置为 False。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><DataGrid ItemsSource="{Binding Path=Albums}"</span><br><span class="line"> Grid.Row="0"</span><br><span class="line"> AutoGenerateColumns="False"></span><br><span class="line"> <DataGrid.Columns></span><br><span class="line"> <DataGridTextColumn Header="Genre"</span><br><span class="line"> Binding="{Binding Genre.Name}" /></span><br><span class="line"> <controls:DataGridNumericUpDownColumn Header="Price"</span><br><span class="line"> Binding="{Binding Price}"</span><br><span class="line"> StringFormat="C"</span><br><span class="line"> Minimum="0" /></span><br><span class="line"> </DataGrid.Columns></span><br><span class="line"></DataGrid></span><br></pre></td></tr></table></figure></div>
<p>最终的结果将如下所示︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-33-54.png" alt="DataGrid"></p>
<h3 id="5-4-4-DataGrid-Checkbox"><a href="#5-4-4-DataGrid-Checkbox" class="headerlink" title="5.4.4 DataGrid Checkbox"></a>5.4.4 DataGrid Checkbox</h3><p>最后，MahApps.Metro 为DataGridCheckBoxColumn 提供了ElementStyle。为了应用该样式，必须将 DataGridCheckBoxColumn 的 ElementStyle 属性设置为 {DynamicResource MetroDataGridCheckBox}，如下面的代码示例所示。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><DataGrid ItemsSource="{Binding Path=Albums}"</span><br><span class="line"> Grid.Row="0"</span><br><span class="line"> AutoGenerateColumns="False"></span><br><span class="line"> <DataGrid.Columns></span><br><span class="line"> <DataGridCheckBoxColumn ElementStyle="{DynamicResource MetroDataGridCheckBox}"</span><br><span class="line"> EditingElementStyle="{DynamicResource MetroDataGridCheckBox}"</span><br><span class="line"> Header="IsSelected"</span><br><span class="line"> Binding="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Path=IsSelected, Mode=OneWay}"/></span><br><span class="line"> </DataGrid.Columns></span><br><span class="line"></DataGrid></span><br></pre></td></tr></table></figure></div>
<p>最终的结果将如下所示︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-34-03.png" alt="DataGrid"></p>
<h2 id="5-5-Dialogs"><a href="#5-5-Dialogs" class="headerlink" title="5.5 Dialogs"></a>5.5 Dialogs</h2><p>由于内置的 WPF 对话框是 unstyleable，我们不得不创建我们自己的样式。你会发现我们的对话框在 MahApps.Metro.Controls.Dialogs 命名空间中。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-34-14.png" alt="Dialogs"><br>在 MahApps.Metro 中的所有对话框都是异步调用。<br>如果您在.NET 4.5 你有幸使用 async 关键字，如果你又被卡在.NET 4.0的时候，要使用的对话框的话，你只能继续原来的了。<br>本教程使用.NET 4.5 如果你真的想要使用.NET 4.0的 async/await，你可以安装Microsoft Async</p>
<h3 id="5-5-1-Message-dialog"><a href="#5-5-1-Message-dialog" class="headerlink" title="5.5.1 Message dialog"></a>5.5.1 Message dialog</h3><p>简单的消息对话框可以通过ShowMessageAsync 方法显示。它是 MetroWindow 的一种扩展方法，所以从你的窗体类调用它。<br>await this.ShowMessageAsync(“This is the title”, “Some message”);<br>对于简单的按钮有额外的可选参数，如Ok和Cancel和颜色主题以及动画选项的设置。</p>
<h3 id="5-5-2-Progress-dialog"><a href="#5-5-2-Progress-dialog" class="headerlink" title="5.5.2 Progress dialog"></a>5.5.2 Progress dialog</h3><p>还有个在对话框的底部有一个进度栏的内置对话框。这样称呼它︰<br>var controller = await this.ShowProgressAsync(“Please wait…”, “Progress message”);<br>此方法返回一个公开 SetProgress 方法的 ProgressDialogController 对象，，使用它来设置当前的进度。以下是演示有进度对话框的图片︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-34-39.png" alt="Progress dialog"></p>
<h2 id="5-6-FlipView"><a href="#5-6-FlipView" class="headerlink" title="5.6 FlipView"></a>5.6 FlipView</h2><p>FlipView 作为Metro应用程序消息横幅。它的灵感来自 Windows 8/WinRT 的同名控件（见下面的图片）。然而，我们的是从地面向上写入，支撑着 MahApps.Metro 的基础。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-34-46.png" alt="FlipView"></p>
<h3 id="5-6-1-Getting-started"><a href="#5-6-1-Getting-started" class="headerlink" title="5.6.1 Getting started"></a>5.6.1 Getting started</h3><p>FlipView 的结构类似于常规的TabControl控件。把你的内容放入它的 Items 属性，它将允许用户转换他们。<br>下面的代码是从我们的 MetroDemo 获取的。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:FlipView Height="200" </span><br><span class="line"> IsBannerEnabled="True" </span><br><span class="line"> SelectionChanged="FlipView_SelectionChanged"</span><br><span class="line"> Margin="0, 0, 10, 0"></span><br><span class="line"> <Controls:FlipView.Items></span><br><span class="line"> <Grid Background="#2E8DEF"></span><br><span class="line"> <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50"></span><br><span class="line"> <Rectangle.Fill></span><br><span class="line"> <VisualBrush Visual="{StaticResource appbar_cupcake}" /></span><br><span class="line"> </Rectangle.Fill></span><br><span class="line"> </Rectangle></span><br><span class="line"> </Grid></span><br><span class="line"> <Grid Background="#00A600"></span><br><span class="line"> <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50"></span><br><span class="line"> <Rectangle.Fill></span><br><span class="line"> <VisualBrush Visual="{StaticResource appbar_xbox}" /></span><br><span class="line"> </Rectangle.Fill></span><br><span class="line"> </Rectangle></span><br><span class="line"> </Grid></span><br><span class="line"> <Grid Background="#BF1E4B"></span><br><span class="line"> <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50"></span><br><span class="line"> <Rectangle.Fill></span><br><span class="line"> <VisualBrush Visual="{StaticResource appbar_chess_horse}" /></span><br><span class="line"> </Rectangle.Fill></span><br><span class="line"> </Rectangle></span><br><span class="line"> </Grid></span><br><span class="line"> </Controls:FlipView.Items></span><br><span class="line"></Controls:FlipView></span><br></pre></td></tr></table></figure></div>
<p>上面的代码产生以下结果。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-34-57.png" alt="FlipView"></p>
<h3 id="5-6-2-The-Banner"><a href="#5-6-2-The-Banner" class="headerlink" title="5.6.2 The Banner"></a>5.6.2 The Banner</h3><p>通过设置 IsBannerEnabled 属性，FlipView 底部的banner可以显示和隐藏。您可以使用 BannerTextproperty更改banner文本。我们可以使用后台代码中基于选项更改banner。</p>
<div class="highlight-container" data-rel="Csharp"><figure class="iseeu highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">FlipView_SelectionChanged</span>(<span class="params"><span class="built_in">object</span> sender, SelectionChangedEventArgs e</span>)</span></span><br><span class="line">{</span><br><span class="line"> <span class="keyword">var</span> flipview = ((FlipView)sender);</span><br><span class="line"> <span class="keyword">switch</span> (flipview.SelectedIndex)</span><br><span class="line"> {</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line"> flipview.BannerText = <span class="string">"Cupcakes!"</span>;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line"> flipview.BannerText = <span class="string">"Xbox!"</span>;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line"> flipview.BannerText = <span class="string">"Chess!"</span>;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>5.6.3 The Control Buttons<br>控制按钮 （下一页和上一页按钮） 允许用户使用他们的鼠标来转换它的项。通过调用HideControlButtons 和ShowControlButtons，来禁用或重新启用控制按钮。用户也可以使用键盘上箭头来转换它的项。<br>5.6.4 Automated scrolling (batteries not included)<br>当你想要拥有自动滚动体验，禁用控制按钮是非常有用的。这可以通过使用一个计时器并递增SelectedIndex 由执行 1 直到索引等于 Items.Length-1。在这那点上，将会把 SelectedIndex 重置为 0。<br>5.7 Flyouts<br>弹出窗口是拥有自定义内容的窗口覆盖物。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-35-10.png" alt="Flyouts"><br>将下面的代码添加到您的 MetroWindow:</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:MetroWindow.Flyouts></span><br><span class="line"> <Controls:FlyoutsControl></span><br><span class="line"> </span><br><span class="line"> </Controls:FlyoutsControl></span><br><span class="line"></Controls:MetroWindow.Flyouts></span><br></pre></td></tr></table></figure></div>
<p>这是弹出窗口的容器。在此容器内添加以下内容︰<br><Controls:Flyout Header=”Flyout” Position=”Right” Width=”200”><br> <!-- Your custom content here --><br><br>这将创建一个具有页眉的、从窗口右侧滑出、宽度为 200的弹出窗口，。<br>Position属性可以设置的值：<br> Left,<br> Right,<br> Top,<br> Bottom</p>
<h3 id="5-7-1-Themed-flyouts"><a href="#5-7-1-Themed-flyouts" class="headerlink" title="5.7.1 Themed flyouts"></a>5.7.1 Themed flyouts</h3><p>在0.12版本，弹出窗口可以有不同的主题，不可忽视的 Theme属性，如下︰<br> Adapt,<br> Inverse,<br> Dark,<br> Light,<br> Accent<br>• Adapt弹出主题窗口和宿主窗口的主题相适应。<br>• Inverse是宿主窗口主题的反向主题。<br>• Dark将一直是dark的主题，这也是默认值。<br>• Light将一直是light的主题。<br>• Accent弹出主题窗口和宿主窗口的主题相适应，它看起来像这蓝色的主题︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-35-22.png" alt="Flyouts"></p>
<h3 id="5-7-2-WindowCommandsOverlayBehaviorn"><a href="#5-7-2-WindowCommandsOverlayBehaviorn" class="headerlink" title="5.7.2 WindowCommandsOverlayBehaviorn"></a>5.7.2 WindowCommandsOverlayBehaviorn</h3><p>即使显示了弹出窗口，MetroWindow也能为 LeftWindowCommands、 RightWindowCommands、 WindowButtonCommands 和 Icon设有覆盖属性来处理置顶的状态。<br>public WindowCommandsOverlayBehavior LeftWindowCommandsOverlayBehavior<br>public WindowCommandsOverlayBehavior RightWindowCommandsOverlayBehavior<br>public WindowCommandsOverlayBehavior WindowButtonCommandsOverlayBehavior<br>public WindowCommandsOverlayBehavior IconOverlayBehavior<br>这些都是 WindowCommandsOverlayBehavior 的值<br>Never // Doesn’t overlay flyouts nor a hidden TitleBar.<br>Flyouts // Overlays opened Flyout controls.<br>HiddenTitleBar // // Overlays a hidden TitleBar.<br>Always<br>WindowCommandsOverlayBehavior.Always<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-35-38.png" alt="WindowCommandsOverlayBehavior"></p>
<p>WindowCommandsOverlayBehavior.Never<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-35-49.png" alt="WindowCommandsOverlayBehavior"></p>
<h2 id="5-8-NumericUpDown"><a href="#5-8-NumericUpDown" class="headerlink" title="5.8 NumericUpDown"></a>5.8 NumericUpDown</h2><p>NumericUpDown控件是用来增加或减少数值大小。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-36-07.png" alt="NumericUpDown"><br>如果您按下 + 按钮NumericUpDown控件的值增加 Interval中设置的值。按下 - 按钮将减少相应数值。如果你按下并按住 + 或 - 那么数值将分别持续增长，下降。</p>
<h3 id="5-8-1-SpeedUp"><a href="#5-8-1-SpeedUp" class="headerlink" title="5.8.1 SpeedUp"></a>5.8.1 SpeedUp</h3><p>如果你按下并长按 + 或 - ，Value增加或减少得更快。如果不需要这种行为，可以通过 SettingSpeedup = false来关闭此功能。默认值为 true。</p>
<h3 id="5-8-2-HasDecimals"><a href="#5-8-2-HasDecimals" class="headerlink" title="5.8.2 HasDecimals"></a>5.8.2 HasDecimals</h3><p>控制NumericUpDown控件是否显示小数点和小数位数。</p>
<h3 id="5-8-3-InterceptArrowKeys"><a href="#5-8-3-InterceptArrowKeys" class="headerlink" title="5.8.3 InterceptArrowKeys"></a>5.8.3 InterceptArrowKeys</h3><p>你还可以使用向上箭头或向下箭头来增加或减少该值。如果你设置 InterceptArrowKeys = true，您可以启用这种行为。默认情况下启用了这种行为。默认值为 true。</p>
<h3 id="5-8-4-InterceptMouseWheel"><a href="#5-8-4-InterceptMouseWheel" class="headerlink" title="5.8.4 InterceptMouseWheel"></a>5.8.4 InterceptMouseWheel</h3><p>像与 InterceptArrowKeys 你可以通过使用鼠标滚轮来更改值。向上滑动滚轮越多会根据Interval增加值越多，向下滑动滚轮则相应减少。默认值为 true。</p>
<h3 id="5-8-5-InterceptManualEnter"><a href="#5-8-5-InterceptManualEnter" class="headerlink" title="5.8.5 InterceptManualEnter"></a>5.8.5 InterceptManualEnter</h3><p>像 InterceptArrowKeys ，您可以通过定位到控件和用键盘打字更改值。默认值为 true。</p>
<h3 id="Minimum-Maximum"><a href="#Minimum-Maximum" class="headerlink" title="Minimum / Maximum"></a>Minimum / Maximum</h3><p>通过指定一个值为 Minimum或Maximum，您可以设置合法值的范围。</p>
<h3 id="HideUpDownButtons"><a href="#HideUpDownButtons" class="headerlink" title="HideUpDownButtons"></a>HideUpDownButtons</h3><p>如果你想隐藏向上/向下按钮。你就不能够单击向上/向下增加/减小该值。但是你可以用箭头键，鼠标滚轮和输入值手册进行交互。<br>• HideUpDownButtons = false:<br><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-36-30.png" alt="HideUpDownButtons"><br>• HideUpDownButtons = true:<br><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-36-36.png" alt="HideUpDownButtons"></p>
<h3 id="5-8-6-StringFormat"><a href="#5-8-6-StringFormat" class="headerlink" title="5.8.6 StringFormat"></a>5.8.6 StringFormat</h3><p>您还可以设置 StringFormat 来格式化控件中显示的值。<br>举例：<br>• C2<br>• N4<br>• E1<br>• ”{}{0:N2} psc”</p>
<h3 id="5-8-7-Example"><a href="#5-8-7-Example" class="headerlink" title="5.8.7 Example"></a>5.8.7 Example</h3><p>以下NumericUpDown，数值的变化范围从 0 到 1000。此外可以通过按 + 来以5的幅度来增加数值。该值将显示为带有两位小数的货币︰<br><code><Controls:NumericUpDown Minimum = 0, Maximum = 10000, Interval = 5, StringFormat="C2"/></code></p>
<h2 id="5-9-Custom-Styling"><a href="#5-9-Custom-Styling" class="headerlink" title="5.9 Custom Styling"></a>5.9 Custom Styling</h2><h3 id="5-9-1-Want-to-hide-Up-Down-Buttons-if-control-is-readonly"><a href="#5-9-1-Want-to-hide-Up-Down-Buttons-if-control-is-readonly" class="headerlink" title="5.9.1 Want to hide Up-Down Buttons if control is readonly?"></a>5.9.1 Want to hide Up-Down Buttons if control is readonly?</h3><p>如果你想要隐藏的向上向下按钮，如果该控件是只读,你可以添加下面的样式到您的应用程序。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Style TargetType="{x:Type controls:NumericUpDown}"></span><br><span class="line"> <Style.Triggers></span><br><span class="line"> <Trigger Property="IsReadOnly"</span><br><span class="line"> Value="True"></span><br><span class="line"> <Setter Property="HideUpDownButtons"</span><br><span class="line"> Value="True" /></span><br><span class="line"> </Trigger></span><br><span class="line"> </Style.Triggers></span><br><span class="line"></Style></span><br></pre></td></tr></table></figure></div>
<h2 id="5-10-ProgressBar"><a href="#5-10-ProgressBar" class="headerlink" title="5.10 ProgressBar"></a>5.10 ProgressBar</h2><p>MahApps.Metro ProgressBar就像重新设计的内置进度条，但是，当然，。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-36-44.png" alt="ProgressBar"><br>最上面的两个进度条是不同进度状态的ProgressBar。第三个进度条IsIndeterminate 设置为 True</p>
<h3 id="5-10-1-MetroProgressBar"><a href="#5-10-1-MetroProgressBar" class="headerlink" title="5.10.1 MetroProgressBar"></a>5.10.1 MetroProgressBar</h3><p>MetroProgressBar 是一种可采用、简单的样式。而不是去创建一个普通的ProgressBar用途︰<br><Controls:MetroProgressBar /><br>其运动状态看起来像 ProgressRing 但不是圆。</p>
<h3 id="5-10-2-ProgressRing"><a href="#5-10-2-ProgressRing" class="headerlink" title="5.10.2 ProgressRing"></a>5.10.2 ProgressRing</h3><p>ProgressRing控件被仿照类似在 Windows 8 来表示活动状态的控件，而不是表示已完成进度百分比。<br><code><Controls:ProgressRing IsActive="True" /></code><br>IsActive可以绑定到 viewmodel 属性。<br><code><Controls:ProgressRing IsActive="{Binding IsActive}" /></code><br>如果您想要更改颜色，请重写Foreground。<br><code><Controls:ProgressRing Foreground="{DynamicResource AccentColorBrush}"/></code><br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/ProgressRing.gif" alt="ProgressRing"></p>
<h2 id="5-11-RangeSlider"><a href="#5-11-RangeSlider" class="headerlink" title="5.11 RangeSlider"></a>5.11 RangeSlider</h2><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-37-39.png" alt="RangeSlider"><br>采取从Avalon Controls Library (MS PL)，RangeSlider 允许您选择一个范围值，而不是单个值。<br>此控件将被更新，以有更多的功能</p>
<h3 id="5-11-1-Events"><a href="#5-11-1-Events" class="headerlink" title="5.11.1 Events"></a>5.11.1 Events</h3><p>More events was added: DragStared/DragDelta/DragCompleted for Lower/Central/Upper thumbs Events for lower/upper value changed OldValues parameters in event args for rangeChanged event<br>添加有更多的事件︰ DragStared/DragDelta/DragCompleted 为低/中/高大拇指事件为最低/最高值更改为 rangeChanged 事件的事件参数中的 OldValues 参数</p>
<h3 id="5-11-2-Orientation"><a href="#5-11-2-Orientation" class="headerlink" title="5.11.2 Orientation"></a>5.11.2 Orientation</h3><p>现在range slider支持垂直方向</p>
<h3 id="5-11-3-MoveToPoint"><a href="#5-11-3-MoveToPoint" class="headerlink" title="5.11.3 MoveToPoint"></a>5.11.3 MoveToPoint</h3><p>IsMoveToPointEnabled 功能运行像在Slider</p>
<h3 id="5-11-4-SmallChange-LargeChange"><a href="#5-11-4-SmallChange-LargeChange" class="headerlink" title="5.11.4 SmallChange/LargeChange"></a>5.11.4 SmallChange/LargeChange</h3><p>当 IsMoveToPointEnabled = False 拇指将根据你在Small /LargeChange 中设置的值移动。<br>5.11.5 Interval<br>此属性将设置在Small /Larnge 变化之间变化值的数值大小。</p>
<h3 id="5-11-6-IsSnapToTickEnabled"><a href="#5-11-6-IsSnapToTickEnabled" class="headerlink" title="5.11.6 IsSnapToTickEnabled"></a>5.11.6 IsSnapToTickEnabled</h3><p>如果设置为 true，拇指将对齐到ticks就像标准的Slider。</p>
<h3 id="5-11-7-TickBars-and-Tickplacement"><a href="#5-11-7-TickBars-and-Tickplacement" class="headerlink" title="5.11.7 TickBars and Tickplacement"></a>5.11.7 TickBars and Tickplacement</h3><p>Range Slider支持根据更改的最小值和最大值以显示/隐藏刻度以及更改其刻度宽度</p>
<h3 id="5-11-8-ExtendedMode"><a href="#5-11-8-ExtendedMode" class="headerlink" title="5.11.8 ExtendedMode"></a>5.11.8 ExtendedMode</h3><p>如果它设置 ExtendedMode = False 你在范围内除了用鼠标移动大拇指近/远以外，不能做任何操作，但如果在范围内，它使你可以使用 MoveToPoint 或Small/Large change，在通过单击鼠标左键 + 左或右的控制按钮来移动左手的拇指和鼠标右键 + 左或右的控制按钮来移动右手拇指的范围内。如果Extended mode = true 你也可以通过单击鼠标左键按钮移动整个范围。</p>
<h3 id="5-11-9-MoveWholeRange"><a href="#5-11-9-MoveWholeRange" class="headerlink" title="5.11.9 MoveWholeRange"></a>5.11.9 MoveWholeRange</h3><p>此属性会让你使用 MoveToPoint 或Small/Large变化 （工作也在范围内） 时移动整个范围</p>
<h3 id="5-11-10-MinRangeWidth"><a href="#5-11-10-MinRangeWidth" class="headerlink" title="5.11.10 MinRangeWidth"></a>5.11.10 MinRangeWidth</h3><p>设置最小宽度的中央拇指。它可以在范围从 0 到 range_slider_width/2。</p>
<h3 id="5-11-11-AutoToolTipPlacement-and-AutotoolTipPrecision"><a href="#5-11-11-AutoToolTipPlacement-and-AutotoolTipPrecision" class="headerlink" title="5.11.11 AutoToolTipPlacement and AutotoolTipPrecision"></a>5.11.11 AutoToolTipPlacement and AutotoolTipPrecision</h3><p>AutoToolTipPlacement 将显示工具提示，其中将用随着拇指移动并显示当前值。执行左/中/右thumbs。<br>AutotoolTipPrecision 设置将在 autotooltip 点后显示的位数。</p>
<h3 id="5-11-12-Small-Example"><a href="#5-11-12-Small-Example" class="headerlink" title="5.11.12 Small Example"></a>5.11.12 Small Example</h3><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Сontrols:RangeSlider Style="{StaticResource RangeSliderCameraCommonStyle}" </span><br><span class="line"> Minimum="{Binding Path=MinValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"</span><br><span class="line"> Maximum="{Binding Path=MaxValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"</span><br><span class="line"> LowerValue="{Binding Path=CurrentMinValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"</span><br><span class="line"> UpperValue="{Binding Path=CurrentMaxValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"</span><br><span class="line"> LowerValueChanged="OnLowerValueChanged" UpperValueChanged="OnUpperValueChanged"</span><br><span class="line"> LowerThumbDragStarted="OnLowerDragStarted"</span><br><span class="line"> LowerThumbDragCompleted="OnLowerDragCompleted"</span><br><span class="line"> UpperThumbDragStarted="OnUpperDragStarted" </span><br><span class="line"> UpperThumbDragCompleted="OnUpperDragCompleted" </span><br><span class="line"> AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="2" MoveWholeRange="True"</span><br><span class="line"> IsSnapToTickEnabled="True" IsMoveToPointEnabled="True" ExtendedMode="True"></Сontrols:RangeSlider></span><br></pre></td></tr></table></figure></div>
<h2 id="5-12-Slider"><a href="#5-12-Slider" class="headerlink" title="5.12 Slider"></a>5.12 Slider</h2><p>此控件在 MahApps.Metro 中有几种样式︰</p>
<h3 id="5-12-1-Default-style"><a href="#5-12-1-Default-style" class="headerlink" title="5.12.1 Default style"></a>5.12.1 Default style</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-38-32.png" alt="style"><br>这是 Slider的基本样式。如果你不使用自定义样式，将自动应用默认样式。如果你想让你自定义的样式基于该样式，您需要添加BasedOn=”{StaticResource MetroSlider}”</p>
<h3 id="5-12-2-FlatSlider-style"><a href="#5-12-2-FlatSlider-style" class="headerlink" title="5.12.2 FlatSlider style"></a>5.12.2 FlatSlider style</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-38-37.png" alt="FlatSlider"><br>若要使用该样式需要加载资源字典<br> <code><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" /></code><br> 以及明确的设置Slider的样式为Style=”{DynamicResource FlatSlider}”<br>这种样式可以动态地更改为︰<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-38-43.png" alt="FlatSlider"><br>为此，你只需要更改 TickPlacement 属性从无为其他属性值。</p>
<h2 id="5-13-SplitButton-and-DropDownButton"><a href="#5-13-SplitButton-and-DropDownButton" class="headerlink" title="5.13 SplitButton and DropDownButton"></a>5.13 SplitButton and DropDownButton</h2><h3 id="5-13-1-SplitButton"><a href="#5-13-1-SplitButton" class="headerlink" title="5.13.1 SplitButton"></a>5.13.1 SplitButton</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-39-03.png" alt="SplitButton"><br>此控件是具有下拉列表的按钮，但选定的项更改时，按钮内容会随之改变。</p>
<h3 id="5-13-2-Events"><a href="#5-13-2-Events" class="headerlink" title="5.13.2 Events"></a>5.13.2 Events</h3><p>SplitButton具有 SelectionChanged 和Click事件</p>
<h3 id="5-13-3-SelectedItem-and-SelectedIndex"><a href="#5-13-3-SelectedItem-and-SelectedIndex" class="headerlink" title="5.13.3 SelectedItem and SelectedIndex"></a>5.13.3 SelectedItem and SelectedIndex</h3><p>此属性的用法就像是在Listbox或ComboBox。当此属性之一更改时，按钮的内容会也发生了变化。</p>
<h3 id="5-13-4-Binding-to-ObservableCollection-or-Dictionary"><a href="#5-13-4-Binding-to-ObservableCollection-or-Dictionary" class="headerlink" title="5.13.4 Binding to ObservableCollection or Dictionary"></a>5.13.4 Binding to ObservableCollection or Dictionary</h3><p>要正确绑定 ObservableCollection 或Dictionary到SplitButton，您需要使用ItemsSource和 DisplayMemberPath ，ItemsSource=”{Binding Albums}” DisplayMemberPath=”Title”，如果你只是绑定简单的类型，如枚举或整数，你不需要用到 DisplayMemberPath 属性，只有ItemsSource。</p>
<h3 id="5-13-5-Orientation"><a href="#5-13-5-Orientation" class="headerlink" title="5.13.5 Orientation"></a>5.13.5 Orientation</h3><p>你可以在屏幕截图中看到，SplitButton支持方向改变。</p>
<h3 id="5-13-6-Button-commands"><a href="#5-13-6-Button-commands" class="headerlink" title="5.13.6 Button commands"></a>5.13.6 Button commands</h3><p>您可以使用SplitButton的按钮命令</p>
<h3 id="5-13-7-Icon-property"><a href="#5-13-7-Icon-property" class="headerlink" title="5.13.7 Icon property"></a>5.13.7 Icon property</h3><p> 你可以将单独的图标添加到SplitButton来显示它独立地从它的内容。它可以是位图图像或矢量图标。Icon=”{DynamicResource appbar_alert}”</p>
<h3 id="5-13-8-Example"><a href="#5-13-8-Example" class="headerlink" title="5.13.8 Example"></a>5.13.8 Example</h3><p><Controls:SplitButton<br> Icon=”{DynamicResource appbar_alert}”<br> HorizontalContentAlignment=”Left”<br> HorizontalAlignment=”Center”<br> VerticalContentAlignment=”Center”<br> Width=”120”<br> SelectedIndex=”2”<br> ItemsSource=”{Binding Albums}”<br> DisplayMemberPath=”Title”<br> VerticalAlignment=”Center” /><br>结果会是这样:<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-39-24.png" alt="SplitButton"></p>
<h3 id="5-13-9-DropDownButton"><a href="#5-13-9-DropDownButton" class="headerlink" title="5.13.9 DropDownButton"></a>5.13.9 DropDownButton</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-39-29.png" alt="DropDownButton"><br>除了有少许的不同，此控件与SplitButton几乎一样︰ 它有没有 SelectedItem 和 SelectedIndex 属性，也没有SelectionChanged 事件。按钮的内容也不会改变，它是静态的。下拉列表(Dropdownlist)是一个上下文菜单，而不是拆SplitButton的列表框。在其他方面与 SplitButton是相同的。</p>
<h3 id="5-13-10-Example"><a href="#5-13-10-Example" class="headerlink" title="5.13.10 Example"></a>5.13.10 Example</h3><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:DropDownButton </span><br><span class="line"> VerticalContentAlignment="Center"</span><br><span class="line"> Width="120"</span><br><span class="line"> Content="Test"</span><br><span class="line"> DisplayMemberPath="Title"</span><br><span class="line"> Icon="{DynamicResource appbar_music}"</span><br><span class="line"> ItemsSource="{Binding Albums}"></span><br><span class="line"></Controls:DropDownButton></span><br></pre></td></tr></table></figure></div>
<h2 id="5-14-TabControl"><a href="#5-14-TabControl" class="headerlink" title="5.14 TabControl"></a>5.14 TabControl</h2><p>有三种选项卡样式-AnimatedTabControl、 SingleRowAnimatedTabControl 和默认的 TabControl。默认 TabControl样式包含在 Controls.xaml，但另外两个需要特定引用 （在对 Controls.xaml 的引用后，确保添加了这些特定引用）</p>
<h3 id="5-14-1-Default-look"><a href="#5-14-1-Default-look" class="headerlink" title="5.14.1 Default look"></a>5.14.1 Default look</h3><p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-39-46.png" alt="Default"><br>以上显示了三种状态-被选择的/激活的选项卡、 悬停和非活动状态。<br>5.14.2 AnimatedTabControl<br><code><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" /></code><br>运作起来就像有常规的TabControl，除了它对每个选项卡的MetroContentControl 中内容的切换进行动画处理。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/AnimatedTabControl.gif" alt="AnimatedTabControl"></p>
<h3 id="5-14-3-AnimatedSingleRowTabControl"><a href="#5-14-3-AnimatedSingleRowTabControl" class="headerlink" title="5.14.3 AnimatedSingleRowTabControl"></a>5.14.3 AnimatedSingleRowTabControl</h3><p><code><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" /></code><br>AnimatedSingleRowTabControl 的功能与AnimatedTabControl完全相同，除了选项卡只会显示在单独的一行，而不是环绕。而是使用一种（左/右）箭头替换环绕。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-42-03.png" alt="AnimatedSingleRowTabControl"></p>
<h2 id="5-15-TextBox-MahApps-Metro"><a href="#5-15-TextBox-MahApps-Metro" class="headerlink" title="5.15 TextBox - MahApps.Metro"></a>5.15 TextBox - MahApps.Metro</h2><p>在此库中TextBox只有一种样式了，但是它却有特殊的附加属性用于创建‘watermarked’文本框并添加‘clear’按钮。</p>
<h3 id="5-15-1-Watermark"><a href="#5-15-1-Watermark" class="headerlink" title="5.15.1 Watermark"></a>5.15.1 Watermark</h3><p>文本框内的水印 -指之前用户已获取到焦点或输入任何文字前，显示在文本框中的文本。这往往是一种替代在文本框旁边的标签 — — 举个例子，一个搜索框会有文本“输入搜索词”以指示它的用途的水印。<br><code><TextBox Controls:TextBoxHelper.Watermark="This is a textbox" /></code><br>会产生一个文本框，看起来像下面图像。这三个状态是没有获取焦点（没有用户输入的文本）、 获取焦点和没有获取焦点 （具有用户输入的文本）。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-42-18.png" alt="Watermark"></p>
<h3 id="5-15-2-Clear-button"><a href="#5-15-2-Clear-button" class="headerlink" title="5.15.2 Clear button"></a>5.15.2 Clear button</h3><p>像水印，一个简单的附加属性添加的功能。<br><code><TextBox Controls:TextBoxHelper.ClearTextButton="True" /></code><br>这将给您：<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-42-28.png" alt="Clear button"></p>
<h3 id="5-15-3-Why-Attached-Properties"><a href="#5-15-3-Why-Attached-Properties" class="headerlink" title="5.15.3 Why Attached Properties?"></a>5.15.3 Why Attached Properties?</h3><p>胜过于从 TextBox 派生和向此库添加另一个类，这种行为可以用附加属性实现的。这可以避免花费精力为另一个控件提供样式，在您的应用程序中，这种行为更可取。</p>
<h2 id="5-16-Tile"><a href="#5-16-Tile" class="headerlink" title="5.16 Tile"></a>5.16 Tile</h2><p>Tile正如其名。是从Window 8/WinRT 开始菜单模仿的矩形控件。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-43-23.png" alt="Tile"></p>
<h3 id="5-16-1-How-to-use-the-Tile"><a href="#5-16-1-How-to-use-the-Tile" class="headerlink" title="5.16.1 How to use the Tile"></a>5.16.1 How to use the Tile</h3><p>下面的 XAML 将初始化标题设置为”你好 ！”和其Count 被设置为 1的Tile控件。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><controls:Tile Title="Hello!" </span><br><span class="line"> TiltFactor="2"</span><br><span class="line"> Width="100" Height="100" </span><br><span class="line"> Count="1"></span><br><span class="line"></controls:Tile></span><br></pre></td></tr></table></figure></div>
<h3 id="5-16-2-In-the-wild"><a href="#5-16-2-In-the-wild" class="headerlink" title="5.16.2 In the wild"></a>5.16.2 In the wild</h3><p>下面是Tile在运行时的一些截图。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-43-31.png" alt="Tile"></p>
<h2 id="5-17-ToggleButton"><a href="#5-17-ToggleButton" class="headerlink" title="5.17 ToggleButton"></a>5.17 ToggleButton</h2><h3 id="5-17-1-Introduction"><a href="#5-17-1-Introduction" class="headerlink" title="5.17.1 Introduction"></a>5.17.1 Introduction</h3><p>MahApps.Metro中有可用两种样式的ToggleButtons。<br>默认样式只是通过在 XAML 中放置一个ToggleButton控件，看起来像默认的 MahApps.Metro 按钮。<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-43-40.png" alt="ToggleButton"></p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Grid></span><br><span class="line"> <ToggleButton/></span><br><span class="line"></Grid></span><br></pre></td></tr></table></figure></div>
<p>另一种样式MetroCircleToggleButtonStyle，通过将ToggleButton的样式设置为 MetroCircleToggleButtonStyle进行应用。这种样式是当它被选中时，将按钮的背景变为 AccentColorBrush，。若要修改此行为，必须使用Blend编辑控件模板的副本。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ToggleButton Width="50"</span><br><span class="line"> Height="50"</span><br><span class="line"> Margin="0, 10, 0, 0"</span><br><span class="line"> Style="{DynamicResource MetroCircleToggleButtonStyle}"></span><br><span class="line"></ToggleButton></span><br></pre></td></tr></table></figure></div>
<p> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-43-45.png" alt="ToggleButton"></p>
<h3 id="5-17-2-Using-Glyphs-Within-a-Circle-Toggle-Button"><a href="#5-17-2-Using-Glyphs-Within-a-Circle-Toggle-Button" class="headerlink" title="5.17.2 Using Glyphs Within a Circle Toggle Button"></a>5.17.2 Using Glyphs Within a Circle Toggle Button</h3><p>要使用的标志符号，必须添加对 Icons.xaml 的引用。</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><UserControl.Resources></span><br><span class="line"> <ResourceDictionary></span><br><span class="line"> <ResourceDictionary.MergedDictionaries></span><br><span class="line"> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" /></span><br><span class="line"> </ResourceDictionary.MergedDictionaries></span><br><span class="line"> </ResourceDictionary></span><br><span class="line"></UserControl.Resources></span><br></pre></td></tr></table></figure></div>
<p>然后，使用以下步骤，包装您想要的图标︰</p>
<ol>
<li>在ToggleButton中放置 Rectangle</li>
<li>设置它的Fill为你想让图标拥有的颜色</li>
<li>设置 Rectangle.OpacityMask的VisualBrush属性中的Visual值为引用的图标<br>举个例子：</li>
</ol>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ToggleButton Width="50"</span><br><span class="line"> Height="50"</span><br><span class="line"> Margin="0, 10, 0, 0"</span><br><span class="line"> Style="{DynamicResource MetroCircleToggleButtonStyle}"></span><br><span class="line"> <Rectangle Width="20"</span><br><span class="line"> Height="20"</span><br><span class="line"> Fill="{DynamicResource BlackBrush}"></span><br><span class="line"> <Rectangle.OpacityMask></span><br><span class="line"> <VisualBrush Stretch="Fill"</span><br><span class="line"> Visual="{DynamicResource appbar_city}"/></span><br><span class="line"> </Rectangle.OpacityMask></span><br><span class="line"> </Rectangle></span><br><span class="line"></ToggleButton></span><br></pre></td></tr></table></figure></div>
<h3 id="5-17-3-Syncing-Checked-State-of-ToggleButton-with-Foreground"><a href="#5-17-3-Syncing-Checked-State-of-ToggleButton-with-Foreground" class="headerlink" title="5.17.3 Syncing Checked State of ToggleButton with Foreground"></a>5.17.3 Syncing Checked State of ToggleButton with Foreground</h3><p>默认情况下，即使选中ToggleButton，您设置的任何图标将保留您为其设置的颜色。要改变了这一点，默认情况下，它被选中时，你可以绑定你的内容颜色到ToggleButton的更改为白色的前景色属性。<br>如何做的绑定的示例可在下面找到︰</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><ToggleButton Width="50"</span><br><span class="line"> Height="50"</span><br><span class="line"> Margin="0, 10, 0, 0"</span><br><span class="line"> Style="{DynamicResource MetroCircleToggleButtonStyle}"></span><br><span class="line"> <Rectangle Width="20"</span><br><span class="line"> Height="20"</span><br><span class="line"> Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}"></span><br><span class="line"> <Rectangle.OpacityMask></span><br><span class="line"> <VisualBrush Stretch="Fill"</span><br><span class="line"> Visual="{DynamicResource appbar_city}"/></span><br><span class="line"> </Rectangle.OpacityMask></span><br><span class="line"> </Rectangle></span><br><span class="line"></ToggleButton></span><br></pre></td></tr></table></figure></div>
<h2 id="5-18-ToggleSwitch"><a href="#5-18-ToggleSwitch" class="headerlink" title="5.18 ToggleSwitch"></a>5.18 ToggleSwitch</h2><p>ToggleSwitch 控件最初出现在 Windows Phone 7，但现已整合到 Windows 8系统。此控件的 MahApps.Metro 版本使用的 Windows Phone 7 编码 （移植），而非 Windows 8 的视觉效果。<br>它的功能和复选框是非常相似的，但在触摸界面上更易于区分和使用。基本上，它可以被认为是一个漂亮的CheckBox︰<br><code><Controls:ToggleSwitch Header="WiFi rest state" /></code><br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-46-39.png" alt="ToggleSwitch"><br>您可以绑定/设置IsChecked 的两种状态之间进行切换。您可以通过设置设置<br><code><Controls:ToggleSwitch onlabel="Yes" offlabel="No"></code><br>来更改开启和关闭标签。</p>
<h2 id="5-19-TransitioningContentControl"><a href="#5-19-TransitioningContentControl" class="headerlink" title="5.19 TransitioningContentControl"></a>5.19 TransitioningContentControl</h2><p>取自 Silverlight （具体在这个端口），TransitioningContentControl 可以非常流畅的左右切换内容。在它的核心，TransitioningContentControl 是 ContentControl，所以在同一时间只有一个子元素可以显示。当你更改的内容时，两个内容的切换将会有动画播放。<br><code><Controls:TransitioningContentControl x:Name="transitioning" Width="150" Height="50" Transition="DownTransition" /></code><br>这里有几个转换︰<br>• Default<br>• Down<br>• Up<br>• Right<br>• Left<br>• RightReplace<br>• LeftReplace<br>• Custom<br>5.20 Badged Control<br>在控件上呈现一个标记。<br>举个例子:</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:Badged Badge="{Binding Path=BadgeValue}"></span><br><span class="line"> <!-- Control to wrap goes here --></span><br><span class="line"> <Button Content="Notifications" /></span><br><span class="line"></Controls:Badged></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-46-53.png" alt="TransitioningContentControl"></p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line"><Controls:Badged Badge="{Binding Path=BadgeValue}" BadgePlacementMode="BottomRight"></span><br><span class="line"> <!-- Control to wrap goes here --></span><br><span class="line"> <Button></span><br><span class="line"> <iconPacks:PackIconFontAwesome Kind="CommentOutline"/></span><br><span class="line"> </Button></span><br><span class="line"></Controls:Badged></span><br></pre></td></tr></table></figure></div>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-47-00.png" alt="TransitioningContentControl"></p>
<p>结果:</p>
<p><img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/kStart/2022-05-09-12-47-05.png" alt="TransitioningContentControl"></p>
]]></content>
<categories>
<category>开发</category>
</categories>
<tags>
<tag>WPF</tag>
<tag>UI</tag>
<tag>.Net</tag>
</tags>
</entry>
<entry>
<title>正则表达式快速入门</title>
<url>/2024/08/12/Regex-QuickStart/</url>
<content><![CDATA[<h2 id="什么是正则表达式？"><a href="#什么是正则表达式？" class="headerlink" title="什么是正则表达式？"></a>什么是正则表达式？</h2><blockquote>
<p>正则表达式是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。</p>
</blockquote>
<p>一个正则表达式是一种从左到右匹配主体字符串的模式。<br>“Regular expression”这个词比较拗口，我们常使用缩写的术语“regex”或“regexp”。<br>正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。</p>
<p>想象你正在写一个应用，然后你想设定一个用户命名的规则，让用户名包含字符、数字、下划线和连字符，以及限制字符的个数，好让名字看起来没那么丑。<br>我们使用以下正则表达式来验证一个用户名：<br> <img lazyload src="/images/loading.svg" data-src="/2024/08/11/hello-world/tart/regexp-cn.png" alt="regexp-cn"><br>以上的正则表达式可以接受 <code>john_doe</code>、<code>jo-hn_doe</code>、<code>john12_as</code>。<br>但不匹配<code>Jo</code>，因为它包含了大写的字母而且太短了。</p>
<h2 id="1-基本匹配"><a href="#1-基本匹配" class="headerlink" title="1. 基本匹配"></a>1. 基本匹配</h2><p>正则表达式其实就是在执行搜索时的格式，它由一些字母和数字组合而成。<br>例如：一个正则表达式 <code>the</code>，它表示一个规则：由字母<code>t</code>开始，接着是<code>h</code>，再接着是<code>e</code>。</p>
<pre>
"the" => The fat cat sat on <a href="#learn-regex"><strong>the</strong></a> mat.
</pre>
<p><a class="link" href="https://regex101.com/r/dmRygT/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p>正则表达式<code>123</code>匹配字符串<code>123</code>。它逐个字符的与输入的正则表达式做比较。</p>
<p>正则表达式是大小写敏感的，所以<code>The</code>不会匹配<code>the</code>。</p>
<pre>
"The" => <a href="#learn-regex"><strong>The</strong></a> fat cat sat on the mat.
</pre>
<p><a class="link" href="https://regex101.com/r/1paXsy/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-元字符"><a href="#2-元字符" class="headerlink" title="2. 元字符"></a>2. 元字符</h2><p>正则表达式主要依赖于元字符。<br>元字符不代表他们本身的字面意思，他们都有特殊的含义。一些元字符写在方括号中的时候有一些特殊的意思。以下是一些元字符的介绍：</p>
<table>
<thead>
<tr>
<th align="center">元字符</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">.</td>
<td>句号匹配任意单个字符除了换行符。</td>
</tr>
<tr>
<td align="center">[ ]</td>
<td>字符种类。匹配方括号内的任意字符。</td>
</tr>
<tr>
<td align="center">[^ ]</td>
<td>否定的字符种类。匹配除了方括号里的任意字符</td>
</tr>
<tr>
<td align="center">*</td>
<td>匹配>=0个重复的在*号之前的字符。</td>
</tr>
<tr>
<td align="center">+</td>
<td>匹配>=1个重复的+号前的字符。</td>
</tr>
<tr>
<td align="center">?</td>
<td>标记?之前的字符为可选.</td>
</tr>
<tr>
<td align="center">{n,m}</td>
<td>匹配num个大括号之前的字符或字符集 (n <= num <= m).</td>
</tr>
<tr>
<td align="center">(xyz)</td>
<td>字符集，匹配与 xyz 完全相等的字符串.</td>
</tr>
<tr>
<td align="center">|</td>
<td>或运算符，匹配符号前或后的字符.</td>
</tr>
<tr>
<td align="center">\</td>
<td>转义字符,用于匹配一些保留的字符 <code>[ ] ( ) { } . * + ? ^ $ \ |</code></td>
</tr>
<tr>
<td align="center">^</td>
<td>从开始行开始匹配.</td>
</tr>
<tr>
<td align="center">$</td>
<td>从末端开始匹配.</td>
</tr>
</tbody></table>
<h2 id="2-1-点运算符"><a href="#2-1-点运算符" class="headerlink" title="2.1 点运算符 ."></a>2.1 点运算符 <code>.</code></h2><p><code>.</code>是元字符中最简单的例子。<br><code>.</code>匹配任意单个字符，但不匹配换行符。<br>例如，表达式<code>.ar</code>匹配一个任意字符后面跟着是<code>a</code>和<code>r</code>的字符串。</p>
<pre>
".ar" => The <a href="#learn-regex"><strong>car</strong></a> <a href="#learn-regex"><strong>par</strong></a>ked in the <a href="#learn-regex"><strong>gar</strong></a>age.
</pre>
<p><a class="link" href="https://regex101.com/r/xc9GkU/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-2-字符集"><a href="#2-2-字符集" class="headerlink" title="2.2 字符集"></a>2.2 字符集</h2><p>字符集也叫做字符类。<br>方括号用来指定一个字符集。<br>在方括号中使用连字符来指定字符集的范围。<br>在方括号中的字符集不关心顺序。<br>例如，表达式<code>[Tt]he</code> 匹配 <code>the</code> 和 <code>The</code>。</p>
<pre>
"[Tt]he" => <a href="#learn-regex"><strong>The</strong></a> car parked in <a href="#learn-regex"><strong>the</strong></a> garage.
</pre>
<p><a class="link" href="https://regex101.com/r/2ITLQ4/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p>方括号的句号就表示句号。<br>表达式 <code>ar[.]</code> 匹配 <code>ar.</code>字符串</p>
<pre>
"ar[.]" => A garage is a good place to park a c<a href="#learn-regex"><strong>ar.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/wL3xtE/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="2-2-1-否定字符集"><a href="#2-2-1-否定字符集" class="headerlink" title="2.2.1 否定字符集"></a>2.2.1 否定字符集</h3><p>一般来说 <code>^</code> 表示一个字符串的开头，但它用在一个方括号的开头的时候，它表示这个字符集是否定的。<br>例如，表达式<code>[^c]ar</code> 匹配一个后面跟着<code>ar</code>的除了<code>c</code>的任意字符。</p>
<pre>
"[^c]ar" => The car <a href="#learn-regex"><strong>par</strong></a>ked in the <a href="#learn-regex"><strong>gar</strong></a>age.
</pre>
<p><a class="link" href="https://regex101.com/r/nNNlq3/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-3-重复次数"><a href="#2-3-重复次数" class="headerlink" title="2.3 重复次数"></a>2.3 重复次数</h2><p>后面跟着元字符 <code>+</code>，<code>*</code> or <code>?</code> 的，用来指定匹配子模式的次数。<br>这些元字符在不同的情况下有着不同的意思。</p>
<h3 id="2-3-1-号"><a href="#2-3-1-号" class="headerlink" title="2.3.1 * 号"></a>2.3.1 <code>*</code> 号</h3><p><code>*</code>号匹配 在<code>*</code>之前的字符出现<code>大于等于0</code>次。<br>例如，表达式 <code>a*</code> 匹配0或更多个以a开头的字符。表达式<code>[a-z]*</code> 匹配一个行中所有以小写字母开头的字符串。</p>
<pre>
"[a-z]*" => T<a href="#learn-regex"><strong>he</strong></a> <a href="#learn-regex"><strong>car</strong></a> <a href="#learn-regex"><strong>parked</strong></a> <a href="#learn-regex"><strong>in</strong></a> <a href="#learn-regex"><strong>the</strong></a> <a href="#learn-regex"><strong>garage</strong></a> #21.
</pre>
<p><a class="link" href="https://regex101.com/r/7m8me5/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p><code>*</code>字符和<code>.</code>字符搭配可以匹配所有的字符<code>.*</code>。<br><code>*</code>和表示匹配空格的符号<code>\s</code>连起来用，如表达式<code>\s*cat\s*</code>匹配0或更多个空格开头和0或更多个空格结尾的cat字符串。</p>
<pre>
"\s*cat\s*" => The fat<a href="#learn-regex"><strong> cat </strong></a>sat on the con<a href="#learn-regex"><strong>cat</strong></a>enation.
</pre>
<p><a class="link" href="https://regex101.com/r/gGrwuz/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="2-3-2-号"><a href="#2-3-2-号" class="headerlink" title="2.3.2 + 号"></a>2.3.2 <code>+</code> 号</h3><p><code>+</code>号匹配<code>+</code>号之前的字符出现 >=1 次。<br>例如表达式<code>c.+t</code> 匹配以首字母<code>c</code>开头以<code>t</code>结尾，中间跟着至少一个字符的字符串。</p>
<pre>
"c.+t" => The fat <a href="#learn-regex"><strong>cat sat on the mat</strong></a>.
</pre>
<p><a class="link" href="https://regex101.com/r/Dzf9Aa/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="2-3-3-号"><a href="#2-3-3-号" class="headerlink" title="2.3.3 ? 号"></a>2.3.3 <code>?</code> 号</h3><p>在正则表达式中元字符 <code>?</code> 标记在符号前面的字符为可选，即出现 0 或 1 次。<br>例如，表达式 <code>[T]?he</code> 匹配字符串 <code>he</code> 和 <code>The</code>。</p>
<pre>
"[T]he" => <a href="#learn-regex"><strong>The</strong></a> car is parked in the garage.
</pre>
<p><a class="link" href="https://regex101.com/r/cIg9zm/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"[T]?he" => <a href="#learn-regex"><strong>The</strong></a> car is parked in t<a href="#learn-regex"><strong>he</strong></a> garage.
</pre>
<p><a class="link" href="https://regex101.com/r/kPpO2x/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-4-号"><a href="#2-4-号" class="headerlink" title="2.4 {} 号"></a>2.4 <code>{}</code> 号</h2><p>在正则表达式中 <code>{}</code> 是一个量词，常用来限定一个或一组字符可以重复出现的次数。<br>例如， 表达式 <code>[0-9]{2,3}</code> 匹配最少 2 位最多 3 位 0~9 的数字。</p>
<pre>
"[0-9]{2,3}" => The number was 9.<a href="#learn-regex"><strong>999</strong></a>7 but we rounded it off to <a href="#learn-regex"><strong>10</strong></a>.0.
</pre>
<p><a class="link" href="https://regex101.com/r/juM86s/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p>我们可以省略第二个参数。<br>例如，<code>[0-9]{2,}</code> 匹配至少两位 0~9 的数字。</p>
<pre>
"[0-9]{2,}" => The number was 9.<a href="#learn-regex"><strong>9997</strong></a> but we rounded it off to <a href="#learn-regex"><strong>10</strong></a>.0.
</pre>
<p><a class="link" href="https://regex101.com/r/Gdy4w5/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p>如果逗号也省略掉则表示重复固定的次数。<br>例如，<code>[0-9]{3}</code> 匹配3位数字</p>
<pre>
"[0-9]{3}" => The number was 9.<a href="#learn-regex"><strong>999</strong></a>7 but we rounded it off to 10.0.
</pre>
<p><a class="link" href="https://regex101.com/r/Sivu30/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-5-特征标群"><a href="#2-5-特征标群" class="headerlink" title="2.5 (...) 特征标群"></a>2.5 <code>(...)</code> 特征标群</h2><p>特征标群是一组写在 <code>(...)</code> 中的子模式。<code>(...)</code> 中包含的内容将会被看成一个整体，和数学中小括号（ ）的作用相同。例如, 表达式 <code>(ab)*</code> 匹配连续出现 0 或更多个 <code>ab</code>。如果没有使用 <code>(...)</code> ，那么表达式 <code>ab*</code> 将匹配连续出现 0 或更多个 <code>b</code> 。再比如之前说的 <code>{}</code> 是用来表示前面一个字符出现指定次数。但如果在 <code>{}</code> 前加上特征标群 <code>(...)</code> 则表示整个标群内的字符重复 N 次。</p>
<p>我们还可以在 <code>()</code> 中用或字符 <code>|</code> 表示或。例如，<code>(c|g|p)ar</code> 匹配 <code>car</code> 或 <code>gar</code> 或 <code>par</code>.</p>
<pre>
"(c|g|p)ar" => The <a href="#learn-regex"><strong>car</strong></a> is <a href="#learn-regex"><strong>par</strong></a>ked in the <a href="#learn-regex"><strong>gar</strong></a>age.
</pre>
<p><a class="link" href="https://regex101.com/r/tUxrBG/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-6-或运算符"><a href="#2-6-或运算符" class="headerlink" title="2.6 | 或运算符"></a>2.6 <code>|</code> 或运算符</h2><p>或运算符就表示或，用作判断条件。</p>
<p>例如 <code>(T|t)he|car</code> 匹配 <code>(T|t)he</code> 或 <code>car</code>。</p>
<pre>
"(T|t)he|car" => <a href="#learn-regex"><strong>The</strong></a> <a href="#learn-regex"><strong>car</strong></a> is parked in <a href="#learn-regex"><strong>the</strong></a> garage.
</pre>
<p><a class="link" href="https://regex101.com/r/fBXyX0/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-7-转码特殊字符"><a href="#2-7-转码特殊字符" class="headerlink" title="2.7 转码特殊字符"></a>2.7 转码特殊字符</h2><p>反斜线 <code>\</code> 在表达式中用于转码紧跟其后的字符。用于指定 <code>{ } [ ] / \ + * . $ ^ | ?</code> 这些特殊字符。如果想要匹配这些特殊字符则要在其前面加上反斜线 <code>\</code>。</p>
<p>例如 <code>.</code> 是用来匹配除换行符外的所有字符的。如果想要匹配句子中的 <code>.</code> 则要写成 <code>\.</code> 以下这个例子 <code>\.?</code>是选择性匹配<code>.</code></p>
<pre>
"(f|c|m)at\.?" => The <a href="#learn-regex"><strong>fat</strong></a> <a href="#learn-regex"><strong>cat</strong></a> sat on the <a href="#learn-regex"><strong>mat.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/DOc5Nu/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="2-8-锚点"><a href="#2-8-锚点" class="headerlink" title="2.8 锚点"></a>2.8 锚点</h2><p>在正则表达式中，想要匹配指定开头或结尾的字符串就要使用到锚点。<code>^</code> 指定开头，<code>$</code> 指定结尾。</p>
<h3 id="2-8-1-号"><a href="#2-8-1-号" class="headerlink" title="2.8.1 ^ 号"></a>2.8.1 <code>^</code> 号</h3><p><code>^</code> 用来检查匹配的字符串是否在所匹配字符串的开头。</p>
<p>例如，在 <code>abc</code> 中使用表达式 <code>^a</code> 会得到结果 <code>a</code>。但如果使用 <code>^b</code> 将匹配不到任何结果。因为在字符串 <code>abc</code> 中并不是以 <code>b</code> 开头。</p>
<p>例如，<code>^(T|t)he</code> 匹配以 <code>The</code> 或 <code>the</code> 开头的字符串。</p>
<pre>
"(T|t)he" => <a href="#learn-regex"><strong>The</strong></a> car is parked in <a href="#learn-regex"><strong>the</strong></a> garage.
</pre>
<p><a class="link" href="https://regex101.com/r/5ljjgB/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"^(T|t)he" => <a href="#learn-regex"><strong>The</strong></a> car is parked in the garage.
</pre>
<p><a class="link" href="https://regex101.com/r/jXrKne/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="2-8-2-号"><a href="#2-8-2-号" class="headerlink" title="2.8.2 $ 号"></a>2.8.2 <code>$</code> 号</h3><p>同理于 <code>^</code> 号，<code>$</code> 号用来匹配字符是否是最后一个。</p>
<p>例如，<code>(at\.)$</code> 匹配以 <code>at.</code> 结尾的字符串。</p>
<pre>
"(at\.)" => The fat c<a href="#learn-regex"><strong>at.</strong></a> s<a href="#learn-regex"><strong>at.</strong></a> on the m<a href="#learn-regex"><strong>at.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/y4Au4D/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"(at\.)$" => The fat cat. sat. on the m<a href="#learn-regex"><strong>at.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/t0AkOd/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="3-简写字符集"><a href="#3-简写字符集" class="headerlink" title="3. 简写字符集"></a>3. 简写字符集</h2><p>正则表达式提供一些常用的字符集简写。如下:</p>
<table>
<thead>
<tr>
<th align="center">简写</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">.</td>
<td>除换行符外的所有字符</td>
</tr>
<tr>
<td align="center">\w</td>
<td>匹配所有字母数字，等同于 <code>[a-zA-Z0-9_]</code></td>
</tr>
<tr>
<td align="center">\W</td>
<td>匹配所有非字母数字，即符号，等同于： <code>[^\w]</code></td>
</tr>
<tr>
<td align="center">\d</td>
<td>匹配数字： <code>[0-9]</code></td>
</tr>
<tr>
<td align="center">\D</td>
<td>匹配非数字： <code>[^\d]</code></td>
</tr>
<tr>
<td align="center">\s</td>
<td>匹配所有空格字符，等同于： <code>[\t\n\f\r\p{Z}]</code></td>
</tr>
<tr>
<td align="center">\S</td>
<td>匹配所有非空格字符： <code>[^\s]</code></td>
</tr>
<tr>
<td align="center">\f</td>
<td>匹配一个换页符</td>
</tr>
<tr>
<td align="center">\n</td>
<td>匹配一个换行符</td>
</tr>
<tr>
<td align="center">\r</td>
<td>匹配一个回车符</td>
</tr>
<tr>
<td align="center">\t</td>
<td>匹配一个制表符</td>
</tr>
<tr>
<td align="center">\v</td>
<td>匹配一个垂直制表符</td>
</tr>
<tr>
<td align="center">\p</td>
<td>匹配 CR/LF（等同于 <code>\r\n</code>），用来匹配 DOS 行终止符</td>
</tr>
</tbody></table>
<h2 id="4-零宽度断言（前后预查）"><a href="#4-零宽度断言（前后预查）" class="headerlink" title="4. 零宽度断言（前后预查）"></a>4. 零宽度断言（前后预查）</h2><p>先行断言和后发断言都属于<strong>非捕获簇</strong>（不捕获文本 ，也不针对组合计进行计数）。<br>先行断言用于判断所匹配的格式是否在另一个确定的格式之前，匹配结果不包含该确定格式（仅作为约束）。</p>
<p>例如，我们想要获得所有跟在 <code>$</code> 符号后的数字，我们可以使用正后发断言 <code>(?<=\$)[0-9\.]*</code>。<br>这个表达式匹配 <code>$</code> 开头，之后跟着 <code>0,1,2,3,4,5,6,7,8,9,.</code> 这些字符可以出现大于等于 0 次。</p>
<p>零宽度断言如下：</p>
<table>
<thead>
<tr>
<th align="center">符号</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">?=</td>
<td>正先行断言-存在</td>
</tr>
<tr>
<td align="center">?!</td>
<td>负先行断言-排除</td>
</tr>
<tr>
<td align="center">?<=</td>
<td>正后发断言-存在</td>
</tr>
<tr>
<td align="center">?<!</td>
<td>负后发断言-排除</td>
</tr>
</tbody></table>
<h3 id="4-1-正先行断言"><a href="#4-1-正先行断言" class="headerlink" title="4.1 ?=... 正先行断言"></a>4.1 <code>?=...</code> 正先行断言</h3><p><code>?=...</code> 正先行断言，表示第一部分表达式之后必须跟着 <code>?=...</code>定义的表达式。</p>
<p>返回结果只包含满足匹配条件的第一部分表达式。<br>定义一个正先行断言要使用 <code>()</code>。在括号内部使用一个问号和等号： <code>(?=...)</code>。</p>
<p>正先行断言的内容写在括号中的等号后面。<br>例如，表达式 <code>(T|t)he(?=\sfat)</code> 匹配 <code>The</code> 和 <code>the</code>，在括号中我们又定义了正先行断言 <code>(?=\sfat)</code> ，即 <code>The</code> 和 <code>the</code> 后面紧跟着 <code>(空格)fat</code>。</p>
<pre>
"(T|t)he(?=\sfat)" => <a href="#learn-regex"><strong>The</strong></a> fat cat sat on the mat.
</pre>
<p><a class="link" href="https://regex101.com/r/IDDARt/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="4-2-负先行断言"><a href="#4-2-负先行断言" class="headerlink" title="4.2 ?!... 负先行断言"></a>4.2 <code>?!...</code> 负先行断言</h3><p>负先行断言 <code>?!</code> 用于筛选所有匹配结果，筛选条件为 其后不跟随着断言中定义的格式。<br><code>正先行断言</code> 定义和 <code>负先行断言</code> 一样，区别就是 <code>=</code> 替换成 <code>!</code> 也就是 <code>(?!...)</code>。</p>
<p>表达式 <code>(T|t)he(?!\sfat)</code> 匹配 <code>The</code> 和 <code>the</code>，且其后不跟着 <code>(空格)fat</code>。</p>
<pre>
"(T|t)he(?!\sfat)" => The fat cat sat on <a href="#learn-regex"><strong>the</strong></a> mat.
</pre>
<p><a class="link" href="https://regex101.com/r/V32Npg/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="4-3"><a href="#4-3" class="headerlink" title="4.3 ?<= ... 正后发断言"></a>4.3 <code>?<= ...</code> 正后发断言</h3><p>正后发断言 记作<code>(?<=...)</code> 用于筛选所有匹配结果，筛选条件为 其前跟随着断言中定义的格式。<br>例如，表达式 <code>(?<=(T|t)he\s)(fat|mat)</code> 匹配 <code>fat</code> 和 <code>mat</code>，且其前跟着 <code>The</code> 或 <code>the</code>。</p>
<pre>
"(?<=(T|t)he\s)(fat|mat)" => The <a href="#learn-regex"><strong>fat</strong></a> cat sat on the <a href="#learn-regex"><strong>mat</strong></a>.
</=(T|t)he\s)(fat|mat)"></pre>
<p><a class="link" href="https://regex101.com/r/avH165/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="4-4"><a href="#4-4" class="headerlink" title="4.4 ?<!... 负后发断言"></a>4.4 <code>?<!...</code> 负后发断言</h3><p>负后发断言 记作 <code>(?<!...)</code> 用于筛选所有匹配结果，筛选条件为 其前不跟随着断言中定义的格式。<br>例如，表达式 <code>(?<!(T|t)he\s)(cat)</code> 匹配 <code>cat</code>，且其前不跟着 <code>The</code> 或 <code>the</code>。</p>
<pre>
"(?<!(T|t)he\s)(cat)" => The cat sat on <a href="#learn-regex"><strong>cat</strong></a>.
</pre>
<p><a class="link" href="https://regex101.com/r/8Efx5G/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h2 id="5-标志"><a href="#5-标志" class="headerlink" title="5. 标志"></a>5. 标志</h2><p>标志也叫模式修正符，因为它可以用来修改表达式的搜索结果。<br>这些标志可以任意的组合使用，它也是整个正则表达式的一部分。</p>
<table>
<thead>
<tr>
<th align="center">标志</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">i</td>
<td>忽略大小写。</td>
</tr>
<tr>
<td align="center">g</td>
<td>全局搜索。</td>
</tr>
<tr>
<td align="center">m</td>
<td>多行修饰符：锚点元字符 <code>^</code> <code>$</code> 工作范围在每行的起始。</td>
</tr>
</tbody></table>
<h3 id="5-1-忽略大小写（Case-Insensitive）"><a href="#5-1-忽略大小写（Case-Insensitive）" class="headerlink" title="5.1 忽略大小写（Case Insensitive）"></a>5.1 忽略大小写（Case Insensitive）</h3><p>修饰语 <code>i</code> 用于忽略大小写。<br>例如，表达式 <code>/The/gi</code> 表示在全局搜索 <code>The</code>，在后面的 <code>i</code> 将其条件修改为忽略大小写，则变成搜索 <code>the</code> 和 <code>The</code>，<code>g</code> 表示全局搜索。</p>
<pre>
"The" => <a href="#learn-regex"><strong>The</strong></a> fat cat sat on the mat.
</pre>
<p><a class="link" href="https://regex101.com/r/dpQyf9/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"/The/gi" => <a href="#learn-regex"><strong>The</strong></a> fat cat sat on <a href="#learn-regex"><strong>the</strong></a> mat.
</pre>
<p><a class="link" href="https://regex101.com/r/ahfiuh/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="5-2-全局搜索（Global-search）"><a href="#5-2-全局搜索（Global-search）" class="headerlink" title="5.2 全局搜索（Global search）"></a>5.2 全局搜索（Global search）</h3><p>修饰符 <code>g</code> 常用于执行一个全局搜索匹配，即（不仅仅返回第一个匹配的，而是返回全部）。<br>例如，表达式 <code>/.(at)/g</code> 表示搜索 任意字符（除了换行）+ <code>at</code>，并返回全部结果。</p>
<pre>
"/.(at)/" => The <a href="#learn-regex"><strong>fat</strong></a> cat sat on the mat.
</pre>
<p><a class="link" href="https://regex101.com/r/jnk6gM/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"/.(at)/g" => The <a href="#learn-regex"><strong>fat</strong></a> <a href="#learn-regex"><strong>cat</strong></a> <a href="#learn-regex"><strong>sat</strong></a> on the <a href="#learn-regex"><strong>mat</strong></a>.
</pre>
<p><a class="link" href="https://regex101.com/r/dO1nef/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="5-3-多行修饰符（Multiline）"><a href="#5-3-多行修饰符（Multiline）" class="headerlink" title="5.3 多行修饰符（Multiline）"></a>5.3 多行修饰符（Multiline）</h3><p>多行修饰符 <code>m</code> 常用于执行一个多行匹配。</p>
<p>像之前介绍的 <code>(^,$)</code> 用于检查格式是否是在待检测字符串的开头或结尾。但我们如果想要它在每行的开头和结尾生效，我们需要用到多行修饰符 <code>m</code>。</p>
<p>例如，表达式 <code>/at(.)?$/gm</code> 表示小写字符 <code>a</code> 后跟小写字符 <code>t</code> ，末尾可选除换行符外任意字符。根据 <code>m</code> 修饰符，现在表达式匹配每行的结尾。</p>
<pre>
"/.at(.)?$/" => The fat
cat sat
on the <a href="#learn-regex"><strong>mat.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/hoGMkP/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"/.at(.)?$/gm" => The <a href="#learn-regex"><strong>fat</strong></a>
cat <a href="#learn-regex"><strong>sat</strong></a>
on the <a href="#learn-regex"><strong>mat.</strong></a>
</pre>
<p><a class="link" href="https://regex101.com/r/E88WE2/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="6-贪婪匹配与惰性匹配（Greedy-vs-lazy-matching）"><a href="#6-贪婪匹配与惰性匹配（Greedy-vs-lazy-matching）" class="headerlink" title="6. 贪婪匹配与惰性匹配（Greedy vs lazy matching）"></a>6. 贪婪匹配与惰性匹配（Greedy vs lazy matching）</h3><p>正则表达式默认采用贪婪匹配模式，在该模式下意味着会匹配尽可能长的子串。我们可以使用 <code>?</code> 将贪婪匹配模式转化为惰性匹配模式。</p>
<pre>
"/(.*at)/" => <a href="#learn-regex"><strong>The fat cat sat on the mat</strong></a>. </pre>
<p><a class="link" href="https://regex101.com/r/AyAdgJ/1">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<pre>
"/(.*?at)/" => <a href="#learn-regex"><strong>The fat</strong></a> cat sat on the mat. </pre>
<p><a class="link" href="https://regex101.com/r/AyAdgJ/2">在线练习 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
]]></content>
<categories>
<category>开发</category>
</categories>
<tags>
<tag>.Net</tag>
</tags>
</entry>
</search>