WPF学习笔记02-XAML语法

三石敢当

上一章我们对XAML有个初步的认识了，知道XAML是用来设计UI的，那么说怎么设计，基本用法和语法分别是什么呢？接下来我们就系统的简单学习一下XAML的一些基本语法吧。
1 <Rectangle
2     Width="50"
3     Height="50"
4     Margin="0,50"
5     Fill="Blue" /><Button
2     Width="120"
3     Height="50"
4     Click="Button_Click"
5     Content="点 我" />- XAML的结构

如果学习过Winform或者其他桌面设计的应该知道我们最终设计的是与人员交互的图形界面。比如在Winform当中你去设计界面之后，VS自动给你生成了design.cs，我们打开能够看到里边首先是声明了对应的类，然后设置了对应类的属性。对于xaml而言也差不多，不过唯一的区别就是，xaml的结构相对于其他设计型而言是属于树结构。我们知道一棵树有对应树干，树干有很多分支，分支上边又可以有很多分支。这个就是树结构。xaml就是如此。
在Winform当中比如我们设计一个

其中上边控件一般情况下是我们默认拖上去的，当我们查看design.cs中发现是没有层级结构的

但是在xaml中如果要设计同样的界面，是需要在树结构的基础上去设计对应界面

在WPF中基本摒弃掉了传统Winform的拖拉控件式布局，上面界面的代码如下：

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" /><Window
10. 2     x:Class="FirstWPFDemo.MainWindow"
11. 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
12. 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
13. 5     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
14. 6     xmlns:local="clr-namespace:FirstWPFDemo"
15. 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
16. 8     Title="MainWindow"
17. 9     Width="225"
18. 10     Height="250"
19. 11 <Rectangle
20. 2     Width="50"
21. 3     Height="50"
22. 4     Margin="0,50"
23. 5     Fill="Blue" /><Button
24. 2     Width="120"
25. 3     Height="50"
26. 4     Click="Button_Click"
27. 5     Content="点 我" />    mc:Ignorable="d">
28. 12     <StackPanel Margin="15">
29. 13         <StackPanel Margin="5" Orientation="Horizontal">
30. 14<ClassName>
31.   <CalssName.PropertyName>
32.    
33.   </CalssName.PropertyName>  
34. </ClassName>   <Label Content="姓名：" />
35. 15<ClassName>
36.   <CalssName.PropertyName>
37.    
38.   </CalssName.PropertyName>  
39. </ClassName>   <TextBox
40. 16<ClassName>
41.   <CalssName.PropertyName>
42.    
43.   </CalssName.PropertyName>  
44. </ClassName>       Width="120"
45. 17<ClassName>
46.   <CalssName.PropertyName>
47.    
48.   </CalssName.PropertyName>  
49. </ClassName>       Height="30"
50. 18<ClassName>
51.   <CalssName.PropertyName>
52.    
53.   </CalssName.PropertyName>  
54. </ClassName>       VerticalAlignment="Top" />
55. 19         </StackPanel>
56. 20         <StackPanel Margin="5" Orientation="Horizontal">
57. 21 <Rectangle
58. 2     Width="50"
59. 3     Height="50"
60. 4     Margin="0,50"
61. 5     Fill="Blue" /><Button
62. 2     Width="120"
63. 3     Height="50"
64. 4     Click="Button_Click"
65. 5     Content="点 我" /><ClassName>
66.   <CalssName.PropertyName>
67.    
68.   </CalssName.PropertyName>  
69. </ClassName>  <Label Content="性别：" />
70. 22<ClassName>
71.   <CalssName.PropertyName>
72.    
73.   </CalssName.PropertyName>  
74. </ClassName>   <RadioButton VerticalAlignment="Center" Content="男" />
75. 23<ClassName>
76.   <CalssName.PropertyName>
77.    
78.   </CalssName.PropertyName>  
79. </ClassName>   <RadioButton VerticalAlignment="Center" Content="女" />
80. 24         </StackPanel>
81. 25         <StackPanel Margin="5" Orientation="Horizontal">
82. 26<ClassName>
83.   <CalssName.PropertyName>
84.    
85.   </CalssName.PropertyName>  
86. </ClassName>   <Label Content="年级：" />
87. 27<ClassName>
88.   <CalssName.PropertyName>
89.    
90.   </CalssName.PropertyName>  
91. </ClassName>   <ComboBox Width="120" VerticalAlignment="Center">
92. 28<ClassName>
93.   <CalssName.PropertyName>
94.    
95.   </CalssName.PropertyName>  
96. </ClassName>       <ComboBox.Items>
97. 29<ClassName>
98.   <CalssName.PropertyName>
99.    
100.   </CalssName.PropertyName>  
101. </ClassName><ClassName>
102.   <CalssName.PropertyName>
103.    
104.   </CalssName.PropertyName>  
105. </ClassName> <ComboBoxItem Content="请选择" IsSelected="True" />
106. 30<ClassName>
107.   <CalssName.PropertyName>
108.    
109.   </CalssName.PropertyName>  
110. </ClassName><ClassName>
111.   <CalssName.PropertyName>
112.    
113.   </CalssName.PropertyName>  
114. </ClassName> <ComboBoxItem Content="一年级" />
115. 31 <Rectangle
116. 2     Width="50"
117. 3     Height="50"
118. 4     Margin="0,50"
119. 5     Fill="Blue" /><Button
120. 2     Width="120"
121. 3     Height="50"
122. 4     Click="Button_Click"
123. 5     Content="点 我" /><ClassName>
124.   <CalssName.PropertyName>
125.    
126.   </CalssName.PropertyName>  
127. </ClassName><ClassName>
128.   <CalssName.PropertyName>
129.    
130.   </CalssName.PropertyName>  
131. </ClassName><ComboBoxItem Content="二年级" />
132. 32<ClassName>
133.   <CalssName.PropertyName>
134.    
135.   </CalssName.PropertyName>  
136. </ClassName>       </ComboBox.Items>
137. 33<ClassName>
138.   <CalssName.PropertyName>
139.    
140.   </CalssName.PropertyName>  
141. </ClassName>   </ComboBox>
142. 34         </StackPanel>
143. 35         <Button
144. 36<ClassName>
145.   <CalssName.PropertyName>
146.    
147.   </CalssName.PropertyName>  
148. </ClassName>   Width="60"
149. 37<ClassName>
150.   <CalssName.PropertyName>
151.    
152.   </CalssName.PropertyName>  
153. </ClassName>   Margin="0,5,20,0"
154. 38<ClassName>
155.   <CalssName.PropertyName>
156.    
157.   </CalssName.PropertyName>  
158. </ClassName>   HorizontalAlignment="Right"
159. 39<ClassName>
160.   <CalssName.PropertyName>
161.    
162.   </CalssName.PropertyName>  
163. </ClassName>   Content="保存" />
164. 40     </StackPanel>
165. 41 <Rectangle
166. 2     Width="50"
167. 3     Height="50"
168. 4     Margin="0,50"
169. 5     Fill="Blue" /><Button
170. 2     Width="120"
171. 3     Height="50"
172. 4     Click="Button_Click"
173. 5     Content="点 我" /></Window>

