ToB企服应用市场:ToB评测及商务社交产业平台

标题: WPF开发快速入门【2】WPF的基本特性（Style、Trigger、Template） [打印本页]
作者: 道家人    时间: 2022-9-16 17:19
标题: WPF开发快速入门【2】WPF的基本特性（Style、Trigger、Template）
概述
本文描述几个WPF的常用特性，包括：样式、触发器和控件模板。
 
样式/Style
Style就是控件的外观，在XAML中，我们通过修改控件的属性值来设置它的样式，如：
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 这样写的缺点是如果有一组控件具备同样的样式，代码不能复用，每个都要单独设置。所以，需要将样式代码提取出来，以便共用。
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  8. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  9. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  10. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  11. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  12. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  13. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  14. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  15. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  16. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 TargetType="Border"表示这个样式表是针对Border控件的，Border1是这个样式的名字，如果不设置Key，表示对该页面范围内的所有Border控件均有效。
上述这个样式是定义在该控件头部的，它的有效范围就是当前页面。如果有多个页面或窗体需要用到同样的样式，那就需要在App.xaml中进行定义。
实际应用时，我们一般不会直接在App.xaml中定义样式，而是会新建一个资源字典文件，在该资源文件中进行定义，然后在App.xaml中包含该文件即可。
资源文件的定义：Style/Colors.xaml
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 在App.xaml中包含该资源文件 
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  8. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  9. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  10. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  11. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  12. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  13. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  14. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  15. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  16. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  17. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  18. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  19. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  20. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  21. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  22. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  23. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  24. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  25. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  26. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  27. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  28. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  29. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  30. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  31. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  32. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  33. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  34. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 我们还可以在类库中定义样式，定义方式同上，同时，仍需要在在App.xaml中包含该资源文件，但包含方式和本地的不一样。
  1. [/code] 可以看出，这和我们引用第三方控件中的样式资源的方式是一样的。
  2. [code]
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
  
触发器/Triggger
在样式中应用触发器，是指在控件某个触发属性变化时，要执行的属性变化，或启动某个动画。
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  8. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  9. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 以上表示当IsMouseOver=True时，将修改该控件的FontSize和FontWeight属性。IsMouseOver=False时，控件属性将恢复原来的值。
 
控件模板/ControlTemplate
 有时候，我们需要完全修改控件的外观，这时就需要用到ControlTemplate，如下代码定义一个带指示灯的按钮
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  8. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  9. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 需要注意：这里有两个地方声明了TargetType="Button"。TemplateBinding 表示采用控件原来的值。在控件模板的定义中，也是可以使用Trigger的。
  2. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  3. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  4. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  5. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  6. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  7. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  8. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
  9. <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
复制代码
 与前文提到的Trigger不同，这里在设置属性时，多了一个TargetName="ell"
[code][/code] 这表示，该项操作是针对ell这个控件的。
如果没有指定TargetName，能设定的属性仅仅是包含Button这个控件所具备的属性，Button是没有Fill属性的，就算原始控件是包含Fill属性的，也不能保证该属性的设置能向下延伸到你想要修改的控件，所以在ControlTemplate中修改控件属性时应指定TargetName 。
 
资源
系列目录：WPF开发快速入门【0】前言与目录 
代码下载：Learn WPF: WPF学习笔记 (gitee.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4