对于C++界面库：使用Graphic Element Template制作按钮模板的说明进行详细介绍，模板的属性一共有6个：x、y、w、h、state、content，其中state有normal、hot和press三个取值。XML、代码和截图如下：

下面的模板文件有两个模板，分别是background和button。background制作玻璃效果，button给background加上一个边框，展示了property evaluation和template reference的功能：

 1  version="1.0" encoding="utf-8" ?> 
 2  xmlns="http://tempuri.org/irconfig.xsd"> 
 3    
 4      name="outer_border_brush" kind="solid"> 
 5        r="96" g="128" b="255" a="255"/> 
 6      
 7       
 8      name="up_content_brush_normal" kind="linear_gradient" gradient_angle="0"> 
 9        r="224" g="224" b="224" a="255"/> 
10        r="192" g="192" b="192" a="255"/> 
11      
12      name="down_content_brush_normal" kind="linear_gradient" gradient_angle="0"> 
13        r="128" g="128" b="128" a="255"/> 
14        r="160" g="160" b="160" a="255"/> 
15      
16       
17      name="up_content_brush_hot" kind="linear_gradient" gradient_angle="0"> 
18        r="224" g="224" b="255" a="255"/> 
19        r="192" g="192" b="255" a="255"/> 
20      
21      name="down_content_brush_hot" kind="linear_gradient" gradient_angle="0"> 
22        r="128" g="128" b="255" a="255"/> 
23        r="160" g="160" b="255" a="255"/> 
24      
25       
26      name="up_content_brush_press" kind="linear_gradient" gradient_angle="0"> 
27        r="224" g="224" b="255" a="255"/> 
28        r="160" g="160" b="255" a="255"/> 
29      
30      name="down_content_brush_press" kind="linear_gradient" gradient_angle="0"> 
31        r="32" g="32" b="255" a="255"/> 
32        r="96" g="96" b="255" a="255"/> 
33      
34       
35      name="background_brush" kind="solid"> 
36        r="255" g="255" b="255" a="255"/> 
37      
38      name="text_brush" kind="solid"> 
39        r="0" g="0" b="0" a="255"/> 
40      
41      name="outer_border_pen" brush="outer_border_brush" endcap="round" join="round" weight="1"/> 
42      name="text_font" face="微软雅黑" size="18"/> 
43    
44    
45      name="background"> 
46        
47          name="x" type="int" default="0"/> 
48          name="y" type="int" default="0"/> 
49          name="w" type="int" default="100"/> 
50          name="h" type="int" default="100"/> 
51          name="state" type="str" default="normal"/> 
52          name="content" type="str" default=""/> 
53        
54        
55          name="client" x="$x" y="$y" width="$w" height="$h"> 
56            brush="text_brush" font="text_font" text="$content" x="(client.width-this.width)/2" y="(client.height-this.height)/2"/> 
57   
58            brush="up_content_brush_normal" visible="$state=='normal'" 
59                      x="0" y="0" width="client.width" height="client.height/2" /> 
60            brush="down_content_brush_normal" visible="$state=='normal'" 
61                      x="0" y="client.height/2" width="client.width" height="client.height/2+1" /> 
62   
63            brush="up_content_brush_hot" visible="$state=='hot'" 
64                      x="0" y="0" width="client.width" height="client.height*4/9" /> 
65            brush="down_content_brush_hot" visible="$state=='hot'" 
66                      x="0" y="client.height*4/9" width="client.width" height="client.height*5/9+1" /> 
67   
68            brush="up_content_brush_press" visible="$state=='press'" 
69                      x="0" y="0" width="client.width" height="client.height*5/9" /> 
70            brush="down_content_brush_press" visible="$state=='press'" 
71                      x="0" y="client.height*5/9" width="client.width" height="client.height*4/9+1" /> 
72          
73        
74      
75      name="button"> 
76        
77          name="x" type="int" default="0"/> 
78          name="y" type="int" default="0"/> 
79          name="w" type="int" default="100"/>