复制代码

 
我们能够看到就是在Window的树干下边有了StackPanel，在StackPanel下又有多个容器和按钮。最终构成了对应的界面。不难看出这个就是在树形结构的基础上，延伸出来的构造。
2 - 为对象属性赋值的语法

在上述Demo中，虽然你现在还不知道怎么布局，怎么设置属性。但是其中我们能够观察到最简单的一些赋值，比如当我们给Button按钮赋值文本的时候，我们直接设置的是Button的Content属性。如这种设置。这种呢我们叫做简单的字符串属性设置。
2.1 <Rectangle
2     Width="50"
3     Height="50"
4     Margin="0,50"
5     Fill="Blue" /><Button
2     Width="120"
3     Height="50"
4     Click="Button_Click"
5     Content="点 我" />- 简单属性赋值

比如我们现在需要设置一个宽度为150，高度为40，字体大小为15，字体颜色为蓝色，默认文本是“你好，WPF”的文本输入框那么我们需要这么设置

1. [/code] 其中呢，Width为宽度，Height为高度，FontSize为字体大小，Text为文本内容。Foreground为字体颜色
2. 实现内容为
3. [align=center][/align]
4. 此时不知道作为初学者的你发没发现一个问题。我设置的所有属性都是字符串类型。但是界面渲染的时候还是按照对应属性进行的渲染，比如颜色。我设置的是字符串类型的值，后台是如何知道是颜色呢？这就需要我们学习到一个知识点叫做：类型转换器
5. [size=5]2.2 - 类型转换器 [/size]
7. 它可以将任何特定类型的数据转换为其他类型，同理，也可以将其他任何类型转换为特定的数据类型。比如刚才咱们介绍的那种情况。赋值赋的是字符串类型，但是渲染出来还是颜色。其实XAML解析器通过两个步骤查找到了对应的类型转换器。
8. 1）检查对应的属性声明。比如Foreground属性，查看是否存在TypeConverter特性。如果提供了，即证明将指定哪种类型进行转换。【比如Width、Height等】[b]如果要深究LengthConverter等是怎么工作的之后可以看看WPF源码，简单介绍下，所欲的类型转换器都继承于[/b][b][i]TypeConverter 都重写了[/i][/b][b]CanConvertFrom CanConvertTo 和 ConvertFrom。赋值时会先判断所输入是否能够完成转换。其他的可以直接去看源代码[/b]
9. [code] 1 <Rectangle
10. 2     Width="50"
11. 3     Height="50"
12. 4     Margin="0,50"
13. 5     Fill="Blue" /><Button
14. 2     Width="120"
15. 3     Height="50"
16. 4     Click="Button_Click"
17. 5     Content="点 我" />[TypeConverter(typeof(LengthConverter))]
18. 2 [Localizability(LocalizationCategory.None, Readability = Readability.Unreadable)]
19. 3 public double Height
20. 4 {
21. 5     get
22. 6     {
23. 7         return (double)GetValue(HeightProperty);
24. 8     }
25. 9     set
26. 10     {
27. 11 <Rectangle
28. 2     Width="50"
29. 3     Height="50"
30. 4     Margin="0,50"
31. 5     Fill="Blue" /><Button
32. 2     Width="120"
33. 3     Height="50"
34. 4     Click="Button_Click"
35. 5     Content="点 我" />        SetValue(HeightProperty, value);
36. 12     }
37. 13 }

