向外观添加组件
代码
TestDrive.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application ... >
(...)
<s:Button label="Chart data" skinClass="ChartButtonSkin" .../>
(...)
</s:Application>
ChartButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009
" xmlns:s="library://ns.adobe.com/flex/spark
"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009
" minWidth="21
" minHeight="21
" alpha.disabled="0.5
">
<fx:Metadata>
<![CDATA[
[HostComponent
("spark.components.Button
")]
]]>
</fx:Metadata>
<fx:Script
fb:purpose="styling
">
<![CDATA[
static private const
exclusions:Array = ["labelDisplay
"];
override public
function
get
colorizeExclusions():Array {return
exclusions;}
override protected
function
initializationComplete():void
{ (...) }
override protected
function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{ (...) }
private
var
cornerRadius:Number = 2;
]]>
</fx:Script>
<s:states>
<s:State
name="up
" />
<s:State
name="over
" />
<s:State
name="down
" />
<s:State
name="disabled
" />
</s:states>
<!-- layer 1: shadow -->
<s:Rect
id="shadow
" left="-1
" right="-1
" top="-1
" bottom="-1
" radiusX="2
">
<s:fill>
<s:LinearGradient
rotation="90
">
<s:GradientEntry
color="0x000000
"
color.down="0xFFFFFF
"
alpha="0.01
"
alpha.down="0
" />
<s:GradientEntry
color="0x000000
"
color.down="0xFFFFFF
"
alpha="0.07
"
alpha.down="0.5
" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<s:Rect
id="fill
" ... />
<!-- layer 3: fill lowlight -->
<s:Rect
id="lowlight
".../>
<!-- layer 4: fill highlight -->
<s:Rect
id="highlight
" .../>
<!-- layer 5: highlight stroke (all states except down) -->
<s:Rect
id="highlightStroke
" .../>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect
id="hldownstroke1
" .../>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Rect
id="border
" .../>
<!-- layer 8: text -->
<s:Group
horizontalCenter="0
" verticalCenter="1
"
left="10
" right="10
" top="2
" bottom="2
" >
<s:layout>
<s:HorizontalLayout
verticalAlign="middle
"/>
</s:layout>
<s:Label
id="labelDisplay
" textAlign="center
" maxDisplayedLines="1
"/>
<s:BitmapImage
source="@Embed('pieIcon.gif')
"/>
</s:Group>
</s:SparkSkin>
返回页首
教程
在本教程中,您将创建一个带有文本和图标的 Button。要做到这一点,您将根据默认的 Button 外观新建一个 Button 外观,然后修改它的布局并向它添加一个新的 BitmapImage 组件。
第 1 步:新建一个 Button 外观文件。
在 Design 模式中,选择 Departments 状态中的“Chart data”按钮,在
Properties 视图中,单击 Skin 字段旁的按钮并选择“Create Skin”(请参阅图 12)。在“New MXML
Skin”对话框中,将它命名为 ChartButtonSkin
并将默认设置保持选中状态(请参阅图 13)。
图 12.
为 Chart Data Button 新建一个外观
图 13.
新建一个 ChartButtonSkin 作为默认 ButtonSkin 的副本。
在 TestDrive.mxml 中,切换到 Source 模式并查看 Chart Data Button。它的 skinClass
样式此时设置为新外观 ChartButtonSkin 的名称-此时与默认外观相同。(也可以通过样式表设置此样式。)
<s:Button includeIn="Departments" x="609" y="293" label="Chart data" skinClass="ChartButtonSkin"/>
第 2 步:查看外观类。
在 ChartButtonSkin.mxml 中,切换到 Source 模式并查看代码。
主机组件指定了此外观可应用于哪些组件:
[HostComponent("spark.components.Button")]
之后是几个函数,它们根据设置的任何样式值调整图形,然后指定状态。这些与主机组件 Button 的内容吻合。
之后可以看到图形标签,包括多个 Rect
和 LinearGradient
标签,它们绘制矩形和渐变-应用程序中所有 Button 的图形。
图 14.
查看图形代码。
最后可以看到一个 Label 控件。当您设置 Button 的 label
属性时,会设置这个组件的 text
属性。它称为外观部件。不同的属性指定了 Label 在 Button 上的显示位置。
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
第 3 步:将 Label 放入使用水平布局的 Group 容器中。
将 Group 组件的 layout
属性设置为 HorizontalLayout 类的一个实例。在 Group 中移动 Label,酌情将布局属性从 Label 控件传递给 Group 或 HorizontalLayout。
您将创建一个带 HorizontalLayout 的 Group,因为您希望 Button 上的 Label 和图标(水平)相邻。
您的代码应当如下:
<s:Group horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"/>
</s:Group>
为 TestDrive.mxml 运行应用程序或切换到 Design 模式。“Chart Data”按钮的外观应当与之前完全相同;您尚未更改它。
第 4 步:添加 BitmapImage 组件。
在 Group 中,添加一个 BitmapImage 组件并将它的 source
属性设置为项目文件夹中的一个嵌入图像 (pieIcon.gif)。
您也可以使用自己的图像或 Test Drive 文件随附的图像。要使用自己的图像,只需将它复制到项目 src 文件夹中,然后引用它即可。要使用 Test Drive 图标,请复制本单元样本文件
(ZIP, 223 KB)
中的 pieIcon.gif 文件,将它粘贴到项目 src 文件夹中。
您的代码应当如下:
<s:Group horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"/>
<s:BitmapImage source="@Embed('pieIcon.gif')"/>
</s:Group>
保存此文件。为 TestDrive.mxml 切换到 Design 模式。您的 Button 上应当可以看到该图标(请参阅图 15)。移动 Button,确保它们没有重叠在一起。
图 15.
查看 Chart Data Button 上的新图标。
分享到:
相关推荐
- **BackGroundImageLayout**:设置BackGroundImageLayout属性为Zoom,这样可以使图标在Button中以居中缩放的形式展示,确保图标完整且清晰。 - **去除边框**:如果希望Button没有边框,可以在FlatAppearance属性...
- 对于控件如按钮或菜单项,可以通过`Button.Image`或`ToolStripMenuItem.Image`属性设置图标。 3. 图标的设计原则: - 清晰易识:图标应简洁明了,一眼就能辨认出其含义。 - 一致性:应用中的所有图标应保持...
例如,在JavaFX中,可以使用`Image`类加载图片,再用`Button`的`setGraphic()`方法设置图标。 三、调整图标大小 图标大小的调整需要考虑兼容性和可读性。通常,图标大小应与工具栏的整体风格和尺寸协调。以下是一些...
4. **设置按钮图标**:在`OnInitDialog`函数中,调用`m_button.SetIcon`函数,传入图标资源的句柄。这个句柄可以通过`LoadIcon`函数获得,代码如下: ```cpp HICON hIcon = AfxGetApp()->LoadIcon(IDI_ICON1); // ...
2. **显示图标**:在WinForms应用中,你可以将图标设置为Form的Icon属性,或者将其显示在控件如Button、MenuStrip、ToolBar等上。在WPF中,可以使用Image控件结合BitmapSource来显示图标。 3. **图标资源管理**:...
在实际开发中,开发者可能使用像Adobe Illustrator或Inkscape这样的矢量图形软件来创建SVG图标,确保图标可以在不同尺寸下不失真。此外,为了支持不同操作系统和设备,开发者还需要提供不同格式和尺寸的图标。 为了...
或者为Button等控件设置图标: ```csharp button1.Image = Properties.Resources.myButtonIcon; ``` 总的来说,"图标.rar"提供了一套全面的Winform应用图标资源,对于那些需要提升其应用程序视觉效果的开发者来说...
2. **Winform开发中的图标使用**:在Winform开发中,图标可以通过设置控件的属性来应用,如MenuStrip、ToolBar或Button的Image属性。这些图标可以作为按钮的背景,或者在菜单项旁显示,以便用户一目了然地识别功能。...
例如,`<button class="icon-save">保存</button>`,其中`icon-save`是一个预定义的CSS类,它设置按钮的背景图像为“保存”图标。 2. SVG图标:现代浏览器支持SVG格式的图标,这提供了更好的清晰度和缩放效果。图标...
6. **图标的设计工具**:常用的图标设计工具包括Adobe Illustrator、Sketch、Figma以及专门的图标设计软件如IconJar、Glyphish等。这些工具提供丰富的图形资源和编辑功能,帮助开发者创建出高质量的应用图标。 7. *...
- 控件如Button、MenuStrip、ToolStrip等,可以设置`Button.Image`、`ToolStripMenuItem.Icon`等属性来展示图标。 - 在WinForms中,`Control.BackgroundImage`和`Control.BackgroundImageLayout`可以用来设置背景...
对于其他控件如Button,可以在`Image`或`BackgroundImage`属性中设置图标。 - **WPF**:在XAML代码中,可以使用`Icon`属性为Window设置图标,例如 `<Window Icon="path_to_icon.ico">`。对于其他控件,如Button,...
- 然后,通过`Properties`窗口设置控件的`Icon`属性,或者在代码中使用如`button1.Icon = Properties.Resources.myIcon;`这样的语句。 4. **图标库(Library)**:在开发过程中,使用预定义的图标库可以提高效率,...
5. **自定义图标设计**:如果提供的图标集合中没有满意的图标,开发者还可以使用图形编辑工具(如Adobe Photoshop、GIMP等)设计自己的ICO图标,然后将其转换为VB6可用的格式。 总之,这个"VB能用的编程ICO图标集合...
这里的"标志.abr"文件可能是一个Adobe Brush文件,通常用于存储画笔预设。在Java编程中,我们不会直接使用这种格式的文件,但设计师可能会用它来创建图标的源图像。如果你需要将abr中的图案转化为图标,通常需要借助...
"IconButton",正如标题"iconbutton_src.rar_图标按钮"所示,是一种在软件或网站中常见且重要的设计元素,它将功能和美学相结合,使得用户可以通过点击带有特定图标的按钮来执行操作。在本案例中,我们有一个名为...
- 这些图标可能使用了Adobe Illustrator、Sketch、Figma等专业图形设计软件创建。 7. **编程集成**: - 在实际的应用程序中,这些图标会被编程语言如JavaScript、Swift、Java等集成,并与事件处理函数绑定,实现...
然后,在需要使用图标的控件属性(如Form的Icon属性或Button的Image属性)中设置这些资源。 6. **优化图标大小**:描述中提到,这些图标体积小,这意味着它们可能已经过优化,降低了文件大小,不会过多占用项目的...
- **JavaFX**:JavaFX提供了`ToolBar`类,可以通过添加`Button`对象(带有`graphic`属性来设置图标)来构建工具栏。 - **Qt**:在Qt中,可以使用`QToolBar`和`QAction`,`QAction`可以关联图标,并添加到`QToolBar...