-
Notifications
You must be signed in to change notification settings - Fork 2
/
search.xml
778 lines (778 loc) · 286 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
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[欢迎使用HandyControl]]></title>
<url>%2Fhandycontrol%2Findex.html</url>
<content type="text"><![CDATA[HandyControl是一套WPF控件库,它几乎重写了所有原生样式,同时包含80余款自定义控件(正逐步增加)。 要求 下载NugetNuget上是编译好的发布版本,地址为:HandyControl-Nuget Nuget上一般至少一个月发布一次,所以有很大的可能和本文档有出入,有出入的地方一切以本文档为准。 GithubGithub上是最新的源代码,地址为:HandyControl-Github Github上一般每天都有更新,相对而言不适合用于生产。 文档的更新速度必然跟不上最新的Github源码,有出入的地方一切以Github上Demo示例为准。 项目结构介绍整体结构从Github上克隆好源码后,进入src文件夹,该文件夹结构如下: 这里一共有4个解决方案sln文件。 Net_GE45的意思是.Net版本大于等于4.5 Shared文件夹用于存放共享项目的代码 图中五个文件夹内部各包含两个子文件夹,例如在Shared中还包含两个子文件夹: 它们分别存放控件源码和控件示例源码。 源码结构我们以HandyControl.sln为示例进行说明,使用VS2019打开该解决方案: 如果要启动示例,查看控件效果,请将HandyControlDemo_[指定的项目类型]作为启动项。 如图,已将HandyControlDemo_Net_GE45作为启动项。 大部分公共的源码都在Shared文件夹中,部分需要为特定项目类型定制的代码则被提出来放到各自的文件夹中。 HandyControl源码(主要在HandyControl_Shared中)主要包含7个文件夹,对它们的描述如下表所示: 名称 用途 Controls 包含所有控件的后台交互逻辑 Data 控件库所需的基本数据定义 Expression 抽取自Microsoft.Expression.Drawing Interactivity 抽取自Microsoft.Expression.Interactions & System.Windows.Interactivity,并做了部分修改 Properties 包含控件库属性和语言包 Themes 包含控件库所有的xaml定义 Tools 主要包含控件库所需的帮助方法和扩展方法 Controls中的每个控件一般都能在Themes中找到对应的xaml定义。 编译源码 编译前请确认你的开发环境是否符合要求。 打开HandyControl.sln,在解决方案配置下拉框中选择指定的环境进行编译:]]></content>
</entry>
<entry>
<title><![CDATA[附加属性]]></title>
<url>%2Fhandycontrol%2Fattach%2Findex.html</url>
<content type="text"><![CDATA[附加属性源码在Controls / Attach文件夹中: 以Element结尾的类,可以为所有的控件设置一些共有的属性,以Attach结尾的类,只能为一种控件设置相关的属性。]]></content>
</entry>
<entry>
<title><![CDATA[基础xaml定义]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Findex.html</url>
<content type="text"><![CDATA[基础xaml定义都在Basic文件夹中,其内部结构如下: 对它们的描述如下表所示: 名称 用途 Colors 包含内置的3个颜色定义文件 Basic.xaml 包装好的基础xaml定义 Behaviors.xaml 包含所有的行为定义 Brushes.xaml 包含所有的画刷定义 Converters.xaml 包含所有的转换器定义 Effects.xaml 包含所有的效果定义 Fonts.xaml 包含所有的字体大小定义 Geometries.xaml 包含所有的几何形状定义,多用于Path Paths.xaml 包含所有的Path路径定义 Sizes.xaml 包含所有的尺寸定义]]></content>
</entry>
<entry>
<title><![CDATA[建设中]]></title>
<url>%2Fhandycontrol%2Fdata%2Findex.html</url>
<content type="text"><![CDATA[建设中]]></content>
</entry>
<entry>
<title><![CDATA[扩展控件]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Findex.html</url>
<content type="text"><![CDATA[HandyControl目前包含80余款扩展控件,正逐步增加。 各控件案例中所使用的资源均可在HC Demo中找到,请养成在vs中使用 Ctrl+F 组合键的习惯.]]></content>
</entry>
<entry>
<title><![CDATA[原生控件]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Findex.html</url>
<content type="text"><![CDATA[原生控件是指WPF框架自带的控件,除此之外,通过附加属性实现简单的功能扩展。 HandyControl中,几乎所有的原生控件都有默认实现的基样式(即定义样式的时候,没有显示给定Key值)。 基样式一般带有“Base”字样,不推荐用户直接在视图层中使用,合适的使用场景是资源文件。 FAQ 我该怎么覆盖样式的默认实现呢?没有Key可以给我BasedOn啊? 可以使用这种语法:BasedOn="{StaticResource {x:Type Button}}"来覆盖Button的默认样式。]]></content>
</entry>
<entry>
<title><![CDATA[建设中]]></title>
<url>%2Fhandycontrol%2Ftools%2Findex.html</url>
<content type="text"><![CDATA[建设中]]></content>
</entry>
<entry>
<title><![CDATA[国际化]]></title>
<url>%2Fhandycontrol%2Flangs%2Findex.html</url>
<content type="text"><![CDATA[使用方式可通过ConfigHelper.Instance.SetLang(string lang)指定需要使用的语言包,默认使用简体中文(zh-cn)。 控件库自带的语言包一般为控件库内部使用,但用户也可以通过以下两种方式使用: xaml第一步,引入命名空间:xmlns:hc="https://handyorg.github.io/handycontrol"第二步,使用语言包:<TextBlock Text="{x:Static hc:Lang.Cancel}"/> C#HandyControl.Properties.Langs.Lang.Cancel 控件库不支持动态语言包切换,未来也不会有支持。 扩展控件库自带的语言包包括: 简体中文(zh-cn) 英文(en) 波斯语(fa) 法语(fr) 韩文 (ko-kr) 默认为简体中文(zh-cn)。 如果需要可自行扩展,这里推荐使用开源插件:ResXManager,来维护所有的语言包。 引用控件库后,会在运行目录生成语言包文件夹,其命名方式形如zh-cn、en等。]]></content>
</entry>
<entry>
<title><![CDATA[快速开始]]></title>
<url>%2Fhandycontrol%2Fquick_start%2Findex.html</url>
<content type="text"><![CDATA[第一步下载源码或者以Nuget的方式引用控件库。源码链接:HandyControl-GithubNuget链接:HandyControl-Nuget 第二步在App.xaml中添加以下代码: 12345678<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/> <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary></Application.Resources> 第三步添加命名空间:xmlns:hc="https://handyorg.github.io/handycontrol"]]></content>
</entry>
<entry>
<title><![CDATA[鸣谢]]></title>
<url>%2Fhandycontrol%2Ftnx%2Findex.html</url>
<content type="text"><![CDATA[感谢以下Coder提供代码贡献 感谢以下组织机构提供开源许可 感谢以下捐赠者]]></content>
</entry>
<entry>
<title><![CDATA[DataGridAttach DataGrid专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FdataGridAttach%2Findex.html</url>
<content type="text"><![CDATA[该附加属性为hc内部DataGrid样式专用,不推荐直接使用。 属性 名称 用途 ApplyDefaultStyle 是否应用默认样式 TextColumnStyle 文本列样式 EditingTextColumnStyle 编辑时文本列样式 ComboBoxColumnStyle 组合框列样式 EditingComboBoxColumnStyle 编辑时组合框列样式 CheckBoxColumnStyle 复选框列样式 EditingCheckBoxColumnStyle 编辑时复选框列样式 ShowRowNumber 是否显示行号]]></content>
</entry>
<entry>
<title><![CDATA[DropDownElement 可下拉内容的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FdropDownElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 ConsistentWidth 下拉内容是否和下拉框宽度一致]]></content>
</entry>
<entry>
<title><![CDATA[IconSwitchElement 可切换图标的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FiconSwitchElement%2Findex.html</url>
<content type="text"><![CDATA[继承自 IconElement 属性 名称 用途 GeometrySelected 选中时的几何形状]]></content>
</entry>
<entry>
<title><![CDATA[EdgeElement 具有边界内容的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FedgeElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 LeftContent 左侧边界内容 TopContent 顶部边界内容 RightContent 右侧边界内容 BottomContent 底部边界内容 ShowEdgeContent 是否显示边界内容]]></content>
</entry>
<entry>
<title><![CDATA[InfoElement 信息元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FinfoElement%2Findex.html</url>
<content type="text"><![CDATA[继承自 TitleElement 属性 名称 用途 Placeholder 占位符(输入提示) Necessary 是否必填 Symbol 标记信息 ContentHeight 内容高度 MinContentHeight 最小内容高度 MaxContentHeight 最大内容高度 RegexPattern 正则表达式 使用案例Placeholder 占位符1234<StackPanel Width="200" VerticalAlignment="Center"> <hc:SearchBar/> <hc:SearchBar hc:InfoElement.Placeholder="请输入查询条件" Style="{StaticResource SearchBarExtend}" Margin="0,16,0,0"/></StackPanel> Necessary 是否必填1234<hc:SearchBar hc:InfoElement.Placeholder="请输入查询条件" hc:InfoElement.Title="查询条件" Margin="10,10" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarExtend}"/> 其中hc:InfoElement.Title="查询条件"继承自父类 Symbol 标记信息1234<hc:SearchBar hc:InfoElement.Placeholder="请输入内容" hc:InfoElement.Title="此项必填" Style="{StaticResource SearchBarExtend}" Margin="10,10" hc:InfoElement.Necessary="True" hc:InfoElement.Symbol="x"/> ContentHeight 内容高度12345<hc:SearchBar hc:InfoElement.Placeholder="请输入查询条件" hc:InfoElement.ContentHeight="50" hc:InfoElement.Title="查询条件" Margin="10,10" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarExtend}"/> RegexPattern 正则表达式通过设置该属性,可自定义信息元素内部的验证逻辑实现对指定格式外的内容进行错误提示。]]></content>
</entry>
<entry>
<title><![CDATA[ImageAttach Image专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FimageAttach%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 SourceFailed 图片加载失败后显示的图片]]></content>
</entry>
<entry>
<title><![CDATA[BackgroundSwitchElement 可切换背景的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FbackgroundSwitchElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 MouseHoverBackground 设置鼠标悬浮背景色 MouseDownBackground 设置鼠标按下背景色 使用案例MouseHoverBackground 设置鼠标悬浮背景色在样式或模板中我们添加如下的触发器代码: 123<Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="Chrome" Value="{Binding Path=(hc:BackgroundSwitchElement.MouseHoverBackground),RelativeSource={RelativeSource TemplatedParent}}"/></Trigger> 前台使用方式: 1<目标控件 hc:BackgroundSwitchElement.MouseHoverBackground ="Blue"/> MouseDownBackground 设置鼠标按下背景色在样式或模板中我们添加如下的触发器代码: 123<Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="Chrome" Value="{Binding Path=(hc:BackgroundSwitchElement.MouseDownBackground),RelativeSource={RelativeSource TemplatedParent}}"/></Trigger> 前台使用方式: 1<目标控件 hc:BackgroundSwitchElement.MouseDownBackground ="Yellow"/>]]></content>
</entry>
<entry>
<title><![CDATA[PasswordBoxAttach 密码框专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FpasswordBoxAttach%2Findex.html</url>
<content type="text"><![CDATA[该附加属性为hc内部密码框样式专用,不推荐直接使用。 属性 名称 用途 IsMonitoring 是否监测密码长度 PasswordLength 密码长度]]></content>
</entry>
<entry>
<title><![CDATA[IconElement 具有图标的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FiconElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 Geometry 几何形状 Width 图标宽度 Height 图标高度 使用案例Geometry 几何形状1234<StackPanel Width="200" VerticalAlignment="Center"> <Button Content="Button" HorizontalAlignment="Stretch"/> <Button Content="Button" hc:IconElement.Geometry="{StaticResource CalendarGeometry}" HorizontalAlignment="Stretch" Margin="0,10,0,0"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[BorderElement 具有边框的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FborderElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 CornerRadius 设置边框圆角值 Circular 是否呈现为圆形 True为是、False为否 使用案例CornerRadius 设置边框圆角值1234<StackPanel Width="200" VerticalAlignment="Center"> <Button Content="Button" hc:BorderElement.CornerRadius="15" HorizontalAlignment="Stretch"/> <TextBox Text="TextBox" hc:BorderElement.CornerRadius="15" Margin="0,10,0,0"/></StackPanel> Circular 是否呈现为圆形借助BorderElement.Circular附加属性实现圆形Border1<Border Style="{StaticResource BorderCircular}" Background="OrangeRed" Width="100" Height="100"/>]]></content>
</entry>
<entry>
<title><![CDATA[PanelElement 面板元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FpanelElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 FluidMoveBehavior 设置面板的流体移动方式 使用案例FluidMoveBehavior 设置面板的流体移动方式1<hc:HoneycombPanel hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"/> 当向面板容器中添加或移除元素时,就可以看到流体移动的动画效果。]]></content>
</entry>
<entry>
<title><![CDATA[TitleElement 标题元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FtitleElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 Title 标题信息 Background 标题背景色 Foreground 标题字体色 BorderBrush 标题边框色 TitlePlacement 标题对齐方式 TitleWidth 标题宽度 使用案例Title 标题信息12<hc:TextBox hc:TitleElement.Title="标题信息" Margin="10,10"></hc:TextBox> TitlePlacement 标题对齐方式12345678<!--标题居于顶侧--><hc:TextBox hc:TitleElement.Title="标题信息" hc:TitleElement.TitlePlacement="Top" Margin="10,10"></hc:TextBox><!--标题居于左侧--><hc:TextBox hc:TitleElement.Title="标题信息" hc:TitleElement.TitlePlacement="Left" Margin="10,10"></hc:TextBox> TitleWidth 标题宽度12345678910<!--设定TitleWidth为Auto--><hc:TextBox hc:TitleElement.Title="标题信息" hc:TitleElement.TitlePlacement="Left" hc:TitleElement.TitleWidth="Auto" Margin="10,10"></hc:TextBox><!--设定TitleWidth为具体数值--><hc:TextBox hc:TitleElement.Title="标题信息" hc:TitleElement.TitlePlacement="Left" hc:TitleElement.TitleWidth="60" Margin="10,10"></hc:TextBox>]]></content>
</entry>
<entry>
<title><![CDATA[TipElement 提示元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FtipElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 Placement 提示元素显示位置 Visibility 是否可见 StringFormat 文本格式 使用案例Placement 提示元素显示位置该属性,用于设定提示元素显示位置,目前支持BottomRight和TopLeft(默认值) 123456789101112131415<hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" TickPlacement="BottomRight" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" Margin="0,32,0,0"/> <hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="BottomRight" TickPlacement="BottomRight" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" Margin="0,32,0,0"/> 效果]]></content>
</entry>
<entry>
<title><![CDATA[RectangleAttach Rectangle专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FrectangleAttach%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 CornerRadius 设置Rectangle圆角值 使用案例CornerRadius 设置Rectangle圆角值1<Rectangle Fill="Red" Width="100" Height="60" hc:RectangleAttach.Circular="True"/>]]></content>
</entry>
<entry>
<title><![CDATA[VisualElement 可视化元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FvisualElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 HighlightBrush 设置控件高亮颜色 HighlightBackground 设置控件高亮背景颜色 HighlightBorderBrush 设置控件高亮边框颜色 HighlightForeground 设置控件高亮前景颜色 Text 设置文本内容 使用案例HighlightBrush 设置控件高亮颜色1234567891011<UniformGrid Margin="22,22,0,0" Rows="2" Columns="2"> <RadioButton Margin="10,10,0,0" Background="{DynamicResource SecondaryRegionBrush}" Style="{StaticResource RadioButtonIcon}" Content="RadioButton" IsChecked="True" GroupName="radio1"/> <RadioButton Margin="10,10,0,0" BorderThickness="1" Style="{StaticResource RadioButtonIcon}" hc:VisualElement.HighlightBrush="YellowGreen" Content="RadioButton" GroupName="radio2"/> </UniformGrid> 如下截图为一组选中状态时的高亮对比结果,左图为样式默认颜色,右侧为个人自定义颜色 Text 设置文本内容主要用于设置控件的辅助文本,当控件没有合适的属性用于显示文本时,可通过此附加属性在自定义样式中设置。 例如:当自定义进度条,需要显示文本时,本身缺少显示额外文本内容的属性,可以通过自定样式显示对应文本,以Text作为文本内容承载属性 自定义样式: 1234567891011121314151617181920<Style x:Key="ProgressBarBaseStyle" TargetType="ProgressBar"> <Setter Property="controls:VisualElement.Text"> <Setter.Value> .....忽略代码..... </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ProgressBar"> <controls:SimplePanel x:Name="TemplateRoot"> ....忽略代码.... <controls:SimplePanel HorizontalAlignment="Left"> ....忽略代码.... <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{DynamicResource TextIconBrush}" Text="{Binding Path=(controls:VisualElement.Text),RelativeSource={RelativeSource TemplatedParent}}"/> </controls:SimplePanel> </controls:SimplePanel> </ControlTemplate> </Setter.Value> </Setter></Style> xaml中的使用: 12345<UniformGrid Margin="22,22,0,0" Rows="2" Columns="2"> <ProgressBar Style="{DynamicResource ProgressBarDanger}" hc:VisualElement.Text="这是可视化文本" Background="YellowGreen"></ProgressBar></UniformGrid> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[StatusSwitchElement 可切换状态的元素]]></title>
<url>%2Fhandycontrol%2Fattach%2FstatusSwitchElement%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 CheckedElement 选中时展示的元素 HideUncheckedElement 是否隐藏元素 使用案例CheckedElement 选中时展示的元素此附加属性适用于ToggleButton以及子类控件,用于控制选择类控件选中时需要显示的内容,默认值为False,不显示。 123456789101112<ToggleButton Style="{DynamicResource ToggleButtonCustom}" Margin="5"> <!--Checked--> <hc:StatusSwitchElement.CheckedElement> <Border Width="60" Height="20" CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource PrimaryBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <!--Default--> <Border Width="80" Height="30" CornerRadius="0" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource BorderBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border></ToggleButton> 默认状态(非选中时)和选中状态 HideUncheckedElement 是否隐藏元素当控制在选中状态时,是否隐藏默认内容,默认值为False,不隐藏 12345678910111213141516171819202122232425262728<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton IsChecked="True" Style="{DynamicResource ToggleButtonCustom}" Margin="5"> <!--Checked--> <hc:StatusSwitchElement.CheckedElement> <Border Width="60" Height="20" CornerRadius="0" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="18" Height="18" Fill="{DynamicResource PrimaryBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <!--Default--> <Border Width="80" Height="30" CornerRadius="0" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="18" Height="18" Fill="{DynamicResource BorderBrush}"/> </Border> </ToggleButton> <!--显式设定选中状态下隐藏默认内容元素--> <ToggleButton IsChecked="True" Style="{DynamicResource ToggleButtonCustom}" hc:StatusSwitchElement.HideUncheckedElement="True" Margin="5"> <!--Checked--> <hc:StatusSwitchElement.CheckedElement> <Border Width="60" Height="20" CornerRadius="0" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="18" Height="18" Fill="{DynamicResource PrimaryBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <!--Default--> <Border Width="80" Height="30" CornerRadius="0" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="18" Height="18" Fill="{DynamicResource BorderBrush}"/> </Border> </ToggleButton></StackPanel> 效果: 以上两个属性,组合使用,能够简单的控制选择类控件状态的展示功能,可根据以上案例进行合理调整]]></content>
</entry>
<entry>
<title><![CDATA[WindowAttach 窗体专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FwindowAttach%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 IsDragElement 是否允许当前元素可拖动窗体 IgnoreAltF4 是否忽略快捷键Alt和F4(键盘快速退出或者 结束 当前正在运行的应用程序) ShowInTaskManager 是否窗体显示到任务管理器中 使用案例IsDragElement 是否允许当前元素可拖动窗体123456789101112131415<hc:BlurWindow x:Class="类命名空间" .....常规项...... WindowStartupLocation="CenterScreen" ShowTitle="True" Style="{DynamicResource WindowBlur}" xmlns:hc="https://handyorg.github.io/handycontrol" d:DesignHeight="450" d:DesignWidth="800"> <hc:SimplePanel> <Rectangle VerticalAlignment="Top" Margin="10" Height="30" RadiusX="4" RadiusY="4" Stroke="{DynamicResource BorderBrush}" StrokeDashArray="2,2"/> <Border hc:WindowAttach.IsDragElement="True" VerticalAlignment="Top" Margin="11" Height="28" Background="{DynamicResource DarkDefaultBrush}" CornerRadius="4"> <TextBlock Text="DragHere" Style="{StaticResource TextBlockDefault}"/> </Border> <Button HorizontalAlignment="Right" Margin="0,15,15,0" VerticalAlignment="Top" Padding="0" Height="20" Width="20" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource CloseGeometry}" hc:BorderElement.CornerRadius="15"/> </hc:SimplePanel></hc:BlurWindow> 可在深色框区域鼠标拖动窗体 IgnoreAltF4 是否忽略快捷键Alt和F4用于屏蔽窗口的 Alt+F4 关闭功能。 1<Setter Property="hc:WindowAttach.IgnoreAltF4" Value="True"/> ShowInTaskManager 是否将窗体显示到任务管理器中使用前提: 窗口必须为非模态窗口,即不能使用ShowDialog显示窗口。 窗口必须同时设置ShowInTaskBar为false ps:该附加属性在Windows7中效果不是很明显]]></content>
</entry>
<entry>
<title><![CDATA[画刷]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fbrushes%2Findex.html</url>
<content type="text"><![CDATA[画刷基于颜色,现有的画刷定义如下: 名称 用途 PrimaryBrush 主色调 DarkPrimaryBrush 主色调(深色) DangerBrush 错误、危险 DarkDangerBrush 错误、危险(深色) WarningBrush 警告 DarkWarningBrush 警告(深色) InfoBrush 信息 DarkInfoBrush 信息(深色) SuccessBrush 成功 DarkSuccessBrush 成功(深色) PrimaryTextBrush 主文本 SecondaryTextBrush 次级文本 ThirdlyTextBrush 末级文本 ReverseTextBrush 反色文本 TextIconBrush 一般用于深色背景下的文字或图标 BorderBrush 边框 SecondaryBorderBrush 次级边框 BackgroundBrush 主背景色 RegionBrush 区域块背景 SecondaryRegionBrush 次级区域块背景 ThirdlyRegionBrush 末级区域块背景 TitleBrush 标题背景 DefaultBrush 默认颜色 DarkDefaultBrush 次级默认颜色 AccentBrush 提醒 DarkAccentBrush 提醒(深色) DarkMaskBrush 作为遮罩使用 DarkOpacityBrush 半透明背景 用例:Foreground="{DynamicResource PrimaryBrush}"]]></content>
</entry>
<entry>
<title><![CDATA[效果]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Feffects%2Findex.html</url>
<content type="text"><![CDATA[阴影目前只包含5个级别的阴影效果: 名称 半径 EffectShadow1 5 EffectShadow2 8 EffectShadow3 14 EffectShadow4 25 EffectShadow5 35 用例:Effect="{StaticResource EffectShadow5}"]]></content>
</entry>
<entry>
<title><![CDATA[字体大小]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Ffonts%2Findex.html</url>
<content type="text"><![CDATA[名称 大小 用途 LargeFontSize 24 页面标题 HeadFontSize 20 功能标题 SubHeadFontSize 16 子功能标题 TextFontSize 12 文本 用例:FontSize="{StaticResource LargeFontSize}"]]></content>
</entry>
<entry>
<title><![CDATA[TextBlockAttach 文本块专用]]></title>
<url>%2Fhandycontrol%2Fattach%2FtextBlockAttach%2Findex.html</url>
<content type="text"><![CDATA[属性 名称 用途 AutoTooltip 设置是否自动显示工具提示 使用案例AutoTooltip 设置是否自动显示工具提示123<hc:SimplePanel Width="100" VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock hc:TextBlockAttach.AutoTooltip="True" Text="EEEEEEEEEEEEEEEEEEEE"/></hc:SimplePanel>]]></content>
</entry>
<entry>
<title><![CDATA[转换器]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fconverters%2Findex.html</url>
<content type="text"><![CDATA[Boolean2BooleanReConverter该转换器用于反转布尔类型 Boolean2StrConverter该转换器需要提供一个字符串作为参数,该字符串的一般形式为:[字符串0];[字符串1],当转换器获取的值为true时,会返回[字符串0],否则返回[字符串1]。 Boolean2VisibilityConverter该转换器会将true转换为Visible,会将false转换为Collapse Boolean2VisibilityReConverter该转换器情况与Boolean2VisibilityConverter相反。 BooleanArr2VisibilityConverter该转换器会将布尔数组转换为Visibility,当数组内全部为true时,返回Visible,否则返回Collapse。 BorderCircularClipConverter该转换器为Border专用,接受一个object数组,该数组长度为3,分别对应Border的长、宽和圆角半径,它会返回一个圆形几何形状作为Clip来剪裁Border。 BorderCircularConverter该转换器为Border专用,接受Border的长和宽合成的一个整型数组,返回它们中最小值的一半,作为圆形Border的半径。 BorderClipConverter该转换器为Border专用,接受一个object数组,该数组长度为3,分别对应Border的长、宽和圆角半径,它会返回一个圆角矩形作为Clip来剪裁Border。 ColLayoutConverter该转换器用于xaml设计时,主要功能是将字符串转换为有效的ColLayout值。 Color2ChannelAConverter(内部使用)该转换器会提取SolidColorBrush.Color的透明通道(A)的值。 Color2HexStrConverter该转换器会将SolidColorBrush转换为16进制字符串形式(带“#”)。 CornerRadiusSplitConverter该转换器需要提供一个字符串作为参数,该字符串的一般形式为:[0/1],[0/1],[0/1],[0/1],4个以逗号分隔的值分别对应CornerRadius的Left、Top,Right,Bottom属性,当值为1则返回对应属性的值,否则返回0。 Double2GridLengthConverter该转换器会将double值转换为GridLength。 DoubleMinConverter(内部使用)可以向该转换器提供一个字符串作为最小值(如果不提供,则最小值默认为0),当传入的值小于最小值时,返回最小值,否则返回传入的值。 Int2StrConverter该转换器需要提供一个字符串作为参数,该字符串的一般形式为:[字符串0];[字符串1];...[字符串n],转换器会将一个整型的值作为索引,来获取指定位置的字符串并返回。 Long2FileSizeConverter该转换器会将长整型转换为文件大小的字符串。 Number2PercentageConverter该转换器接受一个长度为2的数字数组,返回两数的百分比值。 Object2BooleanConverter如果该转换器获取到的值为null则返回false,否则返回true。 Object2VisibilityConverter如果该转换器获取到的值为null则返回Collapsed,否则返回Visible。 RectangleCircularConverter该转换器为Rectangle专用,接受Rectangle的长和宽合成的一个整型数组,返回它们中最小值的一半,作为圆形Rectangle的半径。 String2VisibilityConverter该转换器接受一个字符串,如果该字符串为空或者为null,则返回Collapse,否则返回Visible。 String2VisibilityReConverter该转换器情况与String2VisibilityConverter相反。 ThicknessSplitConverter该转换器需要提供一个字符串作为参数,该字符串的一般形式为:[0/1],[0/1],[0/1],[0/1],4个以逗号分隔的值分别对应Thickness的Left、Top,Right,Bottom属性,当值为1则返回对应属性的值,否则返回0。 TreeViewItemMarginConverter(内部使用)该转换器用于为TreeViewItem提供适当的左边距。 用例:1Visibility="{Binding ShowButton,Converter={StaticResource Boolean2VisibilityConverter}}"]]></content>
</entry>
<entry>
<title><![CDATA[行为]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fbehaviors%2Findex.html</url>
<content type="text"><![CDATA[流体移动 名称 用途 BehaviorXY200 流体移动行为,x、y轴运动,200毫秒结束动画 BehaviorX200 流体移动行为,x轴运动,200毫秒结束动画 BehaviorY200 流体移动行为,y轴运动,200毫秒结束动画 BehaviorXY400 流体移动行为,x、y轴运动,400毫秒结束动画 BehaviorX400 流体移动行为,x轴运动,400毫秒结束动画 BehaviorY400 流体移动行为,y轴运动,400毫秒结束动画 用例:hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"]]></content>
</entry>
<entry>
<title><![CDATA[颜色]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fcolors%2Findex.html</url>
<content type="text"><![CDATA[内置的颜色xaml定义有3个,对它们的描述如下表所示: 名称 用途 Colors.xaml 默认配置 ColorsDark.xaml 暗色配置 ColorsViolet.xaml 紫色配置 每个文件中定义了相同的颜色名称,只是颜色值不同,对颜色名称的描述如下表所示: 名称 用途 PrimaryColor 主色调 DarkPrimaryColor 主色调(深色) DangerColor 错误、危险 DarkDangerColor 错误、危险(深色) WarningColor 警告 DarkWarningColor 警告(深色) InfoColor 信息 DarkInfoColor 信息(深色) SuccessColor 成功 DarkSuccessColor 成功(深色) PrimaryTextColor 主文本 SecondaryTextColor 次级文本 ThirdlyTextColor 末级文本 ReverseTextColor 反色文本 TextIconColor 一般用于深色背景下的文字或图标 BorderColor 边框 SecondaryBorderColor 次级边框 BackgroundColor 主背景色 RegionColor 区域块背景 SecondaryRegionColor 次级区域块背景 ThirdlyRegionColor 末级区域块背景 TitleColor 标题背景 SecondaryTitleColor 次级标题背景 DefaultColor 默认颜色 DarkDefaultColor 次级默认颜色 AccentColor 提醒 DarkAccentColor 提醒(深色) DarkMaskColor 作为遮罩使用 DarkOpacityColor 半透明背景 BlurGradientValue 仅用于模糊窗口的背景 用例:Color="{DynamicResource PrimaryColor}"]]></content>
</entry>
<entry>
<title><![CDATA[几何形状]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fgeometries%2Findex.html</url>
<content type="text"><![CDATA[HandyControl中自带了一些几何形状定义,但要应用于生产中显然不够。我们不准备包罗万象,这永远没有底,所以我们就反其道而行,只包含了控件库自己要用的(当然用户也可使用),其余请自行扩展。下表中列出了控件库中所有的形状定义: 名称 描述 CalendarGeometry 日历 DeleteGeometry 删除 DeleteFillCircleGeometry 删除(圆形填充) CloseGeometry 关闭 DownGeometry 下 UpGeometry 上 ClockGeometry 时钟 LeftGeometry 左 RightGeometry 右 RotateLeftGeometry 向左旋转 RotateRightGeometry 向左旋转 EnlargeGeometry 放大 ReduceGeometry 缩小 DownloadGeometry 下载 SaveGeometry 保存 WindowsGeometry 窗口 FullScreenGeometry 全屏 FullScreenReturnGeometry 全屏返回 SearchGeometry 搜索 UpDownGeometry 上和下的组合 WindowMinGeometry 窗口最小化 WindowRestoreGeometry 窗口还原 WindowMaxGeometry 窗口最大化 CheckedGeometry 选中 PageModeGeometry 单页模式 TwoPageModeGeometry 双页模式 ScrollModeGeometry 滚动模式 EyeOpenGeometry 睁眼 EyeCloseGeometry 闭眼 AudioGeometry 声音 BubbleTailGeometry 气泡的尾巴 StarGeometry 爱心 AddGeometry 加 SubGeometry 减 WarningGeometry 警告 InfoGeometry 信息 ErrorGeometry 错误 SuccessGeometry 成功 FatalGeometry 严重 AskGeometry 询问 AllGeometry 所有 DragGeometry 拖拽(用于工具条) 用例:Data="{StaticResource DragGeometry}"]]></content>
</entry>
<entry>
<title><![CDATA[尺寸]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fsizes%2Findex.html</url>
<content type="text"><![CDATA[名称 类型 值 描述 DefaultControlHeight System.Double 30 默认控件高度 DefaultControlPadding System.Windows.Thickness 10,6 默认控件内边距 DefaultInputPadding System.Windows.Thickness 8,6 默认输入控件内边距 DefaultCornerRadius System.Windows.CornerRadius 4 默认圆角 用例:CornerRadius="{StaticResource DefaultCornerRadius}"]]></content>
</entry>
<entry>
<title><![CDATA[Path路径]]></title>
<url>%2Fhandycontrol%2Fbasic_xaml%2Fpaths%2Findex.html</url>
<content type="text"><![CDATA[和几何形状一样,我们不准备包罗万象,只求所需。下表中列出了控件库中所有的Path路径: 名称 描述 PathBaseStyle Path路径基样式 SearchPathStyle 搜索 FullScreenReturnPathStyle 全屏返回 FullScreenPathStyle 全屏 WindowsPathStyle 窗口 SavePathStyle 保存 DownloadPathStyle 下载 EnlargePathStyle 放大 ReducePathStyle 缩小 RotatePathStyle 向左旋转(默认) CalendarPathStyle 日历 DeletePathStyle 删除 ClosePathStyle 关闭 DownPathStyle 下 ClockPathStyle 时钟 LeftPathStyle 向左 RightPathStyle 向右 UpDownPathStyle 上和下的组合 用例:Style="{StaticResource SearchPathStyle}"]]></content>
</entry>
<entry>
<title><![CDATA[GrowlInfo]]></title>
<url>%2Fhandycontrol%2Fdata%2FGrowlInfo%2Findex.html</url>
<content type="text"><![CDATA[class Growl消息初始化模型 成员名 类型 说明 默认值 Message string 通知内容 - ShowDateTime bool 是否显示通知时间 true WaitTime int 等待自动关闭时间 6 CancelStr string 取消字符串 Lang.Cancel ConfirmStr string 确认字符串 Lang.Confirm ActionBeforeClose Func<bool, bool> 关闭前的委托 - StaysOpen bool 保持打开 false IsCustom bool 是否自定义行为 false Type InfoType 消息类型 InfoType.Success IconKey string 图标键名 - IconBrushKey string 图标画刷键名 - ShowCloseButton bool 是否显示关闭按钮 true Token string 消息标记 - FAQ 这里的IconKey和IconBrushKey我该填什么啊? IconKey必须填资源类型为Geometry的Key名,例如以下的资源,它的Key名GitterGeometry就可以作为IconKey:1<Geometry x:Key="GitterGeometry">M260.8 645H160V0h100.8v645zM461.8 152.2h-100.8V1024h100.8V152.2z m201.2 0h-100.8V1024h100.8V152.2zM864 152h-100.8v494H864V152z</Geometry> IconBrushKey必须填资源类型为Brush的Key名,例如以下的资源,它的Key名ToolBarBackground就可以作为IconBrushKey:1234<LinearGradientBrush x:Key="ToolBarBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#F5F4F5" Offset="0"/> <GradientStop Color="#D1CFD1" Offset="1"/></LinearGradientBrush>]]></content>
</entry>
<entry>
<title><![CDATA[BlurWindow 背景模糊窗口]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FblurWindow%2Findex.html</url>
<content type="text"><![CDATA[背景模糊窗口可用于增强UI效果,但是会牺牲部分性能. 1public class BlurWindow : Window 操作系统支持范围:win10 10240 ~ win10 18362 重写资源 BlurGradientValue 可自定义模糊颜色 案例1<system:UInt32 x:Key="BlurGradientValue">0x99FFFFFF</system:UInt32> 12345678910111213141516<hc:BlurWindow x:Class="HandyControlDemo.Window.BlurWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:hc="https://handyorg.github.io/handycontrol" xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs" xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension" mc:Ignorable="d" Style="{StaticResource WindowBlur}" WindowStartupLocation="CenterScreen" Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Height="450" Width="800" Icon="/HandyControlDemo;component/Resources/Img/icon.ico"></hc:BlurWindow>]]></content>
</entry>
<entry>
<title><![CDATA[AnimationPath 动画路径]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FanimationPath%2Findex.html</url>
<content type="text"><![CDATA[AnimationPath动画路径,设定Geometry派生类型几何图形的数据,例如PathGeometry、LineGeometry等,实现固定的路径动画效果。 1public class AnimationPath : Shape 属性Data 数据动画路径需要显示的几何图形数据。 1<Geometry x:Key="GithubGeometry">M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-0.64-52.48-0.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-0.64-33.92 40.32-0.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-0.64 123.52-0.64 140.8 0 13.44 9.6 29.44 35.2 24.32A512.832 512.832 0 0 0 1024 512c0-282.88-229.12-512-512-512z</Geometry> 案例:123456<Grid Width="100" Height="100"> <hc:AnimationPath Data="{DynamicResource GithubGeometry}" Duration="00:00:05" Stretch="Uniform" StrokeThickness="1" Stroke="Black"></hc:AnimationPath></Grid> 效果: PathLength 路径长度默认为0,设置属性为50,效果如下: Duration 时间间隔路径动画的执行时间间隔,此属性为必须设置项,否则动画路径效果无显示。 IsPlaying 是否正在播放动画判定当前动画播放状态,常作为控件内部行为控制判定标识,可通过该属性进行路径动画的暂停控制。 RepeatBehavior 重复行为设置动画重复行为,默认为Forever,可根据需要设置重复行为。 继承自Shape常用属性 属性名称 用途 Stretch 拉伸属性 StrokeThickness 边线宽度 相关事件Completed当动画完成时,触发此事件。]]></content>
</entry>
<entry>
<title><![CDATA[InfoType]]></title>
<url>%2Fhandycontrol%2Fdata%2FInfoType%2Findex.html</url>
<content type="text"><![CDATA[enum(int) 消息类型 成员名 值 说明 Success 0 成功 Info 1 信息 Warning 2 警告 Error 3 错误 Fatal 4 严重 Ask 5 询问]]></content>
</entry>
<entry>
<title><![CDATA[ButtonGroup 按钮组]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FbuttonGroup%2Findex.html</url>
<content type="text"><![CDATA[RadioGroupItemBaseStyleButtonGroup控件中的子集RadioButton样式基类,不建议直接使用,常作为ButtonGroup中Item样式基类,同时与ButtonGroup控件配套使用 案例: 12345678910111213<!--内部Item样式为ButtonGroup控件自动附加-默认为水平方向item样式--><hc:ButtonGroup Margin="0,32,0,0"> <RadioButton Content="RadioButton" IsChecked="True"/> <RadioButton Content="RadioButton"/> <RadioButton IsEnabled="False" Content="RadioButton"/> <RadioButton Content="RadioButton"/></hc:ButtonGroup><hc:ButtonGroup Margin="0,16,0,0" Style="{StaticResource ButtonGroupSolid}"> <RadioButton Content="RadioButton"/> <RadioButton Content="RadioButton"/> <RadioButton IsEnabled="False" Content="RadioButton"/> <RadioButton Content="RadioButton" IsChecked="True"/></hc:ButtonGroup> 效果: RadioGroup关联样式 样式Key 用途 基类样式 RadioGroupItemDefault RadioGroupItem默认样式 RadioGroupItemBaseStyle RadioGroupItemHorizontalFirst RadioGroupItem水平头样式(从左至右) RadioGroupItemBaseStyle RadioGroupItemHorizontalLast RadioGroupItem水平尾样式(从左至右) RadioGroupItemBaseStyle RadioGroupItemSingle RadioGroupItem单项样式 RadioGroupItemBaseStyle RadioGroupItemVerticalFirst RadioGroupItem垂直头样式(从上至下) RadioGroupItemBaseStyle RadioGroupItemVerticalLast RadioGroupItem垂直尾样式(从上至下) RadioGroupItemBaseStyle 案例: 单个RadioButton样式: 123<RadioButton Style="{DynamicResource RadioGroupItemSingle}" Margin="0,16,8,0" Content="RadioGroupItemSingle"></RadioButton> 效果: 多个RadioButton垂直样式: 1234567891011121314<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <hc:ButtonGroup Margin="0,16,8,0" Orientation="Vertical"> <RadioButton Content="RadioButton" IsChecked="True"/> <RadioButton Content="RadioButton"/> <RadioButton IsEnabled="False" Content="RadioButton"/> <RadioButton Content="RadioButton"/> </hc:ButtonGroup> <hc:ButtonGroup Margin="8,16,0,0" Orientation="Vertical" Style="{StaticResource ButtonGroupSolid}"> <RadioButton Content="RadioButton"/> <RadioButton Content="RadioButton"/> <RadioButton IsEnabled="False" Content="RadioButton"/> <RadioButton Content="RadioButton" IsChecked="True"/> </hc:ButtonGroup></StackPanel> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[ChatBubble 对话气泡]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FchatBubble%2Findex.html</url>
<content type="text"><![CDATA[对话气泡常出现于通讯类软件中,相对于纯文本形式的上下文对话,使用对话气泡可以让聊天界面更加生动有趣。通过扩展,还可以做出气泡皮肤,可使软件个性化功能更加丰富。 1public class ChatBubble : SelectableItem 属性 属性 用途 Role 对话角色 Type 消息类型 IsRead 是否已读 ReadAction 该气泡被选中时触发 效果代码详见源码demo]]></content>
</entry>
<entry>
<title><![CDATA[Badge 标记]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fbadge%2Findex.html</url>
<content type="text"><![CDATA[标记控件作为其他控件的特定状态内容标记,能够做到最小程度的侵入原有控件,可以看作是一种内容控件,内部Content就是对应需要显示标记的被修饰控件,继承关系如下: 1public class Badge : ContentControl 基础属性 属性名称 用途 Text 获取或设置标记显示内容 Value 获取或设置显示数值,支持数值动态变更 Status 获取或设置标记状态类型,Text(文本),Dot(圆点标记),Processing(动态标记)默认为文本显示 Maximum 获取或设置最大显示数值。数值显示时,最大显示数值 BadgeMargin 获取或设置标记相对于被修饰控件的外边距 ShowBadge 获取或设置是否显示标记,默认为True xaml中,记得引入handycontrol的命名空间。 1xmlns:hc="https://handyorg.github.io/handycontrol" Text和Value可能看到属性解释,会比较疑惑,Text和Value在效果和数值上是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示Text。 案例123456<hc:Badge Value="12" Text="New" BadgeMargin="0,-14,-20,0" Height="30"> <Button Content="默认样式"/></hc:Badge><hc:Badge Value="12" BadgeMargin="0,-14,-20,0" Height="30"> <Button Content="默认样式"/></hc:Badge> 效果 Maximum最大显示数值使用Value属性,添加最大显示数值限定标记显示的最大值显示效果 案例123456<hc:Badge Value="100" Maximum="99" BadgeMargin="0,-14,-20,0" Height="30"> <Button Content="Maximum"/></hc:Badge><hc:Badge Value="2" Maximum="99" BadgeMargin="0,-14,-20,0" Height="30"> <Button Content="Maximum"/></hc:Badge> 效果 Status标记状态类型标记状态类型,分为三种类型,默认为文本显示 案例123456789<hc:Badge Status="Text" Text="text" Height="30" Margin="32,0,0,0" Style="{DynamicResource BadgeSuccess}"> <Button Content="Text"/></hc:Badge><hc:Badge Status="Dot" Height="30" Margin="32,0,0,0" Style="{DynamicResource BadgeSuccess}"> <Button Content="Dot"/></hc:Badge><hc:Badge Status="Processing" Height="30" Margin="32,0,0,0" Style="{DynamicResource BadgeSuccess}"> <Button Content="Processing" /></hc:Badge> 效果 BadgeMargin相对外边距BadgeMargin用于设定相对于被修饰控件的外边距,一般情况下该属性不做修改,建议使用0,-14,-20,0 案例123456<hc:Badge Height="30" Value="11" Style="{DynamicResource BadgeSuccess}"> <Button Content="BadgeMargin" /></hc:Badge><hc:Badge Height="30" Value="11" BadgeMargin="30,0,0,0" Style="{DynamicResource BadgeSuccess}"> <Button Content="BadgeMargin" /></hc:Badge> 效果 事件 事件 用途 ValueChanged 数值变更后触发事件 相关样式 样式名称 用途 继承样式 BadgeBaseStyle 默认样式,作为BaseOn继承使用 - BadgePrimary 主题色标记样式 BadgeBaseStyle BadgeSuccess 成功色标记样式 BadgeBaseStyle BadgeInfo 信息色标记样式 BadgeBaseStyle BadgeWarning 警告色标记样式 BadgeBaseStyle BadgeDanger 异常色标记样式 BadgeBaseStyle 案例123456789101112131415161718<hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11"> <Button Content="Default" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgePrimary}"> <Button Content="Primary" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgeInfo}"> <Button Content="Info" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgeSuccess}"> <Button Content="Success" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgeWarning}"> <Button Content="Warning" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgeDanger}"> <Button Content="Danger" /></hc:Badge> 效果 FAQ坐标偏移问题[版本 小于等于 2.4]问题描述当父级容器不是stackpanel默认排列方式时,标记和被修饰控件出现偏移 现状123456<hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11"> <Button Content="Default" /></hc:Badge><hc:Badge Height="30" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgePrimary}"> <Button Content="Primary" /></hc:Badge> 解决方案将属性Badge中的属性VerticalAlignment和HorizontalAlignment设置为Center即可 123456<hc:Badge Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" BadgeMargin="0,-14,-20,0" Value="11"> <Button Content="Default" /></hc:Badge><hc:Badge Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" BadgeMargin="0,-14,-20,0" Value="11" Style="{DynamicResource BadgePrimary}"> <Button Content="Primary" /></hc:Badge>]]></content>
</entry>
<entry>
<title><![CDATA[CalendarWithClock 带有时钟的日历]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcalendarWithClock%2Findex.html</url>
<content type="text"><![CDATA[CalendarWithClock 控件由日历和时钟组成,允许用户通过鼠标选择日期和时间。 1234[TemplatePart(Name = ElementButtonConfirm, Type = typeof(Button))][TemplatePart(Name = ElementClockPresenter, Type = typeof(ContentPresenter))][TemplatePart(Name = ElementCalendarPresenter, Type = typeof(ContentPresenter))]public class CalendarWithClock : Control 创建日期选取器1<hc:CalendarWithClock /> 1var dateTimePicker = new CalendarWithClock(); 生成的CalendarWithClock如下图所示: 选择日期和时间通过鼠标分别在日历和时钟上选择日期和时间,然后点击 确定 按钮即可更新CalendarWithClock控件的日期和时间。 也可以在XAML钟或代码中这样设置日期。 1<hc:CalendarWithClock SelectedDateTime="{x:Static system:DateTime.Now}"/> 1calendarWithClock.SelectedDateTime = DateTime.Now; 属性 属性 描述 SelectedDateTime 获取或设置当前选中的日期和时间 DateTimeFormat 获取或设置用于显示选定日期和时间的格式 DisplayDateTime 获取或设置要显示的日期 ShowConfirmButton 获取或设置一个值,该值指示是是否显示 确定 按钮 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 VerifyData() 验证数据]]></content>
</entry>
<entry>
<title><![CDATA[Carousel 轮播]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fcarousel%2Findex.html</url>
<content type="text"><![CDATA[可以在固定时间内循环切换项目。 1public class Carousel : SimpleItemsControl, IDisposable 属性 属性 用途 AutoRun 是否自动轮播 Interval 轮播间隔时间 ExtendWidth 项内容扩展宽度 IsCenter 轮播项是否居中显示 PageButtonStyle 页按钮样式 案例显示填充轮播项12345678910<hc:Carousel Margin="32" IsCenter="True" AutoRun="True" Width="600" Height="330" VerticalAlignment="Center"> <Image Width="600" Stretch="UniformToFill" Source="/HandyControlDemo;component/Resources/Img/1.jpg"/> <Image Width="300" Stretch="UniformToFill" Source="/HandyControlDemo;component/Resources/Img/2.jpg"/> <hc:SimplePanel Width="600"> <Image Stretch="UniformToFill" Source="/HandyControlDemo;component/Resources/Img/3.jpg"/> <TextBlock Text="Demo Text" Style="{StaticResource TextBlockDefault}" FontSize="100" FontWeight="Bold" Foreground="White"/> </hc:SimplePanel> <Image Width="600" Stretch="UniformToFill" Source="/HandyControlDemo;component/Resources/Img/4.jpg"/> <Image Width="600" Stretch="UniformToFill" Source="/HandyControlDemo;component/Resources/Img/5.jpg"/></hc:Carousel> 使用绑定生成轮播项1234567<hc:Carousel AutoRun="True" ItemsSource="{Binding Images}" Width="300" Height="200"> <hc:Carousel.ItemTemplate> <DataTemplate> <Image Source="{Binding}" Width="300"/> </DataTemplate> </hc:Carousel.ItemTemplate></hc:Carousel> ExtendWidth会在最后一个轮播项后扩展一段距离,请注意,这不是偏移的概念,而是扩展的概念。]]></content>
</entry>
<entry>
<title><![CDATA[CheckComboBox 复选组合框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcheckComboBox%2Findex.html</url>
<content type="text"><![CDATA[可选选中多个项目的组合框. 123[TemplatePart(Name = ElementPanel, Type = typeof(Panel))][TemplatePart(Name = ElementSelectAll, Type = typeof(CheckComboBoxItem))]public class CheckComboBox : ListBox, IDataInput 属性 属性 描述 默认值 备注 VerifyFunc 数据验证委托 IsError 数据是否错误 false ErrorStr 错误提示 TextType 文本类型 ShowClearButton 是否显示清除按钮 false MaxDropDownHeight 下拉内容最大高度 IsDropDownOpen 下拉框是否展开 false TagStyle 选中标记样式 ShowSelectAllButton 是否显示选中所有按钮 false 附加属性 属性 描述 默认值 备注 InfoElement.Placeholder 占位符 InfoElement.Necessary 是否必填 false InfoElement.Symbol 必填标记 ● InfoElement.ContentHeight 内容高度 30 标题在上时可用 InfoElement.MinContentHeight 最小内容高度 30 标题在上时可用 TitleElement.Title 标题 TitleElement.TitlePlacement 标题对齐方式 TitlePlacementType.Top TitleElement.TitleWidth 标题宽度 120 DropDownElement.ConsistentWidth 下拉内容是否和下拉框宽度一致 false 方法 方法 描述 备注 VerifyData 验证数据 可手动触发验证 样式 样式 描述 CheckComboBoxBaseStyle 默认样式 CheckComboBoxExtendBaseStyle 默认扩展样式 CheckComboBoxPlusBaseStyle 默认增强样式 CheckComboBoxExtend 扩展样式 CheckComboBoxPlus 增强样式 案例12345678910111213141516171819202122<StackPanel Margin="32" Orientation="Horizontal"> <StackPanel> <hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" ShowSelectAllButton="True"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxExtend}" Margin="0,16,0,0" IsEnabled="False" ShowSelectAllButton="True"/> <hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" ShowSelectAllButton="True"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/> <hc:CheckComboBox ShowClearButton="True" Width="380" ItemsSource="{Binding DataList}" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" ShowSelectAllButton="True"/> <hc:CheckComboBox Width="380" ItemsSource="{Binding DataList}" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/> </StackPanel> <StackPanel Margin="32,0,0,0"> <hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxPlus}" ShowSelectAllButton="True"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Margin="0,16,0,0" IsEnabled="False" Style="{StaticResource CheckComboBoxPlus}"/> <hc:CheckComboBox MaxWidth="380" ShowClearButton="True" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" ShowSelectAllButton="True"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" ShowClearButton="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" ShowSelectAllButton="True"/> <hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/> </StackPanel></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Card 卡片]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fcard%2Findex.html</url>
<content type="text"><![CDATA[用于卡片化展示数据,为ContentControl的派生类 1public class Card : ContentControl 基础属性 属性 用途 Header 卡片头部内容,用于显示同步文本 HeaderTemplate 卡片头部模板 HeaderTemplateSelector 卡片模板样式选择器 HeaderStringFormat 卡片头部模板内容显示格式 Footer 卡片尾部内容 FooterTemplate 卡片尾部模板 FooterTemplateSelector 卡片尾部样式选择器 FooterStringFormat 卡片尾部内容显示格式 案例单卡片使用xaml中使用12345678910111213141516171819<hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8"> <!--Card 的内容部分--> <Border CornerRadius="4,4,0,0" Width="160" Height="160"> <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="测试"/> </Border> <!--Card 的尾部部分--> <hc:Card.Footer> <StackPanel Margin="10" Width="160"> <!--Card 的一级内容--> <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis" Text="大标题" HorizontalAlignment="Left"/> <!--Card 的二级内容--> <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis" Text="描述信息" Margin="0,6,0,0" HorizontalAlignment="Left"/> </StackPanel> </hc:Card.Footer></hc:Card> 效果 作为数据模板数据类型12345678public class CardModel{ public string Header { get; set; } public string Content { get; set; } public string Footer { get; set; }} 视图实体此实体并没有按照规范的mvvm方式进行设计,仅仅是作为普通数据源做展示使用 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576public class CardDemoViewModel{ private IList<CardModel> _dataList; public CardDemoViewModel() { DataList = GetCardDataList(); } internal ObservableCollection<CardModel> GetCardDataList() { return new ObservableCollection<CardModel> { new CardModel { Header = "Atomic", Content = "1.jpg", Footer = "Stive Morgan" }, new CardModel { Header = "Zinderlong", Content = "2.jpg", Footer = "Zonderling" }, new CardModel { Header = "Busy Doin' Nothin'", Content = "3.jpg", Footer = "Ace Wilder" }, new CardModel { Header = "Wrong", Content = "4.jpg", Footer = "Blaxy Girls" }, new CardModel { Header = "The Lights", Content = "5.jpg", Footer = "Panda Eyes" }, new CardModel { Header = "EA7-50-Cent Disco", Content = "6.jpg", Footer = "еяхат музыка" }, new CardModel { Header = "Monsters", Content = "7.jpg", Footer = "Different Heaven" }, new CardModel { Header = "Gangsta Walk", Content = "8.jpg", Footer = "Illusionize" }, new CardModel { Header = "Won't Back Down", Content = "9.jpg", Footer = "Boehm" }, new CardModel { Header = "Katchi", Content = "10.jpg", Footer = "Ofenbach" } }; } public IList<CardModel> DataList { get => _dataList; set => _dataList = value; }} xaml中的使用方式handycontrol的命名空间和DataContext上下文需要自行引入 1234xmlns:hc="https://handyorg.github.io/handycontrol"xmlns:data="CardModel所在命名空间"xmlns:vm="CardDemoViewModel所在命名空间"........ 1234567<!--在listbox的父级中使用--> <listbox的父级.Resources> <vm:CardDemoViewModel x:Key="Card"></vm:CardDemoViewModel> </listbox的父级.Resources> <listbox的父级.DataContext> <Binding Source="{StaticResource Card}"/> </listbox的父级.DataContext> 123456789101112131415161718192021222324252627<ListBox Margin="32" BorderThickness="0" Style="{DynamicResource WrapPanelHorizontalListBox}" ItemsSource="{Binding DataList}"> <ListBox.ItemTemplate> <DataTemplate DataType="data:CardModel"> <hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8" Footer="{Binding Footer}"> <!--Card 的内容部分模板--> <Border CornerRadius="4,4,0,0" Width="160" Height="160"> <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Content}"/> </Border> <!--Card 的尾部部分模板--> <hc:Card.FooterTemplate> <DataTemplate> <StackPanel Margin="10" Width="160"> <!--Card 的一级内容--> <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis" Text="{Binding DataContext.Header,RelativeSource={RelativeSource AncestorType=hc:Card}}" HorizontalAlignment="Left"/> <!--Card 的二级内容--> <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis" Text="{Binding}" Margin="0,6,0,0" HorizontalAlignment="Left"/> </StackPanel> </DataTemplate> </hc:Card.FooterTemplate> </hc:Card> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 效果]]></content>
</entry>
<entry>
<title><![CDATA[CirclePanel 圆形布局]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcirclePanel%2Findex.html</url>
<content type="text"><![CDATA[圆形布局常用作方向按钮、功能按钮的容器。 1public class CirclePanel : Panel 属性 属性 用途 Diameter 直径 KeepVertical 元素是否保持垂直 OffsetAngle 整体的角度偏移 案例12345678910111213141516171819202122232425262728293031323334353637<Style x:Key="CirclePanelButton" BasedOn="{StaticResource ButtonCustom}" TargetType="Button"> <Setter Property="UseLayoutRounding" Value="False"/> <Setter Property="Height" Value="77"/> <Setter Property="Width" Value="36.06"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <hc:SimplePanel> <Path Data="{StaticResource CirclePanelDemoGeometry}" Fill="{DynamicResource PrimaryBrush}" Height="77" Width="36.06"/> <Path Data="{StaticResource CirclePanelRightGeometry}" Stretch="Uniform" Margin="12" Fill="White"/> </hc:SimplePanel> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Opacity" Value=".9"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Opacity" Value=".6"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" Value="0.4"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter></Style><hc:CirclePanel Margin="64" Diameter="170"> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/> <Button Style="{StaticResource CirclePanelButton}"/></hc:CirclePanel>]]></content>
</entry>
<entry>
<title><![CDATA[ComboBox 组合框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcomboBox%2Findex.html</url>
<content type="text"><![CDATA[原生组合框的HC扩展。 1public class ComboBox : System.Windows.Controls.ComboBox, IDataInput 属性 属性 描述 默认值 备注 VerifyFunc 数据验证委托 IsError 数据是否错误 false ErrorStr 错误提示 TextType 文本类型 ShowClearButton 是否显示清除按钮 false AutoComplete 是否自动完成输入 false 附加属性 属性 描述 默认值 备注 InfoElement.Placeholder 占位符 InfoElement.Necessary 是否必填 false InfoElement.Symbol 必填标记 ● InfoElement.ContentHeight 内容高度 30 标题在上时可用 InfoElement.MinContentHeight 最小内容高度 30 标题在上时可用 TitleElement.Title 标题 TitleElement.TitlePlacement 标题对齐方式 TitlePlacementType.Top TitleElement.TitleWidth 标题宽度 120 DropDownElement.ConsistentWidth 下拉内容是否和下拉框宽度一致 false 方法 方法 描述 备注 VerifyData 验证数据 可手动触发验证 样式 样式 描述 ComboBoxPlusBaseStyle 默认样式 案例原生功能在扩展ComboBox上行为一致。 123456789101112131415<StackPanel Margin="32"> <hc:ComboBox ShowClearButton="True" ItemsSource="{Binding DataList}" SelectedIndex="0"/> <hc:ComboBox ItemsSource="{Binding DataList}" Margin="0,16,0,0" SelectedIndex="0" IsEnabled="False"/> <hc:ComboBox ShowClearButton="True" ItemsSource="{Binding DataList}" SelectedIndex="0" Margin="0,16,0,0" IsEditable="True"/> <hc:ComboBox ItemsSource="{Binding DataList}" SelectedIndex="0" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/> <hc:ComboBox ShowClearButton="True" ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/> <hc:ComboBox ItemsSource="{Binding DataList}" IsEditable="True" SelectedIndex="0" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/> <hc:ComboBox AutoComplete="True" ShowClearButton="True" ItemsSource="{Binding DataList}" IsEditable="True" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/> <hc:ComboBox ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/> <hc:ComboBox ShowClearButton="True" ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/> <hc:ComboBox ItemsSource="{Binding DataList}" IsEditable="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/> <hc:ComboBox AutoComplete="True" ShowClearButton="True" ItemsSource="{Binding DataList}" IsEditable="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[CircleProgressBar 圆形进度条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcircleProgressBar%2Findex.html</url>
<content type="text"><![CDATA[在宽高存在一定限制的区域可以使用圆形进度条节省空间。 12[TemplatePart(Name = IndicatorTemplateName, Type = typeof(Arc))]public class CircleProgressBar : RangeBase 属性 属性 描述 默认值 备注 ArcThickness 圆形粗细 4 该默认值由主题提供 ShowText 是否显示文本 true Text 文本内容 <空> 进度文本 样式 样式 描述 ProgressBarCircleBaseStyle 默认样式 ProgressBarSuccessCircle 成功 ProgressBarInfoCircle 信息 ProgressBarWarningCircle 警告 ProgressBarDangerCircle 危险 案例12345678<StackPanel Orientation="Horizontal" Margin="0,32,0,0"> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}"/> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="30" Margin="16,0,0,0"/> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="20" Height="20" ArcThickness="2" Style="{StaticResource ProgressBarSuccessCircle}"/> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="30" Height="30" ArcThickness="6" Style="{StaticResource ProgressBarInfoCircle}"/> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="40" Height="40" ArcThickness="10" Style="{StaticResource ProgressBarWarningCircle}"/> <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" Width="50" Height="50" Style="{StaticResource ProgressBarDangerCircle}"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Clock 时钟]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fclock%2Findex.html</url>
<content type="text"><![CDATA[Clock 控件展示一个虚拟的时钟,允许用户在这个时钟上选择时间。 12345678[TemplatePart(Name = ElementButtonAm, Type = typeof(RadioButton))][TemplatePart(Name = ElementButtonPm, Type = typeof(RadioButton))][TemplatePart(Name = ElementCanvas, Type = typeof(Canvas))][TemplatePart(Name = ElementBorderTitle, Type = typeof(Border))][TemplatePart(Name = ElementBorderClock, Type = typeof(Border))][TemplatePart(Name = ElementPanelNum, Type = typeof(CirclePanel))][TemplatePart(Name = ElementTimeStr, Type = typeof(TextBlock))]public class Clock : ClockBase 创建Clock1<hc:Clock /> 1var clock = new Clock(); 生成的Clock如下图所示: 选择时间可以通过点击左边的时钟,或者点击右边的时分秒列表选择时间。也可以在XAML钟或代码中这样设置日期。 1<hc:Clock SelectedTime="{x:Static system:DateTime.Now}"/> 1clock.SelectedTime = DateTime.Now; 属性 属性 描述 SelectedTime 获取或设置当前选中的时间。 DisplayTime 获取或设置当前的显示时间。 TimeFormat 获取或设置用于显示选定的时间的格式 ClockRadioButtonStyle 获取或设置Clock控件中RadioButton的样式 事件 事件 描述 DisplayTimeChanged 当显示的时间改变时发生。]]></content>
</entry>
<entry>
<title><![CDATA[ContextMenuButton 上下文菜单按钮]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcontextMenuButton%2Findex.html</url>
<content type="text"><![CDATA[HC提供了两个上下文菜单按钮,分别是 ContextMenuButton 和 ContextMenuToggleButton,它们的使用方式和普通 Button、ToggleButton 一致,唯一的区别是提供了 Menu 属性,可用于实现点击按钮弹出上下文菜单的效果。]]></content>
</entry>
<entry>
<title><![CDATA[ColorPicker 颜色拾取器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcolorPicker%2Findex.html</url>
<content type="text"><![CDATA[仿制Chrome的颜色拾取器,相关博文:《WPF 控件库——仿制Chrome的ColorPicker》 123456789[TemplatePart(Name = ElementBorderColor, Type = typeof(Border))][TemplatePart(Name = ElementBorderPicker, Type = typeof(Border))][TemplatePart(Name = ElementBorderDrag, Type = typeof(Border))][TemplatePart(Name = ElementPanelColor, Type = typeof(Panel))][TemplatePart(Name = ElementSliderColor, Type = typeof(Panel))][TemplatePart(Name = ElementSliderOpacity, Type = typeof(Panel))][TemplatePart(Name = ElementPanelRgb, Type = typeof(Panel))][TemplatePart(Name = ElementButtonDropper, Type = typeof(ToggleButton))]public class ColorPicker : Control, ISingleOpen 属性 属性 描述 默认值 备注 SelectedBrush 选中色 Brushes.White 事件 事件 描述 备注 SelectedColorChanged 颜色改变事件 Canceled 取消事件 案例1<hc:ColorPicker Name="ColorPicker" Margin="32"/>]]></content>
</entry>
<entry>
<title><![CDATA[DatePicker 日期选择器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FdatePicker%2Findex.html</url>
<content type="text"><![CDATA[DatePicker 控件允许用户通过在文本框中键入日期或使用下拉的日历控件来选择日期。 12[TemplatePart(Name = ElementTextBox, Type = typeof(DatePickerTextBox))]public class DatePicker : System.Windows.Controls.DatePicker, IDataInput 创建DatePicker1<hc:DatePicker /> 1var datePicker = new DatePicker(); 生成的DatePicker如下图所示: 选择日期可以通过文本框输入日期,或者点击文本框右边的按钮打开下拉的日历控件选择日期。 也可以在XAML钟或代码中这样设置日期。 1<hc:DatePicker SelectedDate="{x:Static system:DateTime.Now}"/> 1datePicker.SelectedDate = DateTime.Now; 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到DatePicker,以向用户指示其用途。 1234<hc:DatePicker hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr3}" /> 属性 属性 描述 SelectedDate 获取或设置当前选中的日期 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 VerifyData() 验证数据]]></content>
</entry>
<entry>
<title><![CDATA[DashedBorder 虚线边框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FdashedBorder%2Findex.html</url>
<content type="text"><![CDATA[一种装饰元素,可提供虚线边框,以实现某些特殊效果. 1public class DashedBorder : Decorator 属性 属性 描述 默认值 备注 BorderThickness 边框粗细 BorderDashThickness 边框虚线粗细 0 Padding 内边距 CornerRadius 圆角 BorderBrush 边框颜色 Background 背景色 BorderDashArray 边框虚线数组 BorderDashCap 边框虚线线帽样式 PenLineCap.Flat BorderDashOffset 边框虚线偏移 0 案例1<hc:DashedBorder Width="100" Height="100" BorderDashThickness="2" BorderBrush="Black" BorderDashArray="3, 1" CornerRadius="0,50,0,0"/> 当需要设置边框粗细时要注意,如果4个圆角数值一致,请使用 BorderThickness,否则请使用 BorderDashThickness]]></content>
</entry>
<entry>
<title><![CDATA[CompareSlider 对比滑块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcompareSlider%2Findex.html</url>
<content type="text"><![CDATA[借助对比滑块可以很方便得看出元素改动前后的差异。 1public class CompareSlider : Slider 属性 属性 描述 默认值 备注 TargetContent 目标内容 SourceContent 源内容(当前内容) 案例12345678910111213141516171819202122232425262728293031323334<WrapPanel ItemHeight="384" ItemWidth="632"> <hc:CompareSlider Value="5" Width="600" Height="352"> <hc:CompareSlider.TargetContent> <Border> <Border.Background> <ImageBrush ImageSource="/HandyControlDemo;component/Resources/Img/b1.jpg"/> </Border.Background> </Border> </hc:CompareSlider.TargetContent> <hc:CompareSlider.SourceContent> <Border> <Border.Background> <ImageBrush ImageSource="/HandyControlDemo;component/Resources/Img/b2.jpg"/> </Border.Background> </Border> </hc:CompareSlider.SourceContent> </hc:CompareSlider> <hc:CompareSlider Orientation="Vertical" Value="5" Width="600" Height="352"> <hc:CompareSlider.TargetContent> <Border> <Border.Background> <ImageBrush ImageSource="/HandyControlDemo;component/Resources/Img/b1.jpg"/> </Border.Background> </Border> </hc:CompareSlider.TargetContent> <hc:CompareSlider.SourceContent> <Border> <Border.Background> <ImageBrush ImageSource="/HandyControlDemo;component/Resources/Img/b2.jpg"/> </Border.Background> </Border> </hc:CompareSlider.SourceContent> </hc:CompareSlider></WrapPanel>]]></content>
</entry>
<entry>
<title><![CDATA[CoverFlow 封面流]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcoverFlow%2Findex.html</url>
<content type="text"><![CDATA[该控件将封面以3D的形式展示出来,可用于增强界面效果。 1234[TemplatePart(Name = ElementViewport3D, Type = typeof(Viewport3D))][TemplatePart(Name = ElementCamera, Type = typeof(ProjectionCamera))][TemplatePart(Name = ElementVisualParent, Type = typeof(ModelVisual3D))]public class CoverFlow : Control 属性 属性 描述 默认值 备注 PageIndex 页码 Loop 是否循环展示 方法 方法 描述 Add(string) 添加一项资源 Add(Uri) 添加一项资源 AddRange(IEnumerable) 批量添加资源 JumpTo(int) 跳转 案例1234567891011121314CoverFlowMain.AddRange(new []{ new Uri(@"pack://application:,,,/Resources/Img/Album/1.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/2.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/3.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/4.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/5.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/6.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/7.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/8.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/9.jpg"), new Uri(@"pack://application:,,,/Resources/Img/Album/10.jpg")});CoverFlowMain.JumpTo(2); 1<hc:CoverFlow x:Name="CoverFlowMain" Margin="32" Width="500" Height="300"/>]]></content>
</entry>
<entry>
<title><![CDATA[CoverView 封面视图]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FcoverView%2Findex.html</url>
<content type="text"><![CDATA[仿制Itunes的专辑视图。 1public class CoverView : RegularItemsControl 属性 属性 描述 默认值 备注 CoverViewContentStyle 封面内容样式 ItemContentHeight 项内容高度 300 ItemContentHeightFixed 项内容高度是否固定 true ItemHeaderTemplate 项标题模板 SourceContent 源内容(当前内容) Groups 组数 案例1234567891011121314<hc:CoverView Margin="27" Width="880" Height="432" ItemWidth="160" ItemHeight="160" ItemsSource="{Binding DataList}"> <hc:CoverView.ItemHeaderTemplate> <DataTemplate> <Image Source="{Binding ImgPath}"/> </DataTemplate> </hc:CoverView.ItemHeaderTemplate> <hc:CoverView.ItemTemplate> <DataTemplate> <Border Margin="10" Height="300" Background="{Binding BackgroundToken,Converter={StaticResource String2BrushConverter}}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </DataTemplate> </hc:CoverView.ItemTemplate></hc:CoverView>]]></content>
</entry>
<entry>
<title><![CDATA[Drawer 抽屉]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fdrawer%2Findex.html</url>
<content type="text"><![CDATA[当 Dialog 组件不能满足我们的需求时(例如展示一些文档),可以使用 Drawer. 12[ContentProperty("Content")]public class Drawer : FrameworkElement 属性 属性 描述 默认值 备注 IsOpen 是否关闭 MaskCanClose 点击遮罩层是否可以关闭 Drawer true ShowMask 是否显示遮罩层 true Dock 位置 Dock.Left ShowMode 显示模式 DrawerShowMode.Cover MaskBrush 遮罩层颜色 Content 内容 事件 名称 说明 Opened 抽屉打开时触发 Closed 抽屉关闭时触发 案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<hc:SimplePanel Margin="22"> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" Content="Left" IsChecked="{Binding IsOpen,ElementName=DrawerLeft}"/> <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Content="Top" IsChecked="{Binding IsOpen,ElementName=DrawerTop}"/> <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" Content="Right" IsChecked="{Binding IsOpen,ElementName=DrawerRight}"/> <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1" Content="Bottom" IsChecked="{Binding IsOpen,ElementName=DrawerBottom}"/> </Grid> <hc:Drawer Name="DrawerLeft" Dock="Left" ShowMode="Push"> <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/> <Button Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/> </Grid> </Border> </hc:Drawer> <hc:Drawer Name="DrawerTop" Dock="Top" ShowMode="Press"> <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/> <Button Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/> </Grid> </Border> </hc:Drawer> <hc:Drawer Name="DrawerRight" MaskCanClose="False"> <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/> <Button Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/> </Grid> </Border> </hc:Drawer> <hc:Drawer Name="DrawerBottom" Dock="Bottom" ShowMask="False"> <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/> <Button Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/> </Grid> </Border> </hc:Drawer></hc:SimplePanel>]]></content>
</entry>
<entry>
<title><![CDATA[Dialog 对话框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fdialog%2Findex.html</url>
<content type="text"><![CDATA[在保留当前页面状态的情况下,告知用户并承载相关操作。 1public class Dialog : ContentControl 属性 属性 描述 默认值 备注 IsClosed 是否关闭 附加属性 名称 说明 Token 用于设置消息标记 方法 名称 说明 Show(object, string) 显示承载内容 Show(string) 显示承载内容(自动实例化承载内容) Close( ) 关闭 Register(string, FrameworkElement) 为指定的元素注册消息标记 Unregister(string, Panel) 为指定的元素取消消息标记的注册 Unregister(Panel) 如果该元素注册了消息标记则取消注册 Unregister(string) 如果该消息标记有对应的元素则取消注册 案例基本用法123456789101112131415<Border x:Class="HandyControlDemo.UserControl.TextDialog" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs" xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension" xmlns:hc="https://handyorg.github.io/handycontrol" CornerRadius="10" Width="400" Height="247" Background="{DynamicResource RegionBrush}"> <hc:SimplePanel> <TextBlock Style="{StaticResource TextBlockLargeBold}" Text="{ex:Lang Key={x:Static langs:LangKeys.PleaseWait}}"/> <Button Width="22" Height="22" Command="hc:ControlCommands.Close" Style="{StaticResource ButtonIcon}" Foreground="{DynamicResource PrimaryBrush}" hc:IconElement.Geometry="{StaticResource ErrorGeometry}" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,4,4,0"/> </hc:SimplePanel></Border> 12345678910namespace HandyControlDemo.UserControl{ public partial class TextDialog { public TextDialog() { InitializeComponent(); } }} 1Dialog.Show(new TextDialog()); 异步等待结果返回通过Initialize扩展方法初始化vm后,可在此基础上使用GetResultAsync方法实现异步等待: 1234Dialog.Show<InteractiveDialog>() .Initialize<InteractiveDialogViewModel>(vm => vm.Message = DialogResult) .GetResultAsync<string>() .ContinueWith(str => DialogResult = str.Result); 更简单的异步方式123var d = Dialog.Show<ProgressDialog>();await Task.Delay(5 * 1000);d.Close(); 弹框行为如果在调用Show方法时,没有给定token参数,则默认会在当前激活的窗口弹框。如果token给定了值,内部会判断目标元素的类型,如果类型是窗口,则会在该窗口下的装饰层中弹出,否则会寻找目标元素的子元素,直到找到类型为DialogContainer的子元素,最后会在该子元素内部弹出。 12345<UserControl hc:Dialog.Token="DialogContainer"> <hc:DialogContainer> // 内部控件 </hc:DialogContainer></UserControl>]]></content>
</entry>
<entry>
<title><![CDATA[DateTimePicker 日期时间选择器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FdateTimePicker%2Findex.html</url>
<content type="text"><![CDATA[DatePicker 控件允许用户通过在文本框中键入日期和时间,或使用下拉的日历控件来选择日期和时间。 12345[TemplatePart(Name = ElementRoot, Type = typeof(Grid))][TemplatePart(Name = ElementTextBox, Type = typeof(WatermarkTextBox))][TemplatePart(Name = ElementButton, Type = typeof(Button))][TemplatePart(Name = ElementPopup, Type = typeof(Popup))]public class DateTimePicker : Control, IDataInput 创建DateTimePicker1<hc:DateTimePicker /> 1var dateTimePicker = new DateTimePicker(); 生成的DateTimePicker如下图所示: 选择日期和时间可以通过文本框输入日期和时间,或者点击文本框右边的按钮打开下拉的日历和时钟控件选择日期和时间。 也可以在XAML中或代码中这样设置日期。 1<hc:DateTimePicker SelectedDateTime="{x:Static system:DateTime.Now}"/> 1dateTimePicker.SelectedDateTime = DateTime.Now; 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到DatePicker,以向用户指示其用途。要使用这两个属性,首先需要应用 DateTimePickerExtend 或 DateTimePickerPlus 样式。 1234<hc:DateTimePicker ShowClearButton="True" Style="{StaticResource DateTimePickerExtend}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr1}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}"/> 属性 属性 描述 SelectedDateTime 获取或设置当前选中的日期和时间 DateTimeFormat 获取或设置用于显示选定日期和时间的格式 CalendarStyle 获取或设置在呈现日历时使用的样式 DisplayDateTime 获取或设置要显示的日期 IsDropDownOpen 获取或设置一个值,该值指示是打开还是关闭下拉 Calendar Text 获取由 DateTimePicker 显示的文本,或设置选定日期和时间 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 VerifyData() 验证数据]]></content>
</entry>
<entry>
<title><![CDATA[GifImage Gif图片]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FgifImage%2Findex.html</url>
<content type="text"><![CDATA[Gif的wpf实现。 1public class GifImage : Image, IDisposable 属性 属性 描述 默认值 备注 Uri 图片Uri 案例1<hc:GifImage x:Name="GifImageMain" Stretch="None" Margin="32" Uri="/HandyControlDemo;component/Resources/Img/car_chase.gif"/> 不再使用 GifImage 时记得调用 Dispose 方法清理资源。]]></content>
</entry>
<entry>
<title><![CDATA[FlipClock 翻页时钟]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FflipClock%2Findex.html</url>
<content type="text"><![CDATA[一种3D形式的时钟方案。 1public class FlipClock : Control 属性 属性 描述 默认值 备注 NumberList 数字集合 DisplayTime 显示时间 案例1<hc:FlipClock Margin="32"/> 不再使用 FlipClock 时记得调用 Dispose 方法清理资源。 可借助 ViewBox 调节 FlipClock 大小。]]></content>
</entry>
<entry>
<title><![CDATA[FloatingBlock 漂浮块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FfloatingBlock%2Findex.html</url>
<content type="text"><![CDATA[可借助漂浮块实现特殊的点击效果。 1public class FloatingBlock : Control 依赖属性 属性 描述 默认值 备注 ToX X轴消失位置 0 ToY y轴消失位置 -100 Duration 动画持续时间 2s HorizontalOffset 横向偏移 0 VerticalOffset 纵向偏移 0 ContentTemplate 漂浮内容模板 Content 漂浮内容 案例1234567891011121314151617<StackPanel Margin="32" VerticalAlignment="Center"> <Button hc:IconElement.Geometry="{StaticResource ThumbsUpGeometry}" Width="180"> <hc:FloatingBlock.ContentTemplate> <DataTemplate> <Path Data="{StaticResource ThumbsUpGeometry}" Fill="{DynamicResource DangerBrush}" Width="16" Height="16"/> </DataTemplate> </hc:FloatingBlock.ContentTemplate> </Button> <Button Content="Good" hc:FloatingBlock.Content="Good" Width="180" Margin="0,10,0,0"/> <Button hc:IconElement.Geometry="{StaticResource ThumbsUpGeometry}" Width="180" Margin="0,10,0,0" hc:FloatingBlock.Duration="0:0:1" hc:FloatingBlock.VerticalOffset="-20" hc:FloatingBlock.ToX="50" hc:FloatingBlock.ToY="-80"> <hc:FloatingBlock.ContentTemplate> <DataTemplate> <Path Data="{StaticResource ThumbsUpGeometry}" Fill="{DynamicResource DangerBrush}" Width="16" Height="16"/> </DataTemplate> </hc:FloatingBlock.ContentTemplate> </Button></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Divider 分割线]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fdivider%2Findex.html</url>
<content type="text"><![CDATA[区隔内容的分割线。 1public class Divider : Control 属性 属性 描述 默认值 备注 Content 内容 Orientation 方向 ContentTemplate 内容模板 ContentStringFormat 内容字符串格式 ContentTemplateSelector 内容模板 LineStroke 分割线颜色 LineStrokeThickness 分割线粗细 1 LineStrokeDashArray 分割线间隙 案例12345678910111213141516171819202122232425262728293031323334<WrapPanel Margin="16"> <StackPanel Margin="16" Width="300"> <hc:Divider/> <hc:Divider Content="{ex:Lang Key={x:Static langs:LangKeys.Title}}"/> <hc:Divider Content="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Padding="10,0"/> <hc:Divider LineStrokeThickness="2" LineStroke="{DynamicResource DarkPrimaryBrush}"/> <hc:Divider LineStrokeDashArray="2,2"/> </StackPanel> <StackPanel Margin="16" Width="300"> <hc:Divider Content="{ex:Lang Key={x:Static langs:LangKeys.Title}}" HorizontalContentAlignment="Left"/> <hc:Divider Content="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Padding="10,0" HorizontalContentAlignment="Right"/> <StackPanel Orientation="Horizontal"> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,16,0,0"> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider LineStrokeThickness="2" Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider LineStrokeThickness="2" Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,16,0,0"> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider LineStrokeThickness="2" LineStroke="{DynamicResource DarkPrimaryBrush}" Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> <hc:Divider LineStrokeThickness="2" LineStroke="{DynamicResource DarkPrimaryBrush}" Orientation="Vertical" MaxHeight="16"/> <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/> </StackPanel> </StackPanel></WrapPanel>]]></content>
</entry>
<entry>
<title><![CDATA[GotoTop 回到顶部]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FgotoTop%2Findex.html</url>
<content type="text"><![CDATA[通过点击 GotoTop 可以让 ScrollView 或带有 ScrollView 的控件滚动到顶部位置. 1public class GotoTop : Button 属性 属性 描述 默认值 备注 Target ScrollView 或带有 ScrollView 的控件 Animated 是否使用动画 true AnimationTime 动画持续时间 0.2s HidingHeight 当 ScrollView 滚动该高度后 GotoTop 会被隐藏 0 AutoHiding 是否自动隐藏 true 案例12345678910111213<hc:SimplePanel Width="500" Height="400"> <hc:ScrollViewer Name="ScrollViewerDemo" IsInertiaEnabled="True" Margin="0,10,0,0"> <Border Height="2000" Margin="8,0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </hc:ScrollViewer> <hc:GotoTop Animated="True" AutoHiding="True" AnimationTime="500" Target="{Binding ElementName=ScrollViewerDemo}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,20"/></hc:SimplePanel>]]></content>
</entry>
<entry>
<title><![CDATA[Gravatar 头像]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fgravatar%2Findex.html</url>
<content type="text"><![CDATA[一种用户随机头像的实现方式. 1public class Gravatar : ContentControl 属性 属性 描述 默认值 备注 Generator 头像生成器 GithubGravatarGenerator Id 用户Id Source 用户头像 样式 样式 描述 GravatarBaseStyle 默认样式 GravatarCircle 圆形头像 GravatarCircleImg 圆形图片头像 案例12345678910111213141516171819<StackPanel Margin="32" Orientation="Horizontal"> <UniformGrid Rows="3" Columns="3" Width="240" Height="240"> <hc:Gravatar Id="User1"/> <hc:Gravatar Id="User2"/> <hc:Gravatar Style="{StaticResource GravatarCircleImg}"> <Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/> </hc:Gravatar> <hc:Gravatar Id="User4"/> <hc:Gravatar Id="User5" Style="{StaticResource GravatarCircle}"/> <hc:Gravatar Id="User6"/> <hc:Gravatar Style="{StaticResource GravatarCircle}" Source="/HandyControlDemo;component/Resources/Img/Album/1.jpg"/> <hc:Gravatar Id="User8"/> <hc:Gravatar Id="User9"/> </UniformGrid> <StackPanel Margin="16,0,0,0" Height="220" VerticalAlignment="Center"> <TextBox Text="User1" Name="TextBoxName" Width="180"/> <hc:Gravatar Height="180" Width="180" Id="{Binding Text,ElementName=TextBoxName}" Margin="10"/> </StackPanel></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[GlowWindow 辉光窗口]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FglowWindow%2Findex.html</url>
<content type="text"><![CDATA[边框具有辉光效果的窗口,代码提取自Visual Studio 1public class GlowWindow : Window 属性 属性 描述 默认值 备注 ActiveGlowColor 窗口激活时辉光颜色 InactiveGlowColor 窗口非激活时辉光颜色 案例12345678910111213141516171819<hc:GlowWindow x:Class="HandyControlDemo.Window.GlowWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:hc="https://handyorg.github.io/handycontrol" xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs" xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension" mc:Ignorable="d" Style="{StaticResource WindowGlow}" Background="{DynamicResource MainContentBackgroundBrush}" WindowStartupLocation="CenterScreen" Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ActiveGlowColor="{DynamicResource PrimaryColor}" Height="450" Width="800" Icon="/HandyControlDemo;component/Resources/Img/icon.ico"> <Border Background="{DynamicResource MainContentForegroundDrawingBrush}"/></hc:GlowWindow>]]></content>
</entry>
<entry>
<title><![CDATA[Grid 栅格]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fgrid%2Findex.html</url>
<content type="text"><![CDATA[栅格系统的wpf实现,web版本可参考 element/layout 1public class Row : Panel 1public class Col : ContentControl 属性Row 行 属性 描述 默认值 备注 Gutter 栅格间隔 0 Col 列 属性 描述 默认值 备注 Layout 布局方式 Offset 栅格左侧的间隔格数 0 Span 栅格占据的列数 24 IsFixed 该列是否固定 false 案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147<StackPanel Margin="32"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.BasicLayout}}" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/> <hc:Row Margin="0,20,0,0"> <hc:Col Span="24"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0"> <hc:Col Span="12"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="12"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0"> <hc:Col Span="8"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="8"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="8"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0"> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0"> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ColumnSpacing}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.HybridLayout}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="16"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="8"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="8"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="8"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="16"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="4"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ColumnOffset}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6" Offset="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="6" Offset="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Span="6" Offset="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <hc:Row Margin="0,20,0,0" Gutter="20"> <hc:Col Span="12" Offset="6"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ResponsiveLayout}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/> <hc:Row Margin="0,20,0,0" Gutter="10"> <hc:Col Layout="8,6,4,3,1"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Layout="4 6 8 9 11"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}"> <Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> <hc:Col Layout="{extension:ColLayout Xs=8, Sm=6, Md=4, Lg=3, Xl=1}"> <Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/> </hc:Col> </hc:Row></StackPanel> xaml中 Layout 写法的3种方式:Layout=”{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}”Layout=”4,6,8,9,11”Layout=”4 6 8 9 11”]]></content>
</entry>
<entry>
<title><![CDATA[Growl 信息通知]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fgrowl%2Findex.html</url>
<content type="text"><![CDATA[当需要在窗口的右侧区域,以从上到下排列通知信息时可以使用本控件。 控件效果 准备工作在指定的窗口右侧区域添加StackPanel容器123<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Right"> <StackPanel VerticalAlignment="Top" Margin="0,10,10,10"/></ScrollViewer> 为了方便滚动,一般会在外层包一个ScrollViewer,同时为了美观,我们设置ScrollViewer的VerticalScrollBarVisibility="Hidden",最好给StackPanel添加一个合适的Margin,也是为了美观。 基础用法第一步:将StackPanel设置为Growl的容器 123<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Right"> <StackPanel controls:Growl.GrowlParent="True" VerticalAlignment="Top" Margin="0,10,10,10"/></ScrollViewer> 注意代码中的controls:Growl.GrowlParent="True"。 第二步:调用Growl的相关接口来显示指定的消息 用例:Growl.Success("文件保存成功!"); 只在激活中的窗口显示信息通知为需要显示信息通知的窗口重写OnActivated和OnDeactivated方法,在OnActivated中调用Growl.SetGrowlParent(GrowlPanel, true);,在OnDeactivated中调用Growl.SetGrowlParent(GrowlPanel, false); 其中GrowlPanel是信息通知容器,类型推荐是StackPanel 这里需要说明一下,一个窗口对应一个StackPanel容器,Growl内部会维护一个变量用以存储这个容器,在每次通知触发时,会向这个容器中插入Growl的实例,也就是说,每次调用Growl.SetGrowlParent(GrowlPanel, true);时,GrowlPanel会成为内部的那个变量。 这种情况下就不需要在xaml中设置controls:Growl.GrowlParent="True"了。 在任意的StackPanel容器中显示信息通知第一步:为StackPanel容器赋予消息标记:SuccessMsg123<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Right"> <StackPanel controls:Growl.Token="SuccessMsg" VerticalAlignment="Top" Margin="0,10,10,10"/></ScrollViewer> 注意代码中的controls:Growl.Token="SuccessMsg"。 第二步:使用消息标记:SuccessMsg,并调用Growl的相关接口来显示指定的消息 用例:Growl.Success("文件保存成功!", "SuccessMsg"); 现在”文件保存成功!”这则消息只会发送到拥有”SuccessMsg”消息标记的StackPanel容器中。 属性 名称 说明 GrowlPanel 当前使用的消息容器 附加属性 名称 说明 Token 用于设置消息标记 GrowlParent 用于设置消息容器 方法 名称 说明 Success(string) 显示一则成功通知 Success(string, string) 使用指定的消息标记显示一则成功通知 Success(GrowlInfo) 使用完整的消息初始化模型显示一则成功通知 SuccessGlobal(string) 显示一则全局成功通知 SuccessGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局成功通知 Info(string) 显示一则消息通知 Info(string, string) 使用指定的消息标记显示一则消息通知 Info(GrowlInfo) 使用完整的消息初始化模型显示一则消息通知 InfoGlobal(string) 显示一则全局消息通知 InfoGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局消息通知 Warning(string) 显示一则警告通知 Warning(string, string) 使用指定的消息标记显示一则警告通知 Warning(GrowlInfo) 使用完整的消息初始化模型显示一则警告通知 WarningGlobal(string) 显示一则全局警告通知 WarningGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局警告通知 Error(string) 显示一则错误通知 Error(string, string) 使用指定的消息标记显示一则错误通知 Error(GrowlInfo) 使用完整的消息初始化模型显示一则错误通知 ErrorGlobal(string) 显示一则全局错误通知 ErrorGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局错误通知 Fatal(string) 显示一则严重通知 Fatal(string, string) 使用指定的消息标记显示一则严重通知 Fatal(GrowlInfo) 使用完整的消息初始化模型显示一则严重通知 FatalGlobal(string) 显示一则全局严重通知 FatalGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局严重通知 Ask(string, Func<bool, bool>) 显示一则询问通知 Ask(string, Func<bool, bool>, string) 使用指定的消息标记显示一则询问通知 Ask(GrowlInfo) 使用完整的消息初始化模型显示一则询问通知 AskGlobal(string, Func<bool, bool>) 显示一则全局询问通知 AskGlobal(GrowlInfo) 使用完整的消息初始化模型显示一则全局询问通知 Register(string, Panel) 为指定的容器注册消息标记 Unregister(string, Panel) 为指定的容器取消消息标记的注册 Unregister(Panel) 如果该容器注册了消息标记则取消注册 Unregister(string) 如果该消息标记有对应的容器则取消注册 Clear( ) 清空当前使用的消息容器中的消息 Clear(string) 清空含有指定消息标记的消息容器中的消息 Clear(Panel) 清空指定容器中的消息 ClearGlobal( ) 清空全局容器中的消息 注意Error 和 Fatal模式不会自动关闭。 FAQ Ask比较特殊,咋用? Ask方法主要的焦点为第二个参数,它的类型是Func<bool, bool>,我们先看示例代码:12345Growl.Ask(Properties.Langs.Lang.GrowlAsk, isConfirmed =>{ Growl.Info(isConfirmed.ToString()); return true;}); 使用Ask方法默认会显示“确认”和“取消”按钮,当点击“确认”时,上述代码中的isConfirmed的值为true,点击“取消”则为false,可以根据isConfirmed的值来采取相应操作,最后如果返回true则会关闭Growl通知,返回false则不关闭。]]></content>
</entry>
<entry>
<title><![CDATA[ImageBlock 图片块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FimageBlock%2Findex.html</url>
<content type="text"><![CDATA[图片块可用于将一张大图片分割成宽高一致的小图片,并按序播放形成类似于gif图片的效果. 1public class ImageBlock : FrameworkElement 属性 属性 描述 默认值 备注 StartColumn 播放开始列 0 StartRow 播放开始行 0 EndColumn 播放结束列 0 EndRow 播放结束行 0 IsPlaying 是否在播放 false Columns 需要分割后的列数 1 Rows 需要分割后的行数 1 Interval 小图片的播放间隔 1s Source 大图资源 案例123456789101112<UniformGrid Rows="3" Columns="4" Margin="32"> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="0" EndColumn="7" EndRow="0" Width="110" Height="128" IsPlaying="True"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="1" EndColumn="7" EndRow="1" Width="110" Height="128" IsPlaying="True"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="2" EndColumn="7" EndRow="2" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="3" EndColumn="7" EndRow="3" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.1" Columns="8" Rows="10" StartColumn="0" StartRow="4" EndColumn="7" EndRow="4" Width="110" Height="128" IsPlaying="True"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="5" EndColumn="7" EndRow="5" Width="110" Height="128" IsPlaying="True"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="6" EndColumn="7" EndRow="6" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.1" Columns="8" Rows="10" StartColumn="0" StartRow="7" EndColumn="7" EndRow="7" Width="110" Height="128" IsPlaying="True"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="8" EndColumn="7" EndRow="8" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/> <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="9" EndColumn="7" EndRow="9" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/></UniformGrid> 不再使用 ImageBlock 时记得调用 Dispose 方法清理资源。]]></content>
</entry>
<entry>
<title><![CDATA[HoneycombPanel 蜂窝布局]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FhoneycombPanel%2Findex.html</url>
<content type="text"><![CDATA[一种可以让子元素呈现蜂窝状布局的容器. 1public class HoneycombPanel : Panel 蜂窝布局方式其它元素将以第一个元素为起点,环绕式布局: 1234567891011 ● ● (7) (8) ● ● ● (6) (1) (9) ● ● ● ...(5) (0) (2) ● ● ... (4) (3) 案例123456789101112<ListBox Background="Transparent" BorderThickness="0" Style="{StaticResource ListBoxCustom}" ItemsSource="{Binding DataList}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <hc:HoneycombPanel hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <hc:Gravatar Style="{StaticResource GravatarCircle}" Margin="10" Source="{Binding Content}"/> </DataTemplate> </ListBox.ItemTemplate></ListBox>]]></content>
</entry>
<entry>
<title><![CDATA[ImageSelector 图片选择器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FimageSelector%2Findex.html</url>
<content type="text"><![CDATA[该控件封装了图片选择、展示、删除的一整套逻辑. 1public class ImageSelector : Control 属性 属性 描述 默认值 备注 Stretch 图片拉伸模式 Stretch.None Uri 图片资源 PreviewBrush 预览图画刷 StrokeThickness 边框粗细 StrokeDashArray 边框虚线数组 DefaultExt 默认图片后缀名 .jpg Filter 图片过滤字符串 (.jpg)|.jpg|(.png)|.png HasValue 是否有值 false 样式 样式 描述 ImageSelectorBaseStyle 默认样式 案例12345678<UniformGrid Columns="3" Margin="16"> <hc:ImageSelector Width="100" Height="100" Margin="16"/> <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50"/> <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5"/> <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" BorderBrush="{DynamicResource SuccessBrush}"/> <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5,10" BorderBrush="{DynamicResource DangerBrush}"/> <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="10" StrokeThickness="2" BorderThickness="2" BorderBrush="{DynamicResource PrimaryBrush}"/></UniformGrid>]]></content>
</entry>
<entry>
<title><![CDATA[ImageViewer 图片视图]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FimageViewer%2Findex.html</url>
<content type="text"><![CDATA[ImageViewer 是 ImageBrowser 的核心构件,它可以作为独立的控件使用,无需弹窗。 123456[TemplatePart(Name = ElementPanelMain, Type = typeof(Panel))][TemplatePart(Name = ElementCanvasSmallImg, Type = typeof(Canvas))][TemplatePart(Name = ElementBorderMove, Type = typeof(Border))][TemplatePart(Name = ElementBorderBottom, Type = typeof(Border))][TemplatePart(Name = ElementImageMain, Type = typeof(Image))]public class ImageViewer : Control 属性 属性 描述 默认值 备注 ShowImgMap 是否显示小地图 false ImageSource 图片资源 IsFullScreen 是否处于全屏显示中 false 案例1<hc:ImageViewer Background="{DynamicResource SecondaryRegionBrush}" Width="600" Height="330" ImageSource="/HandyControlDemo;component/Resources/Img/1.jpg"/>]]></content>
</entry>
<entry>
<title><![CDATA[ImageBrowser 图片浏览器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FimageBrowser%2Findex.html</url>
<content type="text"><![CDATA[可借助 ImageBrowser 简单地浏览单张图片. 1public class ImageBrowser : Window 案例构造函数传入图片地址后即可开始浏览图片: 1new ImageBrowser(new Uri("pack://application:,,,/Resources/Img/1.jpg")).Show() 功能功能面板截图如下: 从左到右功能依次为:保存至本地、使用系统默认程序打开该图片、缩小图片、放大图片、原始大小、左转图片、右转图片.]]></content>
</entry>
<entry>
<title><![CDATA[Loading 加载条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Floading%2Findex.html</url>
<content type="text"><![CDATA[耗时操作时显示动效,目前包含圆形和直线两种加载条。相关博文:《WPF 控件库——仿制Windows10的进度条》 1public abstract class LoadingBase : ContentControl 1public class LoadingLine : LoadingBase 1public class LoadingCircle : LoadingBase LoadingBase 属性 属性 描述 默认值 备注 IsRunning 是否处于加载 true DotCount 圆点数目 5 DotInterval 圆点间隙 10 DotBorderBrush 圆点边框颜色 DotBorderThickness 圆点边框粗细 0 DotDiameter 圆点半径 6 DotSpeed 一遍循环所用时间 4s DotDelayTime 各点的动画延迟 80ms LoadingCircle 属性 属性 描述 默认值 备注 DotOffSet 圆点偏移 20 NeedHidden 圆点运动中途是否需要隐藏 true 案例12345678910<StackPanel Width="600" Margin="32" VerticalAlignment="Center"> <hc:LoadingLine/> <hc:LoadingLine Margin="0,30" Foreground="BlueViolet" Style="{StaticResource LoadingLineLarge}"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <hc:LoadingCircle/> <Border VerticalAlignment="Center" Margin="32,0,0,0" Background="{DynamicResource PrimaryBrush}" CornerRadius="10"> <hc:LoadingCircle Style="{StaticResource LoadingCircleLight}" Margin="10"/> </Border> </StackPanel></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Magnifier 放大镜]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fmagnifier%2Findex.html</url>
<content type="text"><![CDATA[借助 Magnifier 可对任意控件局部放大. 12[TemplatePart(Name = ElementVisualBrush, Type = typeof(VisualBrush))]public class Magnifier : AdornerElement 属性 属性 描述 默认值 备注 HorizontalOffset 相对鼠标的水平偏移 0 VerticalOffset 相对鼠标的垂直偏移 0 Scale 缩放因子 5.0 案例1<Image Margin="16" hc:Magnifier.Instance="{x:Static hc:Magnifier.Default}" Source="/HandyControlDemo;component/Resources/Img/b1.jpg" Stretch="None"/> 12345<Image Margin="16" Source="/HandyControlDemo;component/Resources/Img/b1.jpg" Stretch="None"> <hc:Magnifier.Instance> <hc:Magnifier Scale="6" HorizontalOffset="-16" VerticalOffset="-16"/> </hc:Magnifier.Instance></Image>]]></content>
</entry>
<entry>
<title><![CDATA[MessageBox 消息对话框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FmessageBox%2Findex.html</url>
<content type="text"><![CDATA[HC重写了一套消息对话框,使用方式和原生一致. 1public sealed class MessageBox : Window 属性 属性 描述 默认值 备注 Message 消息内容 Image 消息类型示意图 ImageBrush 消息类型示意图颜色 ShowImage 是否显示消息类型示意图 false 方法 名称 说明 Success(string, string) 显示一则成功消息 Info(string, string) 显示一则通知消息 Warning(string, string) 显示一则警告消息 Error(string, string) 显示一则错误消息 Fatal(string, string) 显示一则严重消息 Ask(string, string) 显示一则询问消息 Show(MessageBoxInfo) 显示一则自定义消息 Show(string, string, MessageBoxButton, MessageBoxImage, MessageBoxResult) 显示一则消息 Show(Window, string, string, MessageBoxButton, MessageBoxImage, MessageBoxResult) 显示一则消息 案例1MessageBox.Show(Properties.Langs.Lang.GrowlAsk, Properties.Langs.Lang.Title, MessageBoxButton.YesNo, MessageBoxImage.Question);]]></content>
</entry>
<entry>
<title><![CDATA[OutlineText 轮廓文本]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FoutlineText%2Findex.html</url>
<content type="text"><![CDATA[OutlineText 可以使文本突出显示. 1public class OutlineText : FrameworkElement 属性 属性 描述 默认值 备注 StrokePosition 轮廓位置 StrokePosition.Center Text 文本 TextAlignment 文本对齐方式 TextAlignment.Left TextTrimming 文本截断方式 TextTrimming.None TextWrapping 文本换行方式 TextWrapping.NoWrap Fill 文本颜色 Stroke 轮廓颜色 StrokeThickness 轮廓粗细 0 FontFamily 字体 FontSize 字体大小 FontStretch 字体变形方式 FontStyle 字体风格 FontWeight 字体粗细 案例123456789<StackPanel Margin="32" Width="400"> <hc:OutlineText TextWrapping="Wrap" Fill="{DynamicResource PrimaryTextBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=20}"/> <hc:OutlineText Margin="0,10,0,0" FontSize="30" Fill="{DynamicResource SuccessBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=8}"/> <hc:OutlineText Margin="0,10,0,0" Fill="{DynamicResource PrimaryTextBrush}" FontSize="30" FontStyle="Italic" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=8}"/> <hc:OutlineText Margin="0,10,0,0" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" FontSize="50" StrokeThickness="2" Fill="{DynamicResource DangerBrush}" Stroke="{DynamicResource PrimaryBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/> <hc:OutlineText Margin="0,10,0,0" FontSize="80" FontWeight="Bold" StrokeThickness="4" Fill="{DynamicResource PrimaryBrush}" Stroke="{DynamicResource DangerBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/> <hc:OutlineText Margin="0,10,0,0" StrokePosition="Outside" FontSize="80" FontWeight="Bold" StrokeThickness="4" Fill="{DynamicResource PrimaryBrush}" Stroke="{DynamicResource DangerBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/> <hc:OutlineText Margin="0,10,0,0" StrokePosition="InSide" FontSize="80" FontWeight="Bold" StrokeThickness="4" Fill="{DynamicResource PrimaryBrush}" Stroke="{DynamicResource DangerBrush}" Text="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Notification 桌面通知]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fnotification%2Findex.html</url>
<content type="text"><![CDATA[用于在桌面显示一则富内容消息. 1public sealed class Notification : System.Windows.Window 方法 名称 说明 Show(object, ShowAnimation, bool) 显示桌面通知(消息内容, 动画效果类型, 是否保持打开) 案例123456789101112131415<Border x:Class="HandyControlDemo.UserControl.AppNotification" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:hc="https://handyorg.github.io/handycontrol" Background="White" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Width="320" Height="518"> <hc:SimplePanel> <Path Margin="0,36,0,0" VerticalAlignment="Top" Width="70" Height="70" Data="{StaticResource LogoGeometry}" Fill="#f06632"/> <TextBlock Text="HandyControl" FontSize="30" Foreground="{StaticResource PrimaryBrush}" HorizontalAlignment="Center" Margin="0,122,0,0" VerticalAlignment="Top"/> <Button Command="hc:ControlCommands.CloseWindow" CommandParameter="{Binding RelativeSource={RelativeSource Self}}" Content="{hc:Lang Key={x:Static hc:LangKeys.Close}}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="10,0,10,10"/> </hc:SimplePanel></Border> 12345678910namespace HandyControlDemo.UserControl{ public partial class AppNotification { public AppNotification() { InitializeComponent(); } }} 1Notification.Show(new AppNotification(), ShowAnimation.Fade, true)]]></content>
</entry>
<entry>
<title><![CDATA[Pagination 页码条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fpagination%2Findex.html</url>
<content type="text"><![CDATA[当数据量过多时,使用分页分解数据. 123456789[TemplatePart(Name = ElementButtonLeft, Type = typeof(Button))][TemplatePart(Name = ElementButtonRight, Type = typeof(Button))][TemplatePart(Name = ElementButtonFirst, Type = typeof(RadioButton))][TemplatePart(Name = ElementMoreLeft, Type = typeof(FrameworkElement))][TemplatePart(Name = ElementPanelMain, Type = typeof(Panel))][TemplatePart(Name = ElementMoreRight, Type = typeof(FrameworkElement))][TemplatePart(Name = ElementButtonLast, Type = typeof(RadioButton))][TemplatePart(Name = ElementButtonLast, Type = typeof(NumericUpDown))]public class Pagination : Control 属性 属性 描述 默认值 备注 MaxPageCount 最大页数 1 DataCountPerPage 每页的数据量 20 PageIndex 页码 1 MaxPageInterval 当前选中的按钮距离左右两个方向按钮的最大间隔(4表示间隔4个按钮,如果超过则用省略号表示) 3 IsJumpEnabled 是否显示跳转框 false 事件 名称 说明 PageUpdated 页码改变时触发 案例1<hc:Pagination MaxPageCount="10" PageIndex="5" IsJumpEnabled="True"/> 当页码为1时,页码条整体不会显示。]]></content>
</entry>
<entry>
<title><![CDATA[NotifyIcon 托盘图标]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FnotifyIcon%2Findex.html</url>
<content type="text"><![CDATA[系统托盘图标的wpf实现方式. 1public class NotifyIcon : FrameworkElement, IDisposable 属性 属性 描述 默认值 备注 Token 用于设置消息标记 用于在指定的托盘图标上显示气泡提示 Text 鼠标提示文本 Icon 图标 ContextContent 右键弹出内容 BlinkInterval 闪烁间隔 500ms IsBlink 是否闪烁 false 方法 名称 说明 Init() 初始化 Register(string, NotifyIcon) 为指定的托盘图标注册消息标记 Unregister(string, NotifyIcon) 为指定的托盘图标取消消息标记的注册 Unregister(NotifyIcon) 如果该托盘图标注册了消息标记则取消注册 Unregister(string) 如果该消息标记有对应的托盘图标则取消注册 ShowBalloonTip(string, string, NotifyIconInfoType, string) 显示气泡提示 ShowBalloonTip(string, string, NotifyIconInfoType) 显示气泡提示 CloseContextControl() 关闭上下文控件 事件 名称 说明 Click 单击时触发 MouseDoubleClick 双击时触发 案例1<hc:NotifyIcon Text="HandyControl" IsBlink="true" Visibility="Visible" Icon="/HandyControlDemo;component/Resources/Img/icon-white.ico"/>]]></content>
</entry>
<entry>
<title><![CDATA[PasswordBox 密码框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpasswordBox%2Findex.html</url>
<content type="text"><![CDATA[表示用于输入和处理密码的控件。 123[TemplatePart(Name = ElementPasswordBox, Type = typeof(System.Windows.Controls.PasswordBox))][TemplatePart(Name = ElementTextBox, Type = typeof(System.Windows.Controls.TextBox))]public class PasswordBox : Control, IDataInput 创建PasswordBox1<hc:PasswordBox /> 1var passwordBox = new PasswordBox(); 输入密码可以通过文本框输入密码,也可以在XAML钟或代码中这样设置日期。 1<hc:PasswordBox Password="123456"/> 1passwordBox.Password = "123456"; 显示密码PasswordBox控件可以主动显示已输入的密码。将ShowEyeButton设置为true,PasswordBox将显示一个“眼睛”的按钮,点击这个按钮即可显示已输入的密码。 1<hc:PasswordBox ShowClearButton="True"/> 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到PasswordBox,以向用户指示其用途。 12<hc:PasswordBox hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr2}" 属性 属性 描述 Password 获取或设置 PasswordBox 当前保留的密码。 PasswordChar 获取或设置 PasswordBox 的掩码字符。 ShowEyeButton 获取或设置是否显示一个“眼睛”的按钮,点击可以显示密码。 ShowPassword 获取或设置是否显示密码。 Text 获取由 TimePicker 显示的文本,或设置选定的时间 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 Clear() 清除 Password 属性的值。 Paste() 用剪贴板中的内容替换 PasswordBox 中的当前选定内容。 SelectAll() 选择 PasswordBox 中的全部内容。 VerifyData() 验证数据。]]></content>
</entry>
<entry>
<title><![CDATA[NumericUpDown 数值选择控件]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FnumericUpDown%2Findex.html</url>
<content type="text"><![CDATA[NumericUpDown 控件看起来像一对用户可以单击来调整值的箭头按钮和TextBox的组合,该控件显示并设置数值(Value)。 用户可以通过单击向上和向下箭头,或通过在控件的TextBox部分中键入一个数字来改变Value。 12[TemplatePart(Name = ElementTextBox, Type = typeof(DatePickerTextBox))]public class DatePicker : System.Windows.Controls.DatePicker, IDataInput 创建NumericUpDown并设置Value1<hc:NumericUpDown Value="100"/> 12var numericUpDown = new NumericUpDown();numericUpDown.Value = 100; 生成的NumericUpDown如下图所示: 设置DecimalPlaces如果需要改变Value显示的小数位数,可以改变DecimalPlaces。DecimalPlaces是一个 int? 类型,当它为null时不限制显示的小数位数,否则显示的小数位数为DecimalPlaces的Value。 1<hc:NumericUpDown DecimalPlaces="2" Value="100.12345"/> 12numericUpDown.Value = 10.12345;numericUpDown.DecimalPlaces = 2; 设置Increment可以通设置Increment改变单击一下按钮时增加或减少的数量。 1<hc:NumericUpDown Value="100" Increment="10"/> 1numericUpDown.Increment = 10; 设置上限和下限可以通设置Maximum和Minimum限制Value的上限和下限。 1<hc:NumericUpDown Maximum="500" Minimum="10"/> 12numericUpDown.Minimum = 10;numericUpDown.Maximum = 1000; 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到NumericUpDown,以向用户指示其用途。要使用这两个附加属性,需要先应用 NumericUpDownPlus 样式。 123<hc:NumericUpDown hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr1}" Style="{StaticResource NumericUpDownExtend}" /> 属性 属性 描述 Value 获取或设置当前值 Maximum 获取或设置最大允许值 Minimum 获取或设置最小允许值 Increment 获取或设置单击向上或向下按钮时,数字显示框(也称作 up-down 控件)递增或递减的值。 DecimalPlaces 获取或设置NumericUpDown中要显示的十进制位数。 此属性不会影响 Value 属性。 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 VerifyData() 验证数据 事件 事件 描述 ValueChanged 在以某种方式更改 Value 属性后发生。]]></content>
</entry>
<entry>
<title><![CDATA[PinBox PIN码框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpinBox%2Findex.html</url>
<content type="text"><![CDATA[密码框的另一种形式. 12[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class PinBox : Control 属性 属性 描述 默认值 备注 Password 密码 出于安全考虑,无法绑定 PasswordChar 掩码字符 ● Length 密码长度 4 最小值为4 ItemMargin 单元框间隔 ItemWidth 单元框宽度 ItemHeight 单元框高度 事件 名称 说明 Completed 输入完成时触发 案例1234<StackPanel Margin="32" VerticalAlignment="Center" hc:PinBox.Completed="PinBox_OnCompleted"> <hc:PinBox Length="4" Password="1234"/> <hc:PinBox Length="6" Password="123456" Margin="0,16,0,0" PasswordChar="❤"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[PopTip 气泡提示]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpopTip%2Findex.html</url>
<content type="text"><![CDATA[常用于展示鼠标 hover 时的提示信息. 1public class Poptip : AdornerElement 属性 属性 描述 默认值 备注 HitMode 触发方式 HitMode.Hover Content 提示内容 ContentTemplate 提示内容模板 ContentStringFormat 提示内容文本格式 ContentTemplateSelector 提示内容模板选择器 Offset 偏移 6 PlacementType 出现位置 PlacementType.Top IsOpen 是否打开 false 案例12345<Button> <hc:Poptip.Instance> <hc:Poptip Content="{ex:Lang Key={x:Static langs:LangKeys.Text}}" PlacementType="TopLeft"/> </hc:Poptip.Instance></Button> 1<ToggleButton hc:Poptip.HitMode="None" hc:Poptip.IsOpen="{Binding IsChecked,RelativeSource={RelativeSource Self}}" hc:Poptip.Content="{ex:Lang Key={x:Static langs:LangKeys.Text}}" hc:Poptip.Placement="RightTop"/>]]></content>
</entry>
<entry>
<title><![CDATA[PopupWindow 弹出窗口]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpopupWindow%2Findex.html</url>
<content type="text"><![CDATA[PopupWindow 相对于 PopTip 能更灵活地控制弹出元素的位置. PopupWindow 在未来版本中可能会作废. 123[TemplatePart(Name = ElementMainBorder, Type = typeof(Border))][TemplatePart(Name = ElementTitleBlock, Type = typeof(TextBlock))]public class PopupWindow : System.Windows.Window 属性 属性 描述 默认值 备注 PopupElement 弹出元素 ShowTitle 是否显示标题 true ShowCancel 是否显示取消按钮 false ShowBorder 是否显示边框 false 方法 名称 说明 Show(FrameworkElement, bool) 显示窗口(弹出元素, 是否带有背景) Show(System.Windows.Window, Point) 显示窗口(相对窗口, 偏移坐标) Show(string) 显示窗口(弹出信息) ShowDialog(FrameworkElement, bool) 模态化显示窗口(弹出元素, 是否带有背景) ShowDialog(string, string title, bool) 模态化显示窗口(弹出信息, 标题, 是否显示取消按钮)]]></content>
</entry>
<entry>
<title><![CDATA[PreviewSlider 预览滑块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpreviewSlider%2Findex.html</url>
<content type="text"><![CDATA[可借助预览滑块向用户反馈在不同位置的状态信息. 123[TemplatePart(Name = TrackKey, Type = typeof(Track))][TemplatePart(Name = ThumbKey, Type = typeof(FrameworkElement))]public class PreviewSlider : Slider 属性 属性 描述 默认值 备注 PreviewContent 预览内容 PreviewContentOffset 预览内容偏移 9 附加属性 属性 描述 默认值 备注 PreviewPosition 预览位置 0 事件 名称 说明 PreviewPositionChanged 预览位置改变时触发 案例12345<hc:PreviewSlider Name="PreviewSliderHorizontal" Width="300" Value="500" Maximum="1000"> <hc:PreviewSlider.PreviewContent> <Label Style="{StaticResource LabelPrimary}" Content="{Binding Path=(hc:PreviewSlider.PreviewPosition),RelativeSource={RelativeSource Self}}" ContentStringFormat="#0.00"/> </hc:PreviewSlider.PreviewContent></hc:PreviewSlider>]]></content>
</entry>
<entry>
<title><![CDATA[ProgressButton 进度按钮]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FprogressButton%2Findex.html</url>
<content type="text"><![CDATA[在切换按钮的基础上附带了进度显示. 1public class ProgressButton : ToggleButton 属性 属性 描述 默认值 备注 ProgressStyle 进度条样式 Progress 进度 0 案例12345678<StackPanel> <hc:ProgressButton IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/> <hc:ProgressButton Style="{StaticResource ProgressButtonPrimary}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/> <hc:ProgressButton Style="{StaticResource ProgressButtonSuccess}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/> <hc:ProgressButton Style="{StaticResource ProgressButtonInfo}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/> <hc:ProgressButton Style="{StaticResource ProgressButtonWarning}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/> <hc:ProgressButton Style="{StaticResource ProgressButtonDanger}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Rate 评分]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Frate%2Findex.html</url>
<content type="text"><![CDATA[当对评价进行展示或对事物进行快速的评级操作时,可使用评分控件. 1234[DefaultProperty("Items")][ContentProperty("Items")][TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class SimpleItemsControl : Control 1public class RegularItemsControl : SimpleItemsControl 1public class Rate : RegularItemsControl 属性 属性 描述 默认值 备注 AllowHalf 是否允许半选 false AllowClear 是否允许再次点击后清除 true Icon 图标 Count star 总数 5 DefaultValue 默认值 0 Value 当前评分 0 Text 评分文字 ShowText 是否显示评分文字 false IsReadOnly 是否只读 false Value 当前评分 0 事件 名称 说明 ValueChanged 评分改变时触发 案例1234567<StackPanel Width="170"> <hc:Rate Value="2"/> <hc:Rate Value="5" Count="6" Margin="0,16,0,0" Foreground="{DynamicResource SuccessBrush}"/> <hc:Rate DefaultValue="3" IsReadOnly="True" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource WarningBrush}"/> <hc:Rate DefaultValue="1" AllowClear="False" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/> <hc:Rate Value="4.5" AllowHalf="True" ShowText="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[PropertyGrid 属性编辑器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FpropertyGrid%2Findex.html</url>
<content type="text"><![CDATA[可自动为模型对象中的属性生成与之相匹配的编辑器集合. 123[TemplatePart(Name = ElementItemsControl, Type = typeof(ItemsControl))][TemplatePart(Name = ElementSearchBar, Type = typeof(SearchBar))]public class PropertyGrid : Control 属性 属性 描述 默认值 备注 PropertyResolver 属性解析器 new PropertyResolver SelectedObject 模型对象 Description 描述 MaxTitleWidth 最大标题宽度 0 MinTitleWidth 最小标题宽度 0 自带编辑器 名称 说明 DatePropertyEditor 日期编辑器 DateTimePropertyEditor 日期时间编辑器 EnumPropertyEditor 枚举编辑器 HorizontalAlignmentPropertyEditor 水平对齐方式编辑器 ImagePropertyEditor 图片编辑器 NumberPropertyEditor 数字编辑器 PlainTextPropertyEditor 纯文本编辑器 ReadOnlyTextPropertyEditor 只读文本编辑器 SwitchPropertyEditor 布尔编辑器(开关风格) TimePropertyEditor 时间编辑器 VerticalAlignmentPropertyEditor 垂直对齐方式编辑器 事件 名称 说明 SelectedObjectChanged 当模型对象改变时触发 案例基础用法1234567891011121314151617181920212223242526public class PropertyGridDemoModel{ [Category("Category1")] public string String { get; set; } [Category("Category2")] public int Integer { get; set; } [Category("Category2")] public bool Boolean { get; set; } [Category("Category1")] public Gender Enum { get; set; } public HorizontalAlignment HorizontalAlignment { get; set; } public VerticalAlignment VerticalAlignment { get; set; } public ImageSource ImageSource { get; set; }}public enum Gender{ Male, Female} 12345678DemoModel = new PropertyGridDemoModel{ String = "TestString", Enum = Gender.Female, Boolean = true, Integer = 98, VerticalAlignment = VerticalAlignment.Stretch}; 1<hc:PropertyGrid Width="500" SelectedObject="{Binding DemoModel}"/> 自定义编辑器我们以 PlainTextPropertyEditor 为例,当需要自定义编辑器,我们可以从 PropertyEditorBase 继承,并重写某些方法,这些方法的定义如下表所示: 名称 说明 备注 CreateElement 创建具体操作控件 必须重写 CreateBinding 为具体操作控件创建数据绑定 GetDependencyProperty 获取具体操作控件中需要绑定的依赖属性 必须重写 GetBindingMode 获取绑定模式 GetUpdateSourceTrigger 获取更新数据源的触发模式 GetConverter 获取绑定时需要使用的转换器 纯文本编辑器的具体操作控件可以是 TextBox: 1234public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox{ IsReadOnly = propertyItem.IsReadOnly}; 需要绑定的依赖属性应该是 TextProperty: 1public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty; 最后整体的代码如下: 123456789public class PlainTextPropertyEditor : PropertyEditorBase{ public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox { IsReadOnly = propertyItem.IsReadOnly }; public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty;}]]></content>
</entry>
<entry>
<title><![CDATA[ScrollViewer 滚动视图]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FscrollViewer%2Findex.html</url>
<content type="text"><![CDATA[对原生滚动视图的扩展. 1public class ScrollViewer : System.Windows.Controls.ScrollViewer 属性 属性 描述 默认值 备注 Orientation 滚动方向 Orientation.Vertical CanMouseWheel 是否响应鼠标滚轮操作 true IsInertiaEnabled 是否支持惯性滚动 false IsPenetrating 是否可以穿透点击 false 案例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Border BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <hc:ScrollViewer Orientation="Horizontal" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" IsInertiaEnabled="True"> <StackPanel Orientation="Horizontal"> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> </StackPanel> </hc:ScrollViewer> </Border> <Border Grid.Row="1" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Margin="0,16,0,0"> <hc:ScrollViewer IsInertiaEnabled="True"> <WrapPanel Orientation="Horizontal"> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> </WrapPanel> </hc:ScrollViewer> </Border></Grid>]]></content>
</entry>
<entry>
<title><![CDATA[Screenshot 截图]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fscreenshot%2Findex.html</url>
<content type="text"><![CDATA[可通过快捷键触发,将整个屏幕或者指定区域内容保存为图片. 1public class Screenshot 方法 名称 说明 Start( ) 开始截图 事件 名称 说明 Snapped 截图完成时触发 案例1new Screenshot().Start();]]></content>
</entry>
<entry>
<title><![CDATA[RunningBlock 滚动块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FrunningBlock%2Findex.html</url>
<content type="text"><![CDATA[滚动块可用于对连续性内容进行轮播. 123[TemplatePart(Name = ElementContent, Type = typeof(FrameworkElement))][TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class RunningBlock : ContentControl 属性 描述 默认值 备注 Runaway 滚动内容是否可以脱离视野 true AutoRun 是否自动触发滚动 false 当显示区域不够时才触发滚动 Orientation 滚动方向 Orientation.Horizontal Duration 滚动一个周期需要的时间 5s Speed 滚动速度 NaN 如果设定了值,则会覆盖Duration的值 IsRunning 是否处于滚动中 true AutoReverse 是否反转滚动 false 案例123456789101112131415161718<StackPanel Margin="32" VerticalAlignment="Center"> <hc:RunningBlock Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/> <hc:RunningBlock Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=10}" FontSize="20" FontWeight="Bold" Foreground="OrangeRed" Duration="0:0:10" Margin="0,16,0,0"/> <hc:RunningBlock Margin="0,16,0,0" Duration="0:0:20" IsRunning="{Binding IsMouseOver,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2BooleanReConverter}}"> <StackPanel Orientation="Horizontal"> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/1.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/2.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/3.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/4.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/5.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/6.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/7.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/8.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/9.gif" Margin="10,0" Width="30" Height="30"/> <hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/10.gif" Margin="10,0" Width="30" Height="30"/> </StackPanel> </hc:RunningBlock></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[RangeSlider 范围滑块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FrangeSlider%2Findex.html</url>
<content type="text"><![CDATA[支持选择某一数值范围. 1public class TwoWayRangeBase : Control 123[DefaultEvent("ValueChanged"), DefaultProperty("Value")][TemplatePart(Name = ElementTrack, Type = typeof(Track))]public class RangeSlider : TwoWayRangeBase 属性 属性 描述 默认值 备注 Minimum 最小值 0 Maximum 最大值 0 ValueStart 选中范围的开始 0 ValueEnd 选中范围的结束 0 LargeChange 单次最大改变值 1 SmallChange 单次最小改变值 0.1 Orientation 方向 Orientation.Horizontal IsDirectionReversed 是否反向 false Delay 重复点击前的等待时间 Interval 重复点击触发时间间隔 AutoToolTipPlacement 自动工具提示位置 AutoToolTipPlacement.None AutoToolTipPrecision 自动工具提示小数位数 0 IsSnapToTickEnabled 是否自动将 Thumb 移动到最近的刻度线 false TickPlacement 刻度线的位置 TickPlacement.None TickFrequency 刻度线之间的间隔 1 Ticks 刻度线绘制集合 IsMoveToPointEnabled Thumb 是否能够立即移动至鼠标点击的位置 false 事件 名称 说明 ValueChanged 选中范围改变时触发 案例1234567891011121314<StackPanel Margin="32" Orientation="Horizontal"> <StackPanel> <hc:RangeSlider Width="400" IsSnapToTickEnabled="True" ValueStart="2" ValueEnd="8"/> <hc:RangeSlider Width="400" IsSnapToTickEnabled="True" ValueEnd="3" Margin="0,32,0,0" IsEnabled="False"/> <hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Top" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" TickPlacement="BottomRight" Margin="0,32,0,0"/> <hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Bottom" hc:TipElement.StringFormat="#0.00" ValueEnd="5" TickPlacement="Both" Margin="0,32,0,0"/> </StackPanel> <StackPanel Margin="32,0,0,0" Orientation="Horizontal"> <hc:RangeSlider Height="400" IsSnapToTickEnabled="True" ValueEnd="8" Orientation="Vertical"/> <hc:RangeSlider Height="400" IsSnapToTickEnabled="True" ValueEnd="3" Margin="32,0,0,0" IsEnabled="False" Orientation="Vertical"/> <hc:RangeSlider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Left" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" TickPlacement="BottomRight" Margin="32,0,0,0" Orientation="Vertical"/> <hc:RangeSlider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Right" hc:TipElement.StringFormat="#0.00" ValueEnd="5" TickPlacement="Both" Margin="32,0" Orientation="Vertical"/> </StackPanel></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[RelativePanel 相对布局]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FrelativePanel%2Findex.html</url>
<content type="text"><![CDATA[可以使用 RelativePanel 的附加属性对其内容进行相对布局.详见:RelativePanel Class 1public class RelativePanel : Panel 属性 属性 描述 默认值 备注 Above 使此元素位于目标元素的上方 AlignBottomWith 使此元素与目标元素底部对齐 AlignBottomWithPanel 使此元素与Panel底部对齐 false AlignHorizontalCenterWith 使此元素与目标元素水平居中对齐 AlignHorizontalCenterWithPanel 使此元素与Panel水平居中对齐 false AlignLeftWith 使此元素与目标元素左侧对齐 AlignLeftWithPanel 使此元素与Panel左侧对齐 false AlignRightWith 使此元素与目标元素右侧对齐 AlignRightWithPanel 使此元素与Panel右侧对齐 false AlignTopWith 使此元素与目标元素顶部对齐 AlignTopWithPanel 使此元素与Panel顶侧对齐 false AlignVerticalCenterWith 使此元素与目标元素垂直居中对齐 AlignVerticalCenterWithPanel 使此元素与Panel垂直居中对齐 false Below 使此元素位于目标元素的下方 LeftOf 使此元素位于目标元素的左侧 RightOf 使此元素位于目标元素的右侧 案例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<hc:RelativePanel Width="620" Height="700" Margin="32"> <Border Name="Rect1" Background="{DynamicResource DangerBrush}" Height="50" Width="50"> <TextBlock Text="Rect1" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect2" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignHorizontalCenterWithPanel="True"> <TextBlock Text="Rect2" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect3" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignRightWithPanel="True"> <TextBlock Text="Rect3" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect4" Background="{DynamicResource DangerBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True"> <TextBlock Text="Rect4" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect5" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignHorizontalCenterWithPanel="True"> <TextBlock Text="Rect5" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect6" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignRightWithPanel="True"> <TextBlock Text="Rect6" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect7" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect1}"> <TextBlock Text="Rect7 (RightOf Rect1)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect8" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect7}"> <TextBlock Text="Rect8 (Below Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect9" Background="{DynamicResource PrimaryBrush}" Height="140" Width="460" hc:RelativePanel.AlignHorizontalCenterWithPanel="True" hc:RelativePanel.AlignVerticalCenterWithPanel="True"> <TextBlock Text="Rect9" Padding="10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Border> <Border Name="Rect10" Background="{DynamicResource DangerBrush}" Width="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect9}" hc:RelativePanel.AlignVerticalCenterWith="{Binding ElementName=Rect9}"> <TextBlock Text="Rect14 (RightOf Rect9, AlignVerticalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.LayoutTransform> <TransformGroup> <RotateTransform Angle="-90"/> </TransformGroup> </TextBlock.LayoutTransform> </TextBlock> </Border> <Border Name="Rect11" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.AlignBottomWith="{Binding ElementName=Rect9}" hc:RelativePanel.AlignHorizontalCenterWith="{Binding ElementName=Rect9}"> <TextBlock Text="Rect11 (AlignBottomWith Rect9, AlignHorizontalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect12" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect8}" hc:RelativePanel.AlignLeftWith="{Binding ElementName=Rect7}"> <TextBlock Text="Rect12 (Below Rect8, AlignLeftWith Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect13" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect12}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect12}"> <TextBlock Text="Rect13 (Below Rect12, AlignRightWith Rect12)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect14" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Above="{Binding ElementName=Rect9}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect9}"> <TextBlock Text="Rect14 (Above Rect9, AlignRightWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Name="Rect15" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.LeftOf="{Binding ElementName=Rect2}" hc:RelativePanel.AlignTopWith="{Binding ElementName=Rect9}"> <TextBlock Text="Rect15 (LeftOf Rect2, AlignTopWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border></hc:RelativePanel>]]></content>
</entry>
<entry>
<title><![CDATA[SearchBar 搜索栏]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsearchBar%2Findex.html</url>
<content type="text"><![CDATA[通过键入关键字触发搜索. 1public class SearchBar : TextBox, ICommandSource 属性 属性 描述 默认值 备注 IsRealTime 是否实时搜索 false 如果为true则每次输入都会自动触发搜索开始事件 Command 命令 CommandParameter 命令参数 CommandTarget 命令目标元素 附加属性 属性 描述 默认值 备注 InfoElement.Placeholder 占位符 InfoElement.Necessary 是否必填 false InfoElement.Symbol 必填标记 ● InfoElement.ContentHeight 内容高度 30 标题在上时可用 InfoElement.MinContentHeight 最小内容高度 30 标题在上时可用 TitleElement.Title 标题 TitleElement.TitlePlacement 标题对齐方式 TitlePlacementType.Top TitleElement.TitleWidth 标题宽度 120 事件 名称 说明 SearchStarted 搜索开始时触发 样式 样式 描述 SearchBarBaseStyle 默认样式 SearchBarExtendBaseStyle 默认扩展样式 SearchBarPlusBaseStyle 默认加强样式 SearchBarExtend 扩展样式 SearchBarPlus 加强样式 案例1234567891011121314151617181920<StackPanel Margin="32" Orientation="Horizontal"> <StackPanel> <hc:SearchBar Command="{Binding SearchCmd}" CommandParameter="{Binding Text,RelativeSource={RelativeSource Self}}"/> <hc:SearchBar Margin="0,32,0,0" IsEnabled="False"/> <hc:SearchBar hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Style="{StaticResource SearchBarExtend}"/> <hc:SearchBar hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarExtend}"/> <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarExtend}" Margin="0,32,0,0"/> <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarExtend}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/> </StackPanel> <StackPanel Margin="32,0,0,0"> <hc:SearchBar Name="SearchBarCustomVerify" ShowClearButton="True" Style="{StaticResource SearchBarPlus}"/> <hc:SearchBar Margin="0,32,0,0" IsEnabled="False" Style="{StaticResource SearchBarPlus}"/> <hc:SearchBar ShowClearButton="True" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Style="{StaticResource SearchBarPlus}"/> <hc:SearchBar TextType="Mail" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterEmail}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarPlus}"/> <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarPlus}" Margin="0,32,0,0"/> <hc:SearchBar ShowClearButton="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/> </StackPanel></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[SimpleItemsControl 简单项目控件]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsimpleItemsControl%2Findex.html</url>
<content type="text"><![CDATA[一种轻量级ItemsControl控件. 1234[DefaultProperty("Items")][ContentProperty("Items")][TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class SimpleItemsControl : Control 属性 属性 描述 默认值 备注 ItemTemplate 项目模板 ItemContainerStyle 项目容器样式 ItemsSource 项目资源 Items 项目 HasItems 是否有项目 false]]></content>
</entry>
<entry>
<title><![CDATA[SimpleText 简单文本]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsimpleText%2Findex.html</url>
<content type="text"><![CDATA[一种轻量级文本显示控件. 1public class SimpleText : FrameworkElement 属性 属性 描述 默认值 备注 Text 文本 TextAlignment 文本对齐方式 TextAlignment.Left TextTrimming 文本截断方式 TextTrimming.None TextWrapping 文本换行方式 TextWrapping.NoWrap Foreground 字体颜色 FontFamily 字体 FontSize 字体大小 FontStretch 字体变形方式 FontStyle 字体风格 FontWeight 字体粗细 案例1<hc:SimpleText Text="Content"/>]]></content>
</entry>
<entry>
<title><![CDATA[Shield 徽章]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fshield%2Findex.html</url>
<content type="text"><![CDATA[徽章由左半部分的名称和右半部分的值组成,点击徽章可以打开对应的链接. 12[ContentProperty(nameof(Status))]public class Shield : ButtonBase 属性 属性 描述 默认值 备注 Subject 名称 Status 值 Color 颜色 案例1234567<StackPanel Orientation="Horizontal" Margin="32"> <hc:Shield Subject=".net" Status=">=4.0" Color="#1182c3"/> <hc:Shield Subject="c#" Status="7.0" Margin="4,0,0,0" Color="#1182c3"/> <hc:Shield Subject="IDE" Status="2017" Margin="4,0,0,0" Color="#1182c3"/> <hc:Shield Subject="chat" Status="on gitter" Margin="4,0,0,0" Color="#4eb899" Command="hc:ControlCommands.OpenLink" CommandParameter="https://gitter.im/HandyControl/Lobby?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp;utm_content=badge"/> <hc:Shield Subject="qq" Status="714704041" Margin="4,0,0,0" Color="#d8624c" Command="hc:ControlCommands.OpenLink" CommandParameter="http://shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[SplitButton 分割按钮]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsplitButton%2Findex.html</url>
<content type="text"><![CDATA[在普通按钮的基础上提供额外的点击项. 1public class SplitButton : ButtonBase 属性 属性 描述 默认值 备注 HitMode 下拉框触发模式 HitMode.Click MaxDropDownHeight 下拉框最大高度 IsDropDownOpen 下拉框是否打开 false DropDownContent 下拉框内容 案例1234567891011121314151617181920212223242526272829<StackPanel Margin="32" VerticalAlignment="Center"> <hc:SplitButton Margin="0,0,0,10" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Command="{Binding SelectCmd}" CommandParameter="Command0" HorizontalAlignment="Stretch"> <hc:SplitButton.DropDownContent> <StackPanel> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command1"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command2"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command3"/> </StackPanel> </hc:SplitButton.DropDownContent> </hc:SplitButton> <hc:SplitButton Style="{StaticResource SplitButtonPrimary}" Margin="0,0,0,10" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Command="{Binding SelectCmd}" CommandParameter="Command0" HorizontalAlignment="Stretch"> <hc:SplitButton.DropDownContent> <StackPanel> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command1"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command2"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command3"/> </StackPanel> </hc:SplitButton.DropDownContent> </hc:SplitButton> <hc:SplitButton Style="{StaticResource SplitButtonWarning}" Margin="0,0,0,10" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" HitMode="Hover" HorizontalAlignment="Stretch"> <hc:SplitButton.DropDownContent> <StackPanel> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command1"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command2"/> <MenuItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Command="{Binding SelectCmd}" CommandParameter="Command3"/> </StackPanel> </hc:SplitButton.DropDownContent> </hc:SplitButton></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[SimplePanel 简单面板]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsimplePanel%2Findex.html</url>
<content type="text"><![CDATA[当不需要Grid的行、列分隔等功能时建议用此轻量级类代替. 1public class SimplePanel : Panel 大多数时候,我们要尽量避免使用重量级 Panel,SimplePanel 在HC中大量使用.]]></content>
</entry>
<entry>
<title><![CDATA[Sprite 精灵]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fsprite%2Findex.html</url>
<content type="text"><![CDATA[可将常用功能集成到 Sprite 中而无需打开主程序. 1public sealed class Sprite : System.Windows.Window 方法 名称 说明 Show(object) 将内容作为控件主体,Pin 到桌面上 案例123456789<hc:SimplePanel x:Class="HandyControlDemo.UserControl.AppSprite" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:hc="https://handyorg.github.io/handycontrol"> <Border Background="White" CornerRadius="20" Effect="{StaticResource EffectShadow4}"> <Path Width="70" Height="70" Data="{StaticResource LogoGeometry}" Fill="#f06632"/> </Border> <Button Command="hc:ControlCommands.CloseWindow" CommandParameter="{Binding RelativeSource={RelativeSource Self}}" Visibility="{Binding IsMouseOver,RelativeSource={RelativeSource AncestorType=hc:SimplePanel},Converter={StaticResource Boolean2VisibilityConverter}}" Width="22" Height="22" Style="{StaticResource ButtonIcon}" Foreground="White" hc:IconElement.Geometry="{StaticResource ErrorGeometry}" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-8,-8,0"/></hc:SimplePanel> 1234567public partial class AppSprite{ public AppSprite() { InitializeComponent(); }} 1Sprite.Show(new AppSprite());]]></content>
</entry>
<entry>
<title><![CDATA[TabControl 选项卡控件]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtabControl%2Findex.html</url>
<content type="text"><![CDATA[HC 对wpf原生 TabControl 的扩展. 1234567[TemplatePart(Name = OverflowButtonKey, Type = typeof(ContextMenuToggleButton))][TemplatePart(Name = HeaderPanelKey, Type = typeof(TabPanel))][TemplatePart(Name = OverflowScrollviewer, Type = typeof(ScrollViewer))][TemplatePart(Name = ScrollButtonLeft, Type = typeof(ButtonBase))][TemplatePart(Name = ScrollButtonRight, Type = typeof(ButtonBase))][TemplatePart(Name = HeaderBorder, Type = typeof(Border))]public class TabControl : System.Windows.Controls.TabControl 属性 属性 描述 默认值 备注 IsAnimationEnabled 是否启用动画效果 false IsDraggable 选项卡是否支持拖动 false ShowCloseButton 选项卡上是否显示关闭按钮 false ShowContextMenu 选项卡是否支持上下文菜单 true IsTabFillEnabled 选项卡是否自动平分空间 false TabItemWidth 选项卡宽度 200 TabItemHeight 选项卡高度 30 IsScrollable 选项卡溢出后,是否支持鼠标滚轮滚动 false ShowOverflowButton 选项卡溢出后,是否显示下拉按钮 true ShowScrollButton 是否显示滚动按钮 false 案例1234567891011121314151617181920212223<hc:TabControl IsAnimationEnabled="True" ShowCloseButton="True" IsDraggable="True" IsTabFillEnabled="True" Width="800" Height="300"> <hc:TabItem Header="TabItem1"> <hc:SimplePanel Background="{DynamicResource RegionBrush}"/> </hc:TabItem> <hc:TabItem IsSelected="True" Header="TabItem2"> <hc:SimplePanel Background="#FFE8563F"/> </hc:TabItem> <hc:TabItem Header="TabItem3"> <hc:SimplePanel Background="#FF3F4EE8"/> </hc:TabItem> <hc:TabItem Header="TabItem4"> <hc:SimplePanel Background="#FFE83F6D"/> </hc:TabItem> <hc:TabItem Header="TabItem5"> <hc:SimplePanel Background="#FFB23FE8"/> </hc:TabItem> <hc:TabItem Header="TabItem6"> <hc:SimplePanel Background="#FF3FE8E8"/> </hc:TabItem> <hc:TabItem Header="TabItem7"> <hc:SimplePanel Background="#FFE8E03F"/> </hc:TabItem></hc:TabControl> TabItem你可以使用 IconElement 类对选项卡设置图标.]]></content>
</entry>
<entry>
<title><![CDATA[StepBar 步骤条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FstepBar%2Findex.html</url>
<content type="text"><![CDATA[引导用户按照流程完成任务的分步导航条. 1234[StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(StepBarItem))][DefaultEvent("StepChanged")][TemplatePart(Name = ElementProgressBarBack, Type = typeof(ProgressBar))]public class StepBar : ItemsControl 属性 属性 描述 默认值 备注 StepIndex 当前步骤序号 0 Dock 步骤条顶靠方式 Dock.Top 方法 名称 说明 Next( ) 跳转到下一步 Prev( ) 跳转到上一步 事件 名称 说明 StepChanged 步骤改变时触发 案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<Grid Margin="32"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <hc:StepBar Grid.ColumnSpan="2" StepIndex="{Binding StepIndex}"> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/> </hc:StepBar> <StackPanel Margin="0,32" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center"> <Button Command="{Binding PrevCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Content="{ex:Lang Key={x:Static langs:LangKeys.Prev}}" Style="{StaticResource ButtonPrimary}"/> <Button Command="{Binding NextCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Margin="0,16,0,0" Content="{ex:Lang Key={x:Static langs:LangKeys.Next}}" Style="{StaticResource ButtonPrimary}"/> </StackPanel> <hc:StepBar Margin="0,0,0,32" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Dock="Bottom"> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/> <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/> </hc:StepBar> <hc:StepBar Grid.Column="0" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Left"> <hc:StepBar.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left"> <Run Text="{ex:Lang Key={Binding Header}}"/> <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/> </TextBlock> <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/> </StackPanel> </DataTemplate> </hc:StepBar.ItemTemplate> </hc:StepBar> <hc:StepBar Grid.Column="1" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Right"> <hc:StepBar.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left"> <Run Text="{ex:Lang Key={Binding Header}}"/> <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/> </TextBlock> <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/> </StackPanel> </DataTemplate> </hc:StepBar.ItemTemplate> </hc:StepBar></Grid>]]></content>
</entry>
<entry>
<title><![CDATA[TimePicker 时间选择器]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtimePicker%2Findex.html</url>
<content type="text"><![CDATA[TimePicker 控件允许用户通过在文本框中键入时间或使用下拉的日历控件来选择时间。 12345[TemplatePart(Name = ElementRoot, Type = typeof(Grid))][TemplatePart(Name = ElementTextBox, Type = typeof(WatermarkTextBox))][TemplatePart(Name = ElementButton, Type = typeof(Button))][TemplatePart(Name = ElementPopup, Type = typeof(Popup))]public class TimePicker : Control, IDataInput 创建TimePicker1<hc:TimePicker /> 1var timePicker = new TimePicker(); 生成的TimePicker如下图所示: 选择时间可以通过文本框输入时间,或者点击文本框右边的按钮打开下拉的时钟控件选择时间。 也可以在XAML钟或代码中这样设置日期。 1<hc:TimePicker SelectedTime="{x:Static system:DateTime.Now}"/> 1timePicker.SelectedTime = DateTime.Now; 更改时钟样式通过更改Clock属性,TimePicker可以更改时钟的样式。 12345<hc:TimePicker ShowClearButton="True" Style="{StaticResource TimePickerPlus}"> <hc:TimePicker.Clock> <hc:ListClock/> </hc:TimePicker.Clock></hc:TimePicker> 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到DatePicker,以向用户指示其用途。要使用这两个属性,首先需要应用 TimePickerExtend 或 TimePickerPlus 样式。 123<hc:TimePicker hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr2}" Style="{StaticResource TimePickerExtend}"/> 属性 属性 描述 SelectedTime 获取或设置当前选中的时间 Clock 获取或设置下拉时钟 TimeFormat 获取或设置用于显示选定的时间的格式 DisplayTime 获取或设置要显示的时间 IsDropDownOpen 获取或设置一个值,该值指示是打开还是关闭下拉时钟 Text 获取由 TimePicker 显示的文本,或设置选定的时间 VerifyFunc 获取或设置数据验证委托 IsError 获取或设置数据是否错误 ErrorStr 获取或设置错误提示 TextType 获取或设置文本类型 ShowClearButton 获取或设置是否显示清除按钮 方法 方法 描述 VerifyData() 验证数据]]></content>
</entry>
<entry>
<title><![CDATA[ToggleBlock 切换块]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtoggleBlock%2Findex.html</url>
<content type="text"><![CDATA[该控件可根据选中状态切换显示内容,在某些情况下可以代替 ToggleButton. 1public class ToggleBlock : Control 属性 属性 描述 默认值 备注 IsChecked 是否选中 false CheckedContent 选中时显示的内容 UnCheckedContent 未选中时显示的内容 IndeterminateContent 选中状态未知时显示的内容 案例12345678<hc:ToggleBlock> <hc:ToggleBlock.UnCheckedContent> </hc:ToggleBlock.UnCheckedContent> <hc:ToggleBlock.CheckedContent> </hc:ToggleBlock.CheckedContent></hc:ToggleBlock>]]></content>
</entry>
<entry>
<title><![CDATA[TransitioningContentControl 内容过渡控件]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtransitioningContentControl%2Findex.html</url>
<content type="text"><![CDATA[主要用于变化内容的过渡呈现效果. 1public class TransitioningContentControl : ContentControl 属性 属性 描述 默认值 备注 TransitionMode 过渡模式 TransitionMode.Right2Left TransitionStoryboard 过渡动画 案例1234567891011121314151617181920212223<Storyboard x:Key="Custom1Transition" x:Shared="False"> <DoubleAnimation From="50" To="0" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <DoubleAnimation.EasingFunction> <ElasticEase Oscillations="1"/> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard><Storyboard x:Key="Custom2Transition" x:Shared="False"> <DoubleAnimation From="10" To="0" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <DoubleAnimation.EasingFunction> <ElasticEase Oscillations="1"/> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard><Storyboard x:Key="Custom3Transition" x:Shared="False"> <DoubleAnimation From=".8" To="1" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <DoubleAnimation.EasingFunction> <ElasticEase Oscillations="1"/> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard> 123456789101112131415161718192021222324252627282930313233343536373839404142434445<Grid Margin="32"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <ToggleButton Margin="0,0,0,32" IsChecked="True" Name="ButtonVisibilitySwitch" Style="{StaticResource ToggleButtonSwitch}"/> <UniformGrid Visibility="{Binding IsChecked,ElementName=ButtonVisibilitySwitch,Converter={StaticResource Boolean2VisibilityConverter}}" Grid.Row="1" Rows="4" Columns="3"> <hc:TransitioningContentControl> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2Left}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Left2Right"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Left2Right}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Bottom2Top"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Bottom2Top}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Top2Bottom"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Top2Bottom}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Right2LeftWithFade"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2LeftWithFade}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Left2RightWithFade"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Left2RightWithFade}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Bottom2TopWithFade"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Bottom2TopWithFade}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Top2BottomWithFade"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Top2BottomWithFade}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionMode="Right2LeftWithFade"> <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2LeftWithFade}" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom1Transition}"> <Label HorizontalAlignment="Stretch" Content="Custom1" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom2Transition}"> <Label HorizontalAlignment="Stretch" Content="Custom2" Margin="32"/> </hc:TransitioningContentControl> <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom3Transition}"> <Label HorizontalAlignment="Stretch" Content="Custom3" Margin="32"/> </hc:TransitioningContentControl> </UniformGrid></Grid>]]></content>
</entry>
<entry>
<title><![CDATA[Transfer 穿梭框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Ftransfer%2Findex.html</url>
<content type="text"><![CDATA[穿梭选择框用直观的方式在两栏中移动元素,完成选择行为。 1234[DefaultProperty("Items")][ContentProperty("Items")][TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class SimpleItemsControl : Control 123[TemplatePart(Name = ElementItemsOrigin, Type = typeof(SimpleItemsControl))][TemplatePart(Name = ElementItemsSelected, Type = typeof(SimpleItemsControl))]public class Transfer : SimpleItemsControl 属性 属性 描述 默认值 备注 SelectedItems 选中项 事件 名称 说明 SelectionChanged 选中项改变时触发 案例1234567<hc:Transfer ItemsSource="{Binding DataList}" Margin="32" Height="300"> <hc:Transfer.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Name}"/> </DataTemplate> </hc:Transfer.ItemTemplate></hc:Transfer>]]></content>
</entry>
<entry>
<title><![CDATA[WaterfallPanel 瀑布流]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FwaterfallPanel%2Findex.html</url>
<content type="text"><![CDATA[该面板可使元素按照等宽不等高或者等高不等宽进行布局. 1public class WaterfallPanel : Panel 属性 属性 描述 默认值 备注 Groups 组数 2 等宽不等高时即为列数,等高不等宽即为行数 Orientation 排列方向 Orientation.Horizontal Horizontal为等宽不等高,Vertical为等高不等宽 案例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<Grid Margin="32"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <hc:NumericUpDown x:Name="UpDownGroups" HorizontalAlignment="Center" Value="2" Minimum="1" Maximum="3" Width="200" Style="{StaticResource NumericUpDownExtend}" hc:TitleElement.Title="{ex:Lang Key={x:Static langs:LangKeys.Groups}}" hc:TitleElement.TitleWidth="50" hc:TitleElement.TitlePlacement="Left"/> <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,16,0,0"> <hc:ScrollViewer MaxHeight="300"> <hc:WaterfallPanel VerticalAlignment="Center" Width="300" Groups="{Binding Value,ElementName=UpDownGroups}" hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"> <Border Height="100" Background="{DynamicResource PrimaryBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Height="140" Background="{DynamicResource DangerBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Height="100" Background="{DynamicResource SuccessBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Height="170" Background="{DynamicResource InfoBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Height="100" Background="{DynamicResource WarningBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </hc:WaterfallPanel> </hc:ScrollViewer> <hc:ScrollViewer Margin="32,0,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Orientation="Horizontal" MaxWidth="300"> <hc:WaterfallPanel VerticalAlignment="Center" Height="300" Orientation="Vertical" Groups="{Binding Value,ElementName=UpDownGroups}" hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"> <Border Width="100" Background="{DynamicResource PrimaryBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Width="140" Background="{DynamicResource DangerBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Width="100" Background="{DynamicResource SuccessBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Width="170" Background="{DynamicResource InfoBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> <Border Width="100" Background="{DynamicResource WarningBrush}" Effect="{StaticResource EffectShadow1}" Margin="5"> <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </hc:WaterfallPanel> </hc:ScrollViewer> </StackPanel></Grid>]]></content>
</entry>
<entry>
<title><![CDATA[Window 窗口]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fwindow%2Findex.html</url>
<content type="text"><![CDATA[HC 对wpf原生 Window 的扩展. 12[TemplatePart(Name = ElementNonClientArea, Type = typeof(UIElement))]public class Window : System.Windows.Window 属性 属性 描述 默认值 备注 CloseButtonBackground 关闭按钮背景色 CloseButtonForeground 关闭按钮前景色 CloseButtonHoverBackground 关闭按钮鼠标悬浮背景色 CloseButtonHoverForeground 关闭按钮鼠标悬浮前景色 OtherButtonBackground 其它按钮背景色 OtherButtonForeground 其它按钮前景色 OtherButtonHoverBackground 其它按钮鼠标悬浮背景色 OtherButtonHoverForeground 其它按钮鼠标悬浮前景色 NonClientAreaContent 非客户端区域内容 NonClientAreaBackground 非客户端区域背景色 NonClientAreaForeground 非客户端区域前景色 NonClientAreaHeight 非客户端区域高度 ShowNonClientArea 是否显示非客户端区域 true ShowTitle 是否显示窗口标题 true IsFullScreen 窗口是否处于全屏 false 案例1234567891011121314151617<hc:Window x:Class="HandyControlDemo.Window.CommonWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:hc="https://handyorg.github.io/handycontrol" xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs" xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension" mc:Ignorable="d" Background="{DynamicResource MainContentBackgroundBrush}" WindowStartupLocation="CenterScreen" Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}" Height="450" Width="800" Icon="/HandyControlDemo;component/Resources/Img/icon.ico"> <Border Background="{DynamicResource MainContentForegroundDrawingBrush}"/></hc:Window>]]></content>
</entry>
<entry>
<title><![CDATA[Watermark 水印]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Fwatermark%2Findex.html</url>
<content type="text"><![CDATA[可使用指定的内容创建平铺背景. 123[TemplatePart(Name = ElementRoot, Type = typeof(Border))][ContentProperty(nameof(Content))]public class Watermark : Control 属性 属性 描述 默认值 备注 Angle 水印旋转角度 20 由默认样式提供 Content 需要使用水印的内容 Mark 水印 MarkWidth 水印宽度 0 MarkHeight 水印高度 0 MarkBrush 水印颜色 AutoSizeEnabled 水印是否自动适配大小 true MarkMargin 水印边距 案例1<hc:Watermark Mark="Project" FontSize="80" FontWeight="Bold" MarkMargin="30,0"/> 1<hc:Watermark Mark="{StaticResource GitHubStrGeometry}" MarkMargin="30,0" MarkWidth="200" MarkHeight="100"/>]]></content>
</entry>
<entry>
<title><![CDATA[WaveProgressBar 波形进度条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FwaveProgressBar%2Findex.html</url>
<content type="text"><![CDATA[进度条的一种特殊效果,可用于增强用户体验. 123[TemplatePart(Name = ElementWave, Type = typeof(FrameworkElement))][TemplatePart(Name = ElementClip, Type = typeof(FrameworkElement))]public class WaveProgressBar : RangeBase 属性 属性 描述 默认值 备注 Text 进度文本 ShowText 是否显示进度文本 true WaveFill 波浪画刷 WaveThickness 波浪边框粗细 0 WaveStroke 波浪边框画刷 案例123456789101112<StackPanel Orientation="Horizontal" Margin="0,32,0,0"> <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}"/> <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="20" Margin="16,0,0,0" WaveThickness="4" WaveStroke="#FFFF0080"> <hc:WaveProgressBar.WaveFill> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#66FF0080" Offset="0"/> <GradientStop Color="#FFFF0080" Offset="1"/> </LinearGradientBrush> </hc:WaveProgressBar.WaveFill> </hc:WaveProgressBar> <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="50" Height="50" Style="{StaticResource ProgressBarWarningWave}"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Tag 标签]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2Ftag%2Findex.html</url>
<content type="text"><![CDATA[用以指示用户选中的项,相对于文字,Tag 有额外的交互. 1public class Tag : ContentControl 属性 属性 描述 默认值 备注 ShowCloseButton 是否显示删除(关闭)按钮 true Selectable 是否支持选中 false IsSelected 是否选中 false 事件 名称 说明 Selected 标签选中时触发 Closing 标签关闭时触发 Closed 标签关闭后触发 TagPanel标签专用容器. 即将在未来版本中移除,我们会提供功能更丰富的 TagContainer 来代替它. 属性 属性 描述 默认值 备注 ShowAddButton 是否显示新增标签按钮 false TagMargin 标签边距 Thickness(5) 事件 名称 说明 AddTagButtonClick 新增标签时触发 案例123456789101112<hc:TagPanel AddTagButtonClick="TagPanel_OnAddTagButtonClick" Margin="32" Orientation="Horizontal" MaxWidth="400" VerticalAlignment="Center" ShowAddButton="True"> <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/> <hc:Tag Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/> <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/> <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/> <hc:Tag IsSelected="True" Selectable="True" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/> <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/> <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/> <hc:Tag IsSelected="True" Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/> <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/> <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/></hc:TagPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Button 按钮]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fbutton%2Findex.html</url>
<content type="text"><![CDATA[ButtonBaseStyle : ButtonBaseBaseStyle按钮默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 所有继承此样式的按钮都可以使用IconElement中定义的附加属性来控制按钮中几何图形的属性。 所有继承此样式的按钮都可以使用BorderElement.CornerRadius附加属性来控制按钮的圆角大小。 用例:12345<StackPanel Orientation="Horizontal"> <Button Content="这是一个按钮"/> <Button Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonPrimary : ButtonBaseStyle主要按钮 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮"/> <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonSuccess : ButtonBaseStyle成功按钮 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮"/> <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonInfo : ButtonBaseStyle信息按钮 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮"/> <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonWarning : ButtonBaseStyle警告按钮 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮"/> <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonDanger : ButtonBaseStyle危险操作按钮 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮"/> <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/> <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/></StackPanel> ButtonIcon : ButtonBaseStyle如果只想显示几何图形按钮,则推荐使用此样式。 用例:12345<StackPanel Orientation="Horizontal"> <Button Style="{StaticResource ButtonIcon}" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}"/> <Button Style="{StaticResource ButtonIcon}" Background="Black" Foreground="White" controls:BorderElement.CornerRadius="15" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/> <Button Style="{StaticResource ButtonIcon}" BorderThickness="1" BorderBrush="Black" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/></StackPanel> ButtonCustom如果想完全自定义按钮的内容,则推荐使用此样式。ButtonCustom中的内容完全由你自己决定,另外,可以通过BackgroundSwitchElement中的附加属性切换背景: 用例:1<Button Height="30" Padding="10,0" Background="Black" Foreground="White" Content="这是一个按钮" Style="{StaticResource ButtonCustom}" controls:BackgroundSwitchElement.MouseHoverBackground="Red" controls:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>]]></content>
</entry>
<entry>
<title><![CDATA[TextBox 文本框]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtextBox%2Findex.html</url>
<content type="text"><![CDATA[表示一个控件,该控件可用于显示或编辑无格式文本。 1public class TextBox : System.Windows.Controls.TextBox, IDataInput 创建TextBox1<hc:TextBox /> 1var textBox = new TextBox(); 输入文本此示例演示如何使用 Text 属性设置 TextBox 控件的初始文本内容: 1<hc:TextBox Text="这是内容"/> 1textBox.Text = "这是内容"; 生成的TextBox如下图所示: 有关TextBox的更多示例,可以参考它的基类的文档。 设置标题和占位符文本你可以将 Header(标题)和 Placeholder(占位符)添加到TextBox,以向用户指示其用途。要使用这两个属性, 12<hc:TextBox hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}" hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr2}" 属性 属性 描述 Text 获取或设置文本框的文本内容。 VerifyFunc 获取或设置数据验证委托。 IsError 获取或设置数据是否错误。 ErrorStr 获取或设置错误提示。 TextType 获取或设置文本类型。 ShowClearButton 获取或设置是否显示清除按钮。 方法 方法 描述 VerifyData() 验证数据。]]></content>
</entry>
<entry>
<title><![CDATA[ComboBox 组合框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FcomboBox%2Findex.html</url>
<content type="text"><![CDATA[ComboBoxBaseStyle原生组合框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。原生组合框如果未设置任何样式,则默认使用该样式: 默认样式<ComboBox ItemsSource="{Binding DataList}" SelectedIndex="0"/> ComboBoxExtendBaseStyle : ComboBoxBaseStyle原生组合框扩展默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 ComboBoxExtend : ComboBoxExtendBaseStyle相对于原生组合框默认样式,它借助于附加属性可以实现标题、水印的功能。 标题在上<ComboBox ItemsSource="{Binding DataList}" SelectedIndex="0" hc:InfoElement.Title="这是标题" Style="{StaticResource ComboBoxExtend}" Text="正文1"/> 标题在左<ComboBox ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="标题在左侧" Style="{StaticResource ComboBoxExtend}" Text="正文1"/> 标题在左时,为了多个输入框左侧对齐,需要设置标题宽度,标题宽度无需逐个设置,可在外部容器上统一设置。 常见问题:Combobox的字体比原有默认字体大,同时设定标题在左,标题因字体过大显示不全解决方案:在该Combobox中添加附加属性hc:InfoElement.ContentHeight,默认值为30,默认字体号为12,变更后可根据新的字体大小设定该附加属性的数值,如上图,字体大小为18,则设定hc:InfoElement.ContentHeight为38,结果如下: 标题在上,带有水印<ComboBox ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="请输入内容" hc:InfoElement.Title="此项必填" Style="{StaticResource ComboBoxExtend}"/> 标题在上,带有水印,且为必填<ComboBox ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="请输入内容" hc:InfoElement.Title="此项必填" Style="{StaticResource ComboBoxExtend}" hc:InfoElement.Necessary="True"/> 标题在上,带有水印,且为必填,同时自定义必填提示符<ComboBox ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="请输入内容" hc:InfoElement.Title="此项必填" Style="{StaticResource ComboBoxExtend}" hc:InfoElement.Necessary="True" hc:InfoElement.Symbol="*"/>]]></content>
</entry>
<entry>
<title><![CDATA[TimeBar 时间条]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FtimeBar%2Findex.html</url>
<content type="text"><![CDATA[一种包含热区和时间刻度的进度条. 123456[TemplatePart(Name = ElementBorderTop, Type = typeof(Border))][TemplatePart(Name = ElementTextBlockMove, Type = typeof(TextBlock))][TemplatePart(Name = ElementTextBlockSelected, Type = typeof(TextBlock))][TemplatePart(Name = ElementCanvasSpe, Type = typeof(Canvas))][TemplatePart(Name = ElementHotspots, Type = typeof(Panel))]public class TimeBar : Control 属性 属性 描述 默认值 备注 Hotspots 热区集合 HotspotsBrush 热区颜色 ShowSpeStr 是否显示刻度 false TimeFormat 时间格式 yyyy-MM-dd HH:mm:ss SelectedTime 当前选中时间 事件 名称 说明 TimeChanged 选中时间改变时触发 案例1<hc:TimeBar BorderThickness="0" Width="600"/> 设置热区123456for (int i = 0; i < 10; i++){ var hour = 6 * i; TimeBarDemo.Hotspots.Add(new DateTimeRange(DateTime.Today.AddHours(hour), DateTime.Today.AddHours(hour + 1))); TimeBarDemo.Hotspots.Add(new DateTimeRange(DateTime.Today.AddHours(-hour), DateTime.Today.AddHours(-hour + 1)));}]]></content>
</entry>
<entry>
<title><![CDATA[CheckBox 复选框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FcheckBox%2Findex.html</url>
<content type="text"><![CDATA[CheckBoxBaseStyle复选框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:12345678<StackPanel> <CheckBox Content="CheckBox" IsChecked="True"/> <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="True" IsEnabled="False"/> <CheckBox Margin="0,16,0,0" Content="CheckBox"/> <CheckBox Margin="0,16,0,0" Content="CheckBox" IsEnabled="False"/> <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="{x:Null}"/> <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="{x:Null}" IsEnabled="False"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Border 边框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fborder%2Findex.html</url>
<content type="text"><![CDATA[BorderRegionStyle此样式用于包裹一个控件区域,配合基础xaml定义中的几个DropShadowEffect资源可制作如下效果: 以上效果的xaml代码如下: 1234567891011121314151617181920212223242526272829303132<UniformGrid Margin="32,32,0,0" Columns="3" Rows="2"> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32"> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow1}"> <Border Background="{DynamicResource InfoBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow2}"> <Border Background="{DynamicResource WarningBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow3}"> <Border Background="{DynamicResource DangerBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow4}"> <Border Background="{DynamicResource AccentBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Border> <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow5}"> <Border Background="{DynamicResource BorderBrush}"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> </Border></UniformGrid> 提示:新版本中使用的BorderRegion,有别于老版本使用样式BorderRegionStyle,由直角变更为圆角 BorderVerticallySplitter此样式使用1单位宽度的Border来分割横向排列的控件。 用例:1234567891011<StackPanel Height="20" Orientation="Horizontal"> <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderVerticallySplitter}"/> <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderVerticallySplitter}"/> <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderVerticallySplitter}"/> <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderVerticallySplitter}"/> <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/></StackPanel> BorderHorizontallySplitter此样式使用1单位高度的Border来分割纵向排列的控件。 用例:1234567891011<StackPanel Width="20"> <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderHorizontallySplitter}"/> <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderHorizontallySplitter}"/> <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderHorizontallySplitter}"/> <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/> <Border Style="{StaticResource BorderHorizontallySplitter}"/> <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/></StackPanel> BorderCircular此样式借助BorderElement.Circular附加属性可实现圆形Border。 用例:1<Border Style="{StaticResource BorderCircular}" Background="OrangeRed" Width="100" Height="100"/> BorderClip此样式在BorderCircular基础上添加了裁剪功能,常用于显示圆形Image。 用例:123<Border Style="{StaticResource BorderClip}" Width="100" Height="100"> <Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/></Border>]]></content>
</entry>
<entry>
<title><![CDATA[ContentControl 内容控件]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FcontentControl%2Findex.html</url>
<content type="text"><![CDATA[所有的ContentControl默认无法获得焦点]]></content>
</entry>
<entry>
<title><![CDATA[Calendar 日历]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fcalendar%2Findex.html</url>
<content type="text"><![CDATA[CalendarBaseStyle日历默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1<Calendar/>]]></content>
</entry>
<entry>
<title><![CDATA[DatePicker 日期选择器]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FdatePicker%2Findex.html</url>
<content type="text"><![CDATA[DatePickerBaseStyle原生日期选择器默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。原生日期选择器如果未设置任何样式,则默认使用该样式: 默认样式<DatePicker SelectedDate="{x:Static system:DateTime.Now}"/> DatePickerExtendBaseStyle : DatePickerBaseStyle原生日期选择器扩展默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 DatePickerExtend : DatePickerExtendBaseStyle 标题在上<DatePicker SelectedDate="{x:Static system:DateTime.Now}" Style="{StaticResource DatePickerExtend}" hc:InfoElement.Title="这是标题"/> 标题在左<DatePicker SelectedDate="{x:Static system:DateTime.Now}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource DatePickerExtend}" hc:InfoElement.Title="标题在左侧"/> 标题在左时,为了多个输入框左侧对齐,需要设置标题宽度,标题宽度无需逐个设置,可在外部容器上统一设置。 标题在上,带有水印参见Combobox 标题在上,带有水印,且为必填参见Combobox 标题在上,带有水印,且为必填,同时自定义必填提示符参见Combobox]]></content>
</entry>
<entry>
<title><![CDATA[ContextMenu 上下文菜单]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FcontextMenu%2Findex.html</url>
<content type="text"><![CDATA[ContextMenuBaseStyle上下文菜单默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1234567<ContextMenu ItemsSource="{Binding DataList}"> <ContextMenu.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding DataList}"> <TextBlock Text="{Binding Name}"/> </HierarchicalDataTemplate> </ContextMenu.ItemTemplate></ContextMenu>]]></content>
</entry>
<entry>
<title><![CDATA[Expander 展开框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fexpander%2Findex.html</url>
<content type="text"><![CDATA[ExpanderBaseStyleExpander 展开框 默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1234567891011121314<StackPanel Margin="32" VerticalAlignment="Center" Width="240"> <Expander Header="{x:Static langs:Lang.Title}" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}"> <Border Height="100" Background="{DynamicResource SecondaryRegionBrush}"/> </Expander> <Expander Header="{x:Static langs:Lang.Title}" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}"> <Border Height="100" Background="{DynamicResource SecondaryRegionBrush}"/> </Expander> <Expander Header="{x:Static langs:Lang.Title}" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}"> <Border Height="100" Background="{DynamicResource SecondaryRegionBrush}"/> </Expander> <Expander Header="{x:Static langs:Lang.Title}" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Border Height="100" Background="{DynamicResource SecondaryRegionBrush}"/> </Expander></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[Frame 导航框架]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fframe%2Findex.html</url>
<content type="text"><![CDATA[FrameBaseStyle导航框架默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 1<Frame Margin="32" Width="500" Height="360" Name="FrameDemo" NavigationUIVisibility="Visible"/> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[DataGrid 数据表格]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FdataGrid%2Findex.html</url>
<content type="text"><![CDATA[相关样式 style名称 所属类型 用途描述 RowHeaderGripperStyle Thumb 行标题拖拽条样式 ColumnHeaderGripperStyle Thumb 列标题拖拽条样式 DataGridCellStyle DataGridCell 单元格样式 DataGridRowStyle DataGridRow 行样式 DataGridColumnHeaderStyle DataGridColumnHeader 列标题样式 DataGridRowHeaderStyle DataGridRowHeader 行标题样式 TextBlockComboBoxStyle ComboBox ComboBox非编辑模式样式 DataGridTextColumnStyle TextBlock 默认文本样式 用例:123456789101112131415161718192021<DataGrid HeadersVisibility="All" RowHeaderWidth="60" AutoGenerateColumns="False" ItemsSource="{Binding DataList}"> <DataGrid.RowHeaderTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=DataGridRow}}"/> </DataTemplate> </DataGrid.RowHeaderTemplate> <DataGrid.Columns> <DataGridTextColumn IsReadOnly="True" Width="80" CanUserResize="False" Binding="{Binding Index}" Header="{x:Static langs:Lang.Index}"/> <DataGridTemplateColumn Width="60" CanUserResize="False"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ImgPath}" Width="32" Height="32" Stretch="Uniform"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Width="1" Binding="{Binding Name}" Header="{x:Static langs:Lang.Name}"/> <DataGridCheckBoxColumn Width="100" CanUserResize="False" Binding="{Binding IsSelected}" Header="{x:Static langs:Lang.Selected}"/> <DataGridComboBoxColumn ItemsSource="{Binding Source={StaticResource DemoTypes}}" Width="100" CanUserResize="False" SelectedValueBinding="{Binding Type}" Header="{x:Static langs:Lang.Type}"/> <DataGridTextColumn Width="1" Binding="{Binding Remark}" Header="{x:Static langs:Lang.Remark}"/> </DataGrid.Columns></DataGrid> FAQ 对于文本显示列DataGridTextColumn需要设定文本内容水平居中或者水平居右,而不是HandyControl中设定的样式默认显示为居左时,需要继承DataGridCellStyle重写HorizontalContentAlignment 属性为Center 或Right 需要注意的是,此方式仅仅适用于引入了HandControl资源样式的项目,普通原生DataGrid使用该方式无效。 用例如下: 12345678910111213141516样式:<Style x:Key="DataGridTextCenterColumnStyle" TargetType="DataGridCell" BasedOn="{StaticResource DataGridCellStyle}"> <Setter Property="HorizontalContentAlignment" Value="Center"/></Style>xaml中的使用:<DataGrid ItemsSource="{Binding Datas}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="居左" Binding="{Binding Name}" Width="*"/> <DataGridTextColumn Header="居中" CellStyle="{StaticResource DataGridTextCenterColumnStyle}" Width="*" Binding="{Binding Name}"/> </DataGrid.Columns></DataGrid> 效果如下:]]></content>
</entry>
<entry>
<title><![CDATA[FlowDocument 流文档]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FflowDocument%2Findex.html</url>
<content type="text"><![CDATA[FlowDocumentScrollViewerBaseStyle流文档滚动视图默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<FlowDocumentScrollViewer IsToolBarVisible="True" Width="502" Height="400" Margin="32"> <FlowDocument ColumnWidth="400" IsOptimalParagraphEnabled="True" IsHyphenationEnabled="True"> <Section FontSize="12"> <Paragraph> <Bold>Neptune</Bold> (planet), major planet in the solar system, eighth planet from the Sun and fourth largest in diameter. Neptune maintains an almost constant distance, about 4,490 million km (about 2,790 million mi), from the Sun. Neptune revolves outside the orbit of Uranus and for most of its orbit moves inside the elliptical path of the outermost planet Pluto (see Solar System). Every 248 years, Pluto’s elliptical orbit brings the planet inside Neptune’s nearly circular orbit for about 20 years, temporarily making Neptune the farthest planet from the Sun. The last time Pluto’s orbit brought it inside Neptune’s orbit was in 1979. In 1999 Pluto’s orbit carried it back outside Neptune’s orbit. <Figure Width="140" Height="50" Background="GhostWhite" HorizontalAnchor="PageLeft" HorizontalOffset="100" VerticalOffset="20"> <Paragraph FontStyle="Italic" TextAlignment="Left" Background="Beige" Foreground="DarkGreen"> Neptune has 72 times Earth's volume... </Paragraph> </Figure> <Floater Background="GhostWhite" Width="285" HorizontalAlignment="Left"> <Table CellSpacing="5"> <Table.Columns> <TableColumn Width="155"/> <TableColumn Width="130"/> </Table.Columns> <TableRowGroup> <TableRow> <TableCell ColumnSpan="3"> <Paragraph>Neptune Stats</Paragraph> </TableCell> </TableRow> <TableRow Background="LightGoldenrodYellow" FontSize="12"> <TableCell> <Paragraph FontWeight="Bold">Mean Distance from Sun</Paragraph> </TableCell> <TableCell> <Paragraph>4,504,000,000 km</Paragraph> </TableCell> </TableRow> <TableRow FontSize="12" Background="LightGray"> <TableCell> <Paragraph FontWeight="Bold">Mean Diameter</Paragraph> </TableCell> <TableCell> <Paragraph>49,532 km</Paragraph> </TableCell> </TableRow> <TableRow Background="LightGoldenrodYellow" FontSize="12"> <TableCell> <Paragraph FontWeight="Bold">Approximate Mass</Paragraph> </TableCell> <TableCell> <Paragraph>1.0247e26 kg</Paragraph> </TableCell> </TableRow> <TableRow> <TableCell ColumnSpan="4"> <Paragraph FontSize="10" FontStyle="Italic"> Information from the <Hyperlink NavigateUri="http://encarta.msn.com/encnet/refpages/artcenter.aspx">Encarta</Hyperlink> web site. </Paragraph> </TableCell> </TableRow> </TableRowGroup> </Table> </Floater> </Paragraph> <Paragraph> Astronomers believe Neptune has an inner rocky core that is surrounded by a vast ocean of water mixed with rocky material. From the inner core, this ocean extends upward until it meets a gaseous atmosphere of hydrogen, helium, and trace amounts of methane. Neptune has four rings and 11 known moons. Even though Neptune's volume is 72 times Earth’s volume, its mass is only 17.15 times Earth’s mass. Because of its size, scientists classify Neptune—along with Jupiter, Saturn, and Uranus—as one of the giant or Jovian planets (so-called because they resemble Jupiter). </Paragraph> <Paragraph> <Figure Width="140" Height="50" Background="GhostWhite" TextAlignment="Left" HorizontalAnchor="PageCenter" WrapDirection="Both"> <Paragraph FontStyle="Italic" Background="Beige" Foreground="DarkGreen" > Neptune has an orbital period of ~20 years... </Paragraph> </Figure> Mathematical theories of astronomy led to the discovery of Neptune. To account for wobbles in the orbit of the planet Uranus, British astronomer John Couch Adams and French astronomer Urbain Jean Joseph Leverrier independently calculated the existence and position of a new planet in 1845 and 1846, respectively. They theorized that the gravitational attraction of this planet for Uranus was causing the wobbles in Uranus’s orbit. Using information from Leverrier, German astronomer Johann Gottfried Galle first observed the planet in 1846. </Paragraph> </Section> </FlowDocument> </FlowDocumentScrollViewer> 效果: FlowDocumentPageViewerBaseStyle流文档单页视图默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 FlowDocumentReaderBaseStyle流文档查看器默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。]]></content>
</entry>
<entry>
<title><![CDATA[GroupBox 分组框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FgroupBox%2Findex.html</url>
<content type="text"><![CDATA[GroupBoxBaseStyleGroupBox 分组框 默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1234567<GroupBox Grid.Row="0" Grid.Column="0" Width="300" Height="200" Header="{x:Static langs:Lang.TitleDemoStr1}" Padding="10" Margin="16"> <Border Background="{DynamicResource PrimaryBrush}" CornerRadius="4"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border></GroupBox> 这里提供另外一种样式,供开发者选择 只需要添加扩展属性即可1hc:TitleElement.TitlePlacement="Left"用例:1234567<GroupBox Grid.Row="0" Grid.Column="1" Width="300" Height="200" Header="{x:Static langs:Lang.TitleDemoStr1}" Padding="10" Margin="16" hc:TitleElement.TitlePlacement="Left"> <Border Background="{DynamicResource PrimaryBrush}" CornerRadius="4"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border></GroupBox> GroupBoxTab : GroupBoxTabBaseStyle : GroupBoxBaseStyleGroupBox 分组框 的另一种样式 GroupBoxTabBaseStyle 不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1234567<GroupBox Grid.Row="1" Grid.Column="0" Width="300" Height="200" Header="{x:Static langs:Lang.TitleDemoStr1}" Padding="10" Margin="16" Style="{StaticResource GroupBoxTab}"> <Border Background="{DynamicResource PrimaryBrush}" CornerRadius="4"> <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border></GroupBox>同样可以 使用扩展属性 1hc:TitleElement.TitlePlacement="Left" GroupBoxOriginal : GroupBoxOriginalBaseStyle : GroupBoxBaseStyleGroupBox 分组框 的另一种样式 GroupBoxOriginalBaseStyle 不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:123456789<GroupBox Grid.Row="2" Grid.Column="0" Width="300" Header="{x:Static langs:Lang.TitleDemoStr1}" Margin="16" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left"> <TextBox/></GroupBox><GroupBox Grid.Row="2" VerticalAlignment="Bottom" Grid.Column="1" Width="300" hc:TitleElement.TitleWidth="100" Header="{x:Static langs:Lang.TitleDemoStr1}" Margin="16" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left" hc:TitleElement.TitlePlacement="Left"> <ComboBox DataContext="{Binding ComboBoxDemo,Source={StaticResource Locator}}" ItemsSource="{Binding DataList}"/></GroupBox>]]></content>
</entry>
<entry>
<title><![CDATA[Lable标签]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Flabel%2Findex.html</url>
<content type="text"><![CDATA[LabelBaseStyleLabel标签默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1<Label Content="Label默认样式" Margin="10"></Label> LabelPrimary : LabelBaseStyle主样式 用例:1<Label Content="LabelPrimary样式" Margin="10" Style="{DynamicResource LabelPrimary}"></Label> LabelSuccess : LabelBaseStyle成功类型样式 用例:1<Label Content="LabelSuccess样式" Margin="10" Style="{DynamicResource LabelSuccess}"></Label> LabelInfo : LabelBaseStyle信息类型样式 用例:1<Label Content="LabelInfo样式" Margin="10" Style="{DynamicResource LabelInfo}"></Label> LabelWarning : LabelBaseStyle警告类型样式 用例:1<Label Content="LabelWarning样式" Margin="10" Style="{DynamicResource LabelWarning}"></Label> LabelDanger : LabelBaseStyle危险类型样式 用例:1<Label Content="LabelDanger样式" Margin="10" Style="{DynamicResource LabelDanger}"></Label>]]></content>
</entry>
<entry>
<title><![CDATA[PasswordBox 密码框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FpasswordBox%2Findex.html</url>
<content type="text"><![CDATA[PasswordBoxBaseStyle原生密码框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1<PasswordBox PasswordChar="*" VerticalAlignment="Center" Width="120"></PasswordBox> PasswordBoxExtendBaseStyle : PasswordBoxBaseStyle原生密码框扩展默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 PasswordBoxExtend : PasswordBoxExtendBaseStyle相对于原生密码框默认样式,它借助于附加属性可以实现标题、水印的功能。 用例:1234567891011<!–为使普通密码输入文本框显示水印,需要设定PasswordBoxAttach.PasswordLength="0"–><PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="" hc:PasswordBoxAttach.PasswordLength="0" hc:InfoElement.Placeholder="请输入密码" VerticalAlignment="Center" Width="120"></PasswordBox><PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="" hc:TitleElement.Title="用户密码:" hc:TitleElement.TitlePlacement="Top" VerticalAlignment="Center" Width="120"></PasswordBox>]]></content>
</entry>
<entry>
<title><![CDATA[Image图片]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fimage%2Findex.html</url>
<content type="text"><![CDATA[在HandyControl中,对应原生的Image控件,仅仅提供了一个默认的控件样式,并未提供特殊样式,对于个性化定制,需要使用者自行定制。 用例:1234<StackPanel Background="LightGray"> <Image Source="Resources/Images/Image_basestyle.png" Margin="0,10"></Image> <Image Source="Resources/Images/Image_basestyle.png" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform"></Image></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[ListView 列表视图]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FlistView%2Findex.html</url>
<content type="text"><![CDATA[HandyControl中仅提供了一个默认的ListView样式,可根据个人需求,自行定义。 用例:123456789<ListView ItemsSource="{Binding DataList}" Margin="20"> <ListView.View> <GridView> <GridViewColumn Width="80" Header="标题1" DisplayMemberBinding="{Binding Index}"/> <GridViewColumn Width="100" Header="标题2" DisplayMemberBinding="{Binding Name}"/> <GridViewColumn Width="200" Header="标题3" DisplayMemberBinding="{Binding Remark}"/> </GridView> </ListView.View></ListView>]]></content>
</entry>
<entry>
<title><![CDATA[Menu 菜单]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fmenu%2Findex.html</url>
<content type="text"><![CDATA[MenuBaseStyle菜单默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1234567 <Menu ItemsSource="{Binding Menus}"> <Menu.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Children}"> <TextBlock Text="{Binding Name}"></TextBlock> </HierarchicalDataTemplate> </Menu.ItemTemplate></Menu>]]></content>
</entry>
<entry>
<title><![CDATA[RadioButton 单选按钮]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FradioButton%2Findex.html</url>
<content type="text"><![CDATA[RadioButtonBaseStyle单选按钮默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 123456<StackPanel> <RadioButton Content="默认样式"/> <RadioButton Margin="0,16,0,0" Content="不可编辑" IsChecked="True" IsEnabled="False"/> <RadioButton Margin="0,16,0,0" Content="默认样式"/> <RadioButton Margin="0,16,0,0" Content="不可编辑" IsEnabled="False"/></StackPanel> 效果: RadioButtonIcon : RadioButtonBaseStyle带图标样式,可只显示图标也可图文显示 案例: 123456<UniformGrid Margin="22,0,0,0" Rows="2" Columns="2"> <RadioButton Margin="10,0,0,0" Background="{DynamicResource SecondaryRegionBrush}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}" Style="{StaticResource RadioButtonIcon}" Content="RadioButtonIcon"/> <RadioButton Margin="10,0,0,0" Background="{DynamicResource SecondaryRegionBrush}" Style="{StaticResource RadioButtonIcon}" Content="RadioButtonIcon" IsChecked="True"/> <RadioButton Margin="10,0,0,0" BorderThickness="1" hc:IconElement.Geometry="{StaticResource CalendarGeometry}" Style="{StaticResource RadioButtonIcon}" Content="RadioButtonIcon"/> <RadioButton Margin="10,0,0,0" BorderThickness="1" Style="{StaticResource RadioButtonIcon}" Content="RadioButtonIcon"/></UniformGrid> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[ListBox 列表框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FlistBox%2Findex.html</url>
<content type="text"><![CDATA[ListBoxBaseStyle ListBox默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 用例:1<Style BasedOn="{StaticResource ListBoxBaseStyle}" TargetType="ListBox"/> ListBoxCustom : ListBoxBaseStyleListBox列表Custom样式,该样式保留了Listbox的基本属性样式,而数据显示样式由当前用户自定义,实现个性化定制。 用例:12345678910111213<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource ListBoxCustom}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,5"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox> WrapPanelHorizontalListBox : ListBoxCustom布局容器为WrapPanel,水平方向显示样式。 用例:12345678910111213<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource WrapPanelHorizontalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="5,0"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox> WrapPanelVerticalListBox : ListBoxCustom布局容器为WrapPanel,垂直方向显示样式。 用例:12345678910111213<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource WrapPanelVerticalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,5"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox> StackPanelHorizontalListBox : ListBoxCustom布局容器为StackPanel,水平方向显示样式。 用例:12345678910111213<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource StackPanelHorizontalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="5,0"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox> StackPanelVerticalListBox : ListBoxCustom布局容器为StackPanel,垂直方向显示样式。 用例:12345678910111213<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource StackPanelVerticalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,1"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>]]></content>
</entry>
<entry>
<title><![CDATA[ProgressBar 进度条]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FprogressBar%2Findex.html</url>
<content type="text"><![CDATA[ProgressBarBaseStyle进度条默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 其他样式HandyControl中自带的其他样式和效果,其中包含如下样式: 样式Key 用途 父样式 ProgressBarSuccess 成功色进度条 ProgressBarBaseStyle ProgressBarInfo 提示色进度条 ProgressBarBaseStyle ProgressBarWarning 警告色进度条 ProgressBarBaseStyle ProgressBarDanger 危险色进度条 ProgressBarBaseStyle ProgressBarStripeBaseStyle 条纹进度条默认样式(不推荐直接使用) - ProgressBarPrimaryStripe 主题色条纹进度条 ProgressBarStripeBaseStyle ProgressBarSuccessStripe 成功色条纹进度条 ProgressBarStripeBaseStyle ProgressBarInfoStripe 信息色条纹进度条 ProgressBarStripeBaseStyle ProgressBarWarningStripe 警告色条纹进度条 ProgressBarStripeBaseStyle ProgressBarDangerStripe 危险色条纹进度条 ProgressBarStripeBaseStyle ProgressBarFlat 扁平风格 - 案例:1234567891011121314151617181920212223242526272829303132333435363738394041424344<StackPanel Margin="20"> <TextBlock Text="默认样式"></TextBlock> <ProgressBar Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarSuccess"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarSuccess}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarInfo"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarInfo}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarWarning"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarWarning}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarDanger"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarDanger}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarPrimaryStripe"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarPrimaryStripe}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarSuccessStripe"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarSuccessStripe}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarInfoStripe"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarInfoStripe}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarWarningStripe"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarWarningStripe}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarDangerStripe"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarDangerStripe}" Value="40"></ProgressBar> </StackPanel> <StackPanel Margin="20"> <TextBlock Text="ProgressBarFlat"></TextBlock> <ProgressBar Style="{DynamicResource ProgressBarFlat}" Value="40"></ProgressBar> </StackPanel> 效果: 温馨提示对于颜色、圆角或其它自定义需求,可参考进度条样式源码自行定义。]]></content>
</entry>
<entry>
<title><![CDATA[RichTextBox 富文本框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FrichTextBox%2Findex.html</url>
<content type="text"><![CDATA[TextBoxBaseBaseStyle基础文本控件默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 RichTextBoxBaseStyle : TextBoxBaseBaseStyle富文本框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 1<RichTextBox Margin="10,10" VerticalAlignment="Center" HorizontalAlignment="Center"></RichTextBox> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[ScrollViewer 滚动视图]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FscrollViewer%2Findex.html</url>
<content type="text"><![CDATA[ScrollViewerNativeBaseStyle原生滚动视图默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 12345<ScrollViewer> <Grid Height="500"> <TextBlock Text="内容区域"></TextBlock> </Grid></ScrollViewer> 效果: ScrollViewerUpDown显示上下按钮的滚动视图样式 案例: 12345678<ScrollViewer Style="{StaticResource ScrollViewerUpDown}"> <StackPanel Height="500"> <TextBlock Text="内容区域" Height="250"></TextBlock> <TextBlock Text="内容区域" Height="250"></TextBlock> <TextBlock Text="内容区域"></TextBlock> <TextBlock Text="内容区域"></TextBlock> </StackPanel></ScrollViewer> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[Seperator 分隔符]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fseperator%2Findex.html</url>
<content type="text"><![CDATA[SeparatorBaseStyle分隔符默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。]]></content>
</entry>
<entry>
<title><![CDATA[Slider 滑块]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fslider%2Findex.html</url>
<content type="text"><![CDATA[SliderBaseStyle滑块默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 1<Slider VerticalAlignment="Center" Width="400" Value="40" Maximum="100"/> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[TabControl 选项卡控件]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtabControl%2Findex.html</url>
<content type="text"><![CDATA[TabControlBaseStyle选项卡控件默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 12345678<TabControl Margin="10"> <TabItem Header="选项卡1"> </TabItem> <TabItem Header="选项卡2"> </TabItem> <TabItem Header="选项卡3"> </TabItem></TabControl> 效果: TabControlInLine : TabControlBaseStyle单行填充选项卡样式 案例: 12345678<TabControl Margin="10" Style="{StaticResource TabControlInLine}"> <TabItem Header="选项卡1"> </TabItem> <TabItem Header="选项卡2"> </TabItem> <TabItem Header="选项卡3"> </TabItem></TabControl> 效果: TabControlCapsule胶囊状选项卡样式 案例: 12345678<TabControl Margin="10" Style="{StaticResource TabControlCapsule}"> <TabItem Header="选项卡1"> </TabItem> <TabItem Header="选项卡2"> </TabItem> <TabItem Header="选项卡3"> </TabItem></TabControl> 效果: TabControlCapsuleSolid : TabControlCapsule胶囊状(实心)选项卡样式 案例: 12345678<TabControl Margin="10" Style="{StaticResource TabControlCapsuleSolid}"> <TabItem Header="选项卡1"> </TabItem> <TabItem Header="选项卡2"> </TabItem> <TabItem Header="选项卡3"> </TabItem></TabControl> 效果: 温馨提示可以使用属性TabStripPlacement设定头部标题的位置,效果如下:]]></content>
</entry>
<entry>
<title><![CDATA[StatusBar 状态栏]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FstatusBar%2Findex.html</url>
<content type="text"><![CDATA[StatusBarBaseStyle状态栏默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。]]></content>
</entry>
<entry>
<title><![CDATA[TextBox 文本框]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtextBox%2Findex.html</url>
<content type="text"><![CDATA[TextBoxBaseStyle原生文本框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 默认样式<TextBox Width="200" VerticalAlignment="Center"/> TextBoxExtendBaseStyle : TextBoxBaseStyle原生文本框扩展默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 TextBoxExtend : TextBoxExtendBaseStyle相对于原生文本框默认样式,它借助于附加属性可以实现标题、水印的功能。 标题在上<TextBox Style="{StaticResource TextBoxExtend}" hc:InfoElement.Title="这是标题" Width="200" VerticalAlignment="Center"/> 标题在左<TextBox Style="{StaticResource TextBoxExtend}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="这是标题" Width="300" VerticalAlignment="Center"/> 标题在左时,为了多个输入框左侧对齐,需要设置标题宽度,标题宽度无需逐个设置,可在外部容器上统一设置。 标题在上,带有水印参见Combobox 标题在上,带有水印,且为必填参见Combobox 标题在上,带有水印,且为必填,同时自定义必填提示符参见Combobox]]></content>
</entry>
<entry>
<title><![CDATA[ToolBar 工具条]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtoolBar%2Findex.html</url>
<content type="text"><![CDATA[ToolBarBaseStyle工具条默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 12345<ToolBar Padding="10,6" Header="Demo" VerticalAlignment="Center" HorizontalAlignment="Center"> <Button Content="Demo" Margin="10,0,0,0"/> <ToggleButton Content="Demo" Margin="10,0,0,0"/> <CheckBox Content="Demo" Margin="10,0,0,0"/></ToolBar> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[TextBlock 文本块]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtextBlock%2Findex.html</url>
<content type="text"><![CDATA[TextBlockBaseStyle文本块默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 TextBlockBoldBaseStyle文本块粗体默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例12345678910111213141516171819<StackPanel> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockLargeBold" Style="{StaticResource TextBlockLargeBold}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockLarge" Style="{StaticResource TextBlockLarge}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockHeaderBold" Style="{StaticResource TextBlockTitleBold}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockHeader" Style="{StaticResource TextBlockTitle}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockSubHeaderBold" Style="{StaticResource TextBlockSubTitleBold}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockSubHeader" Style="{StaticResource TextBlockSubTitle}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultBold" Style="{StaticResource TextBlockDefaultBold}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefault" Style="{StaticResource TextBlockDefault}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultAccent" Style="{StaticResource TextBlockDefaultAccent}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultSecLight" Style="{StaticResource TextBlockDefaultSecLight}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultThiLight" Style="{StaticResource TextBlockDefaultThiLight}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultPrimary" Style="{StaticResource TextBlockDefaultPrimary}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultDanger" Style="{StaticResource TextBlockDefaultDanger}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultWarning" Style="{StaticResource TextBlockDefaultWarning}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultInfo" Style="{StaticResource TextBlockDefaultInfo}"/> <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultSuccess" Style="{StaticResource TextBlockDefaultSuccess}"/></StackPanel>]]></content>
</entry>
<entry>
<title><![CDATA[ToolTip 工具提示]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtoolTip%2Findex.html</url>
<content type="text"><![CDATA[ToolTipBaseStyle工具提示默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。]]></content>
</entry>
<entry>
<title><![CDATA[Effect]]></title>
<url>%2Fhandycontrol%2Ftools%2Feffect%2Findex.html</url>
<content type="text"></content>
</entry>
<entry>
<title><![CDATA[Window 窗口]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2Fwindow%2Findex.html</url>
<content type="text"><![CDATA[wpf中窗口不会自动应用隐式样式,hc中提供了相关方法用以解决这个问题。 Window 窗口可通过 ConfigHelper.Instance.SetWindowDefaultStyle() 来设置窗口的默认样式。 NavigationWindow 导航窗口可通过 ConfigHelper.Instance.SetNavigationWindowDefaultStyle() 来设置导航窗口的默认样式。]]></content>
</entry>
<entry>
<title><![CDATA[TreeView 树视图]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtreeView%2Findex.html</url>
<content type="text"><![CDATA[TreeViewBaseStyle : BaseStyle树视图默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 案例: 123456789101112<TreeView Width="200" VerticalAlignment="Center"> <TreeViewItem Header="111"> <TreeViewItem Header="111"/> <TreeViewItem Header="222"/> <TreeViewItem Header="333"/> </TreeViewItem> <TreeViewItem Header="222"> <TreeViewItem Header="111"/> <TreeViewItem Header="222"/> <TreeViewItem Header="333"/> </TreeViewItem></TreeView> 效果: 相关样式 名称 继承自 用途描述 TreeViewItemBaseStyle BaseStyle 树视图项默认样式 ExpandCollapseToggleStyle 树视图折叠按钮样式]]></content>
</entry>
<entry>
<title><![CDATA[HatchBrushGenerator]]></title>
<url>%2Fhandycontrol%2Ftools%2FhatchBrushGenerator%2Findex.html</url>
<content type="text"></content>
</entry>
<entry>
<title><![CDATA[SideMenu 侧边菜单]]></title>
<url>%2Fhandycontrol%2Fextend_controls%2FsideMenu%2Findex.html</url>
<content type="text"><![CDATA[当界面为左右布局时,可以使用侧边菜单来导航. 目前侧边菜单只支持垂直布局,将来可能扩展为任意布局. 1234[DefaultProperty("Items")][ContentProperty("Items")][TemplatePart(Name = ElementPanel, Type = typeof(Panel))]public class SimpleItemsControl : Control 1public class HeaderedSimpleItemsControl : SimpleItemsControl 1public class SideMenu : HeaderedSimpleItemsControl 属性 属性 描述 默认值 备注 AutoSelect 是否自动选中首项 true ExpandMode 子项展开模式 ExpandMode.ShowOne PanelAreaLength 子项容器高度 NaN 目前侧边菜单只支持垂直布局,将来可能扩展为任意布局,故此属性名称没有定为PanelAreaHeight 事件 名称 说明 SelectionChanged 选中项改变时触发 案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142<hc:SideMenu BorderThickness="1" Width="200" Margin="32"> <hc:Interaction.Triggers> <hc:EventTrigger EventName="SelectionChanged"> <hc:EventToCommand Command="{Binding SwitchItemCmd}" PassEventArgsToCommand="True" /> </hc:EventTrigger> </hc:Interaction.Triggers> <hc:SideMenuItem Header="Overview"> <hc:SideMenuItem.Icon> <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Overview.png" Width="24" Height="24"/> </hc:SideMenuItem.Icon> <hc:SideMenuItem Header="Summary" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf2cb;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Dashboards" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf246;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Wiki" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xe82d;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> </hc:SideMenuItem> <hc:SideMenuItem Header="Boards"> <hc:SideMenuItem.Icon> <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Boards.png" Width="24" Height="24"/> </hc:SideMenuItem.Icon> <hc:SideMenuItem Header="Work Items"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf314;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Boards"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf444;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Backlogs"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf6bf;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Sprints"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf3b0;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Queries"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf2b8;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> </hc:SideMenuItem> <hc:SideMenuItem Header="Repos"> <hc:SideMenuItem.Icon> <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Repos.png" Width="24" Height="24"/> </hc:SideMenuItem.Icon> <hc:SideMenuItem Header="Files"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf30e;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Commits"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf293;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Pushes"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf298;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Branches"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xebc2;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Tags"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xe8ec;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Pull requests"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf296;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> </hc:SideMenuItem> <hc:SideMenuItem Header="Pipelines"> <hc:SideMenuItem.Icon> <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Pipelines.png" Width="24" Height="24"/> </hc:SideMenuItem.Icon> <hc:SideMenuItem Header="Builds"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf28f;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Releases"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf3b3;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Library"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xe8f1;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Task groups"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf2ae;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Deployment groups"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf29d;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> </hc:SideMenuItem> <hc:SideMenuItem Header="Test Plans"> <hc:SideMenuItem.Icon> <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-TestPlans.png" Width="24" Height="24"/> </hc:SideMenuItem.Icon> <hc:SideMenuItem Header="Test Plans"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf3ab;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Runs"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xf3ac;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> <hc:SideMenuItem Header="Load test"> <hc:SideMenuItem.Icon> <TextBlock Text="&#xe8a9;" Style="{StaticResource TextBlockFabricIcons}"/> </hc:SideMenuItem.Icon> </hc:SideMenuItem> </hc:SideMenuItem></hc:SideMenu>]]></content>
</entry>
<entry>
<title><![CDATA[ToggleButton 切换按钮]]></title>
<url>%2Fhandycontrol%2Fnative_controls%2FtoggleButton%2Findex.html</url>
<content type="text"><![CDATA[ToggleButtonBaseStyle : ButtonBaseBaseStyle切换按钮默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 所有继承此样式的按钮都可以使用IconElement中定义的附加属性来控制按钮中几何图形的属性。 所有继承此样式的按钮都可以使用BorderElement.CornerRadius附加属性来控制按钮的圆角大小。 相关样式 名称 继承自 用途描述 ToggleButtonPrimary ToggleButtonBaseStyle 主要 ToggleButtonSuccess ToggleButtonBaseStyle 成功 ToggleButtonInfo ToggleButtonBaseStyle 信息 ToggleButtonWarning ToggleButtonBaseStyle 警告 ToggleButtonDanger ToggleButtonBaseStyle 危险 案例: 12345678<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <ToggleButton MinWidth="100" Content="Default"/> <ToggleButton MinWidth="100" Content="Primary" Margin="0,6,0,0" Style="{StaticResource ToggleButtonPrimary}"/> <ToggleButton MinWidth="100" Content="Success" Margin="0,6,0,0" Style="{StaticResource ToggleButtonSuccess}"/> <ToggleButton MinWidth="100" Content="Info" Margin="0,6,0,0" Style="{StaticResource ToggleButtonInfo}"/> <ToggleButton MinWidth="100" Content="Warning" Margin="0,6,0,0" Style="{StaticResource ToggleButtonWarning}"/> <ToggleButton MinWidth="100" Content="Danger" Margin="0,6,0,0" Style="{StaticResource ToggleButtonDanger}"/></StackPanel> 效果: ToggleButtonIconBaseStyle : BaseStyle只显示图标的切换按钮,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 所有继承此样式的按钮都可以使用IconElement中定义的附加属性来控制按钮中几何图形的属性。 所有继承此样式的按钮都可以使用BorderElement.CornerRadius附加属性来控制按钮的圆角大小。 相关样式 名称 继承自 用途描述 ToggleButtonIcon ToggleButtonIconBaseStyle 默认 ToggleButtonIconPrimary ToggleButtonIconBaseStyle 主要 ToggleButtonIconSuccess ToggleButtonIconBaseStyle 成功 ToggleButtonIconInfo ToggleButtonIconBaseStyle 信息 ToggleButtonIconWarning ToggleButtonIconBaseStyle 警告 ToggleButtonIconDanger ToggleButtonIconBaseStyle 危险 ToggleButtonIconTransparent ToggleButtonIconBaseStyle 透明 案例: 123456789<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <ToggleButton Padding="6" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIcon}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconPrimary}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconSuccess}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconInfo}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconWarning}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconDanger}"/> <ToggleButton Margin="6,0,0,0" hc:IconElement.Geometry="{StaticResource ClockGeometry}" Style="{StaticResource ToggleButtonIconTransparent}"/></StackPanel> 效果: ToggleButtonSwitchBaseStyle : BaseStyle开关式切换按钮,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 相关样式 名称 继承自 ToggleButtonSwitch ToggleButtonSwitchBaseStyle 案例: 1234<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton Style="{StaticResource ToggleButtonSwitch}"/> <ToggleButton Margin="0,6,0,0" IsChecked="True" Style="{StaticResource ToggleButtonSwitch}"/></StackPanel> 效果: ToggleButtonFlip : BaseStyle翻转式切换按钮。 案例: 12345678910111213141516171819202122<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton BorderThickness="0" IsChecked="True" Style="{StaticResource ToggleButtonFlip}"> <hc:StatusSwitchElement.CheckedElement> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="关" Foreground="{DynamicResource TextIconBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <Border Background="{DynamicResource DangerBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="开" Foreground="{DynamicResource TextIconBrush}"/> </Border> </ToggleButton> <ToggleButton Margin="0,6,0,0" BorderThickness="0" IsChecked="False" Style="{StaticResource ToggleButtonFlip}"> <hc:StatusSwitchElement.CheckedElement> <Border Background="{DynamicResource PrimaryBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="关" Foreground="{DynamicResource TextIconBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <Border Background="{DynamicResource DangerBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="开" Foreground="{DynamicResource TextIconBrush}"/> </Border> </ToggleButton></StackPanel> 效果: ToggleButtonCustom : BaseStyle如果想完全自定义按钮的内容,则推荐使用此样式。ToggleButtonCustom中的内容完全由你自己决定。 案例: 12345678910111213141516171819202122<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton IsChecked="True" Style="{StaticResource ToggleButtonCustom}" hc:StatusSwitchElement.HideUncheckedElement="True"> <hc:StatusSwitchElement.CheckedElement> <Border Width="80" Height="30" CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource PrimaryBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <Border Width="80" Height="30" CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource BorderBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border> </ToggleButton> <ToggleButton Margin="0,6,0,0" IsChecked="False" Style="{StaticResource ToggleButtonCustom}" hc:StatusSwitchElement.HideUncheckedElement="True"> <hc:StatusSwitchElement.CheckedElement> <Border Width="80" Height="30" CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource PrimaryBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border> </hc:StatusSwitchElement.CheckedElement> <Border Width="80" Height="30" CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}"> <Ellipse Width="20" Height="20" Fill="{DynamicResource BorderBrush}" StrokeThickness="1" Stroke="{DynamicResource BorderBrush}"/> </Border> </ToggleButton></StackPanel> 效果:]]></content>
</entry>
<entry>
<title><![CDATA[MorphingAnimation]]></title>
<url>%2Fhandycontrol%2Ftools%2FmorphingAnimation%2Findex.html</url>
<content type="text"></content>
</entry>
</search>