复制代码

 
2）如果再属性声明中没有TypeConverter特性，XAML解析器将检查对应类的声明，如，Foreground属性使用了Brush对象，由于Brush使用TypeConverter（typeof（BrushConverter））特性声明进行了修饰，因此Brush类及其子类使用BrushConverter类型转换器。可以直接F12查看

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />[Bindable(true)]
10. 2 [Category("Appearance")]
11. 3 public Brush Foreground
12. 4 {
13. 5     get
14. 6     {
15. 7         return (Brush)GetValue(ForegroundProperty);
16. 8     }
17. 9     set
18. 10     {
19. 11 <Rectangle
20. 2     Width="50"
21. 3     Height="50"
22. 4     Margin="0,50"
23. 5     Fill="Blue" /><Button
24. 2     Width="120"
25. 3     Height="50"
26. 4     Click="Button_Click"
27. 5     Content="点 我" />        SetValue(ForegroundProperty, value);
28. 12     }
29. 13 }

复制代码

 

我们写个Demo来验证下对应的映射关系
首先新建一个Person类

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />/// <summary>
10. 2 /// Person 人员类
11. 3 /// </summary>
12. 4 public class Person
13. 5 {
14. 6     //人员姓名
15. 7     public string PerName { get; set; }
16. 8     //人员类别
17. 9     public Person PerChild { get; set; }
18. 10 }

复制代码

 
此时我们在界面上使用新建的类（其中部分语法可能看不懂之后会说到）

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" /><Window.Resources>
10. 2     <local:Person
11. 3         x:Key="per"
12. 4         PerChild="李四"
13. 5         PerName="张三" />
14. 6 </Window.Resources>

复制代码

 
新建一个Button按钮，当点击的时候我们获取到PerChild并弹窗

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />

复制代码

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" /> private void Button_Click(object sender, RoutedEventArgs e)2 {3     var per = this.FindResource("per") as Person;4     MessageBox.Show(per.PerChild.PerName);5 }

