【VB】管中窥豹，邂逅METRO

cyycoish · 发表于 2014-12-21 23:14:51

欢迎访问技术宅的结界，请注册或者登录吧。

您需要登录才可以下载或查看，没有账号？立即注册→加入我们

×

Welcome to the flat world
ms 在 win8 为我们带来了全新的ui，metro。一时间，对metro的评论开始多如牛毛，褒贬不一。
平的！why so flat，ugly！简洁，大方！单调，难看！然而恰恰在这众说纷纭的评论中，metro流行起来了！
先是win，wp然后是ios，osx，就连大G的Android也来效仿。
那么，到底什么是metro？
metro的官方解释：“typography-based design language”（基于排版的设计语言），
旨在呈现，简洁，大方，强调信息本身，而非冗杂的画面特效的界面。
好的，怎么设计metro ui。我们已知使用新版的visual studio选择windows商店应用即可使用大量的metro风格控件。
那么使用我们熟悉，亲切，但是却老旧的vb6怎样画出先进的metro界面，下面笔者就用vb6做个尝试，开发一款metro桌面应用。
既然是扁平化的设计，所以，所有控件的appearance属性应该全部改写为0 - flat
然后根据需要，将控件的borderstyle属性改为1，或者0来实现效果
那么，对于commandbutton控件，我们除了子类化从绘，就没辙了，但是有些朋友不熟悉子类化技术，或者认为子类化技术过于繁琐
这样，咱们可以使用用户控件自己拿控件堆一个metro版的button出来：
效果如图：

实现起来也非常简单，一个背景透明的label，8条line便可以做出效果：

其他控件，设置好，便可做出如图效果

对于combobox，frame，scrollbar这样的老顽固，尤其是combobox，
用户控件自绘又麻烦，这样，咱们可以使用组合控件。对于combobox我们可以使用textbox/label（视combo控件的style而选择）+listbox来实现
效果像这样：

。灵活运用控件现有事件，比如我们山寨的combo控件，对于label的click事件，我们可以这样填充内容：
listx.visible = not listx.visible这样就实现了下拉效果。当然，也可以配合timer控件+list height属性做个动画效果。
next，咱们可以试着山寨实现一下Panorama（全景图）环景界面。先上一张wp的Panorama：

首先，将要显示的片段放进frame，或者picturebox，for sure，frame的boderstyle当然要改成none
接着就可以用label来模拟title也就是Pivot枢纽，

我们的以假乱真山寨版：

，最后用timer+left属性来处理pivot label点击的事件：全景图滚动。
finally，用line label picturebox等控件的flat效果做一些其他控件，我们的metro app便大功告成，一下是一些自编metro app的欣赏，这款程序的exe大家可以在帖子底部下载到：

另外，本贴福利，我提供一个vb6的metro窗体包供大家开发metro界面：

游客，如果您要查看本帖隐藏内容请回复

大家可以补充这个包中的控件，然后与大家一起共享，希望大家喜欢metro风格的app{:soso_e100:}
quicknote exe下载：

QN191.zip (5.52 MB, 下载次数: 35)

我晕 · 发表于 2014-12-22 18:30:02

有代码？回复看看...

原域软件丶裂变 · 发表于 2014-12-31 16:10:12

对此我表示32个赞

0xAA55 · 发表于 2015-1-21 22:47:39

我可不喜欢Metro

CarbonEddy · 发表于 2015-3-25 17:18:27

小白表示什么都看不懂 QAQ QAQ QAQ

账号已注销 · 发表于 2016-1-7 14:47:13

顶~~~~。。。

FFFFFFFE · 发表于 2016-1-19 17:44:58

标题略文艺

jason · 发表于 2016-8-24 21:20:38

新人学习一下

悠悠寒冰 · 发表于 2016-8-29 16:48:16

好东西，谢谢分享

列明 · 发表于 2016-11-4 16:56:23

有直下鏈接和附件兩種下載方式的帖子才是好帖子的必要不充分條件

jasonchen · 发表于 2016-11-17 10:29:15

支持！！

阿呆在上海 · 发表于 2017-10-23 18:51:22

学习图片知识

搬砖工 · 发表于 2018-9-15 00:24:40

METRO源码瞎子啊

牛牛 · 发表于 2019-7-17 22:22:10

新人报道、学习

大宝 · 发表于 2020-7-8 14:34:19

本帖最后由 china_shy_wzb 于 2020-7-20 14:08 编辑

METRO的实际应用

mzflz · 发表于 2022-1-3 17:23:36

仔细来研究一下。

liu496324 · 发表于 2023-7-6 11:10:06

不错，非常棒

二十六 · 发表于 2023-8-30 02:40:40

学习学习~~~~~~~~

gujin163 · 发表于 2023-8-31 10:22:14

感谢楼主分享，学习了

Nicol · 发表于 2024-3-9 17:01:30

学习一下，好像有点简陋啊

账号		自动登录	找回密码
密码			立即注册→加入我们

【VB】管中窥豹，邂逅METRO

欢迎访问技术宅的结界，请注册或者登录吧。

本帖被以下淘专辑推荐: