如果你看过这个TouchGFX入门系列的前三篇文章（1，2，3），是否有这种印象：TouchGFX似乎也不过如此嘛，图形界面很一般呀。其实，我们只是看到了冰山的一角，TouchGFX功能非常强大，必然十分复杂，实际上它是能做出非常酷炫的界面的，今天介绍一个用TouchGFX制作的“滚轮”控件，谈不上炫酷，只是稍有“姿色”，但代表了TouchGFX对用户定制控件的强大支持能力。同时，也以这个定制的控件作为本次TouchGFX入门篇系列的结束。

本讲中，我们将制作一个可以上下滑动的菜单条，它可以像老式拨盘电话机一样沿着圆弧方向滑动：

图一 鼠标点击这个图，可以看到放大的、清晰的

拨盘电话？暴露年龄了，长得像这个样子的东东：

图二

项目中要用到一些图标（图片），下载地址：https://pan.baidu.com/s/1658eTb2YThyvbGCcmRIc9Q，提取码：kkfh，文件名：《touchgfx入门4_图片.zip》。

在 TouchGFX Designer 中，新建一个项目，选择 STM32F769I-DISCO 板子、空模板。将上面的“touchgfx入门4_图片.zip”文件解压到TouchGFX生成项目的images文件夹中：

图三

在Designer中会自动显示加入的图片：

图四

随后，点击下图左上角的 + 号，创建用户定制的控件：

图五

点击 icon00.png 那个电话图标，并修改属性如下图：

图六

再添加一个TextArea控件：

图七

并且如下图所示修改通配符：

图八

修改20号字体的通配符数字范围：

图九

Ctrl+S 保存，接着回到Screens面板，在控件栏的最下面可以看到用户刚刚创建的定制控件 MenuElement：

图十

先试试自己创建的控件好不好用。为了用全黑色背景衬托控件中的文字，先放置一个全黑的 Box With Border 控件，属性设置见上图。

接着，鼠标点击 MenuElement 控件，控件显示如下（有点小酷的样子了吧^_^）：

图十一

下面开始使用这个控件“组合”出一个滑动菜单界面，核心是使用TouchGFX自带的 Scroll Wheel 控件。先删除掉上图中为了测试放置的定制控件。为了美化界面，先放一个背景图：

图十二

随后点击 Scroll Wheel 控件、并设置属性：

图十三

关键一步：在 Item Template下拉框中，选择我们创建的 MenuElement、并修改2个参数，如下图：

图十四

接着，再“盖上”一个前景图 overlay.png ，这个界面有点儿酷了吧：

图十五

至此，界面工作完成，先用VC模拟器运行一下：

图十六

用鼠标上下拖动界面，菜单条会跟着滑动。

有2个问题需要解决：1）界面上的20个 menu item 图标、文字都是相同的，实际应用中这些肯定都是不同的；2）上下滑动，menu items 是垂直运动，我们希望他们沿着圆弧运动。