复制代码

 
我们编译之后发现能够编译成功，但是有对应的提示

这是为什么呢？因为我们后台定义的PerChild是Person类型的，我们是没办法直接从string类型的医生转换为对应类别类型的。怎么去处理这个问题呢？
1）我们首先声明一个类型转换器StringToPersonTypeConverter

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />///  2 /// string类型转换Person转换器 3 ///  4 public class StringToPersonTypeConverter : TypeConverter 5 { 6      public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value) 7     { 8         //如果值为string类型的值时 9         if (value is string)10         {11 <Rectangle
10. 2     Width="50"
11. 3     Height="50"
12. 4     Margin="0,50"
13. 5     Fill="Blue" /><Button
14. 2     Width="120"
15. 3     Height="50"
16. 4     Click="Button_Click"
17. 5     Content="点 我" /><ClassName>
18.   <CalssName.PropertyName>
19.    
20.   </CalssName.PropertyName>  
21. </ClassName>  Person per = new Person();12<ClassName>
22.   <CalssName.PropertyName>
23.    
24.   </CalssName.PropertyName>  
25. </ClassName>   per.PerName = value as string;13<ClassName>
26.   <CalssName.PropertyName>
27.    
28.   </CalssName.PropertyName>  
29. </ClassName>   return per;14         }15         return base.ConvertFrom(context, culture, value);16     }17 }

复制代码

 
2） 声明完成之后再Person上边加上对应特性

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />[TypeConverterAttribute(typeof(StringToPersonTypeConverter))]

复制代码

 
此时我们再重新运行的时候就可以弹出对应李四了。
2.3 - 复杂属性赋值

有一些属性是完备的对象，有自己的一组属性。在简单属性直接赋值的基础上衍生出对应的属性元素语法。属性元素指的是某个标签的一个元素对应这个标签的一个属性。如

1. <ClassName>
2.   <CalssName.PropertyName>
3.    
4.   </CalssName.PropertyName>  
5. </ClassName>

复制代码

比如，就简单在界面上画一个矩形

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" />

复制代码

 

那么说问题来了，众所周知，对于WPF而言，渲染和动画也是比较亮点的功能。假如此时有个需求背景不仅仅是纯蓝色，而是渐变色，怎么去处理，只是使用简单的属性赋值Fill="Blue"已经满足不了当前需求了，这时候应该怎么做呢？【先不用关心你不认识的对象后边会介绍到】

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" /> 5      6<ClassName>
10.   <CalssName.PropertyName>
11.    
12.   </CalssName.PropertyName>  
13. </ClassName>7<ClassName>
14.   <CalssName.PropertyName>
15.    
16.   </CalssName.PropertyName>  
17. </ClassName>    8<ClassName>
18.   <CalssName.PropertyName>
19.    
20.   </CalssName.PropertyName>  
21. </ClassName>        9<ClassName>
22.   <CalssName.PropertyName>
23.    
24.   </CalssName.PropertyName>  
25. </ClassName>       10<ClassName>
26.   <CalssName.PropertyName>
27.    
28.   </CalssName.PropertyName>  
29. </ClassName>       11 <Rectangle
30. 2     Width="50"
31. 3     Height="50"
32. 4     Margin="0,50"
33. 5     Fill="Blue" /><Button
34. 2     Width="120"
35. 3     Height="50"
36. 4     Click="Button_Click"
37. 5     Content="点 我" /><ClassName>
38.   <CalssName.PropertyName>
39.    
40.   </CalssName.PropertyName>  
41. </ClassName>  12         13     14

复制代码

 
其中中使用了线性渐变画刷来填充【后续介绍Brush时会提及到】。此时此刻我们就能感觉到，简单赋值完不成的使用复杂属性赋值的方式的优势就体现出来了。界面如下

2.4 - 标记扩展

正常情况下对于xaml而言，属性赋值这块已经比较好了，但是我们发现我们的赋值都是固定的，属于硬性编码复制，假如我想将一个对象的值赋值给某个属性或者将一个控件的值赋值给另外一个控件时这时候我们怎么处理？这时候就要用到我们所说的标记扩展了。标记扩展是一种非常规的方式设置属性的语法。【其实就是一种特殊的简单赋值】
设置语法：{标记扩展类 参数}
使用花括号括起来。比如我们给文本框的字体颜色赋值

1. [/code] 其实两者都实现了给对应前景色赋值，不过一个使用了简单属性赋值方式一个使用了标记扩展的方式。下者是获取了系统颜色里边的控件激活时的颜色。
2. [align=center][/align]
3. 我们写一个Demo吧，这个Demo是实现当我们滑动控件时变更Label字体的大小。
4. [code]1 <Rectangle
5. 2     Width="50"
6. 3     Height="50"
7. 4     Margin="0,50"
8. 5     Fill="Blue" /><Button
9. 2     Width="120"
10. 3     Height="50"
11. 4     Click="Button_Click"
12. 5     Content="点 我" />5 6

复制代码

 
实现效果如图所示【先不需要关心Binding这些后续会有专门介绍】

2.5 - 附加属性

附加属性，顾名思义就是附加上去的属性。在WPF中附加属性一般都常用语控件布局方面【后续有专门介绍布局章节】附加属性始终使用包含两部分的命名格式：定义类型.属性名。
附加属性其实根本不是真正的属性。实际上被转为方法来调用了，最终调用的是静态方法DefiningType.SetPropertyName()。我们写个小Demo就能看出来附加属性的基本使用方法了。

1. 1 <Rectangle
2. 2     Width="50"
3. 3     Height="50"
4. 4     Margin="0,50"
5. 5     Fill="Blue" /><Button
6. 2     Width="120"
7. 3     Height="50"
8. 4     Click="Button_Click"
9. 5     Content="点 我" /> 2     3         4         5     6     7         8         9    10    11 <Rectangle
10. 2     Width="50"
11. 3     Height="50"
12. 4     Margin="0,50"
13. 5     Fill="Blue" /><Button
14. 2     Width="120"
15. 3     Height="50"
16. 4     Click="Button_Click"
17. 5     Content="点 我" />   12

复制代码

 
我们定义了两行两列，分别放置了两个TextBox。其中Grid.Row=“0”这个就叫做附加属性。附加属性是WPF的核心要素之一。比如将Row属性定义为附加属性，可以确保所有控件都可以使用他，即使我们把TextBox控件换成Button、Radio、ComboBox等等。
3 - 事件

以上我们介绍的所有特性都被映射为了Property属性。其实特性也可以关联事件处理程序。比如Button按钮标签有个特性叫Click的闪电形状。它就是Button类的Click事件【如果对于写过Winform的来说并不陌生】
语法：事件名称=“事件处理程序的方法名”

1. [/code]在Click事件名称上点击F12进入后台事件编写上边
2. [code]1 <Rectangle
3. 2     Width="50"
4. 3     Height="50"
5. 4     Margin="0,50"
6. 5     Fill="Blue" /><Button
7. 2     Width="120"
8. 3     Height="50"
9. 4     Click="Button_Click"
10. 5     Content="点 我" />private void Button_Click(object sender, RoutedEventArgs e)2 {3     MessageBox.Show("你好呀！");4 }

复制代码

 
在这个事件当中我们可以写我们对应的代码逻辑。在WPF中事件模型和其他类型.NET应用程序事件模型不通。WPF的事件模型依赖于事件。之后详解。
其中WPF生成对应事件名称规则，是如果对应对象有name属性则生成name_事件名称比如Click，name为btn。则生成的为btn_Click。如果没有name属性则默认生成类名_事件名称比如Click默认为Button_Click。
4 - 引用命名空间

一般情况下我们写的项目不可能只有一个，当我们需要引用其他程序集或者其他模块的时候，我们需要引用对应的命名空间。我们在上一节已经介绍过了命名空间如何引用。语法为xmlns[可省略的前缀名]："命名空间所在位置"。

其中当我们需要引用对应程序集时，语法为
xmlns[前缀名]："clr-namespace:Namespace;assembly=AssemblyName"

当我们实战项目经验多了，就会发现这个引用命名空间其实很简单。
以上呢就是这节介绍的xaml的一些基本语法。其中一些demo还需要自己练习。下边进入xaml的UI学习。

来源:https://www.cnblogs.com/iceamos/archive/2023/03/01/17168599.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！