Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10 – Pernahkah kalian memperhatikan bagaimana perubahan yang secara signifikan tampil pada Microsoft Windows 8, 8.1 dan 10? Yah, perubahan yang paling eksplisit adalah pada bagian tampilan Start Menu. Perubahan yang menuai pro dan kontra bagi kalangan pengguna Microsoft Windows dimana lebih dari 10 tahun Start Menu yang melegenda akhirnya digantikan dengan tampilan yang “katanya” lebih modern, yang disebut dengan nama Metro UI atau Modern UI ala Windows 10. Tampilan menu kotak persegi maupun persegi panjang dengan warna-warni yang sangat kontras menjadikan tampilan ini tampil lebih fresh dan tentunya disukai bagi anak-anak pula.
Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10

Button dan icon yang digunakan untuk mengakses berbagai aplikasi akhirnya disulap dengan Menu Metro UI yang desainnya Flat. Perubahan besar ini bahkan memberikan dampak positif bagi dunia desain grafis dan akhirnya Windows 10 diberikan penghargaan desain terbaik.



Baca Juga : Windows 10 Mendapatkan Penghargaan Desain Terbaik
Dengan latar belakang ini, penulis ingin membagikan kepada pembaca tentang cara membuat Menu Metro UI pada aplikasi Borland Delphi 7, yang tentunya mengadopsi dari desain Flat ala Windows 10 tersebut.
  • Buka aplikasi Borland Delphi 7.
  • Buat sebuah project dengan nama “prjmetro_menu”.
  • Tambahkan sebuah form dengan nama “frmmetro_menu”.
  • Atur form dengan format sebagai berikut.
Properties
Value
Caption
Metro Menu
Color
clBtnFace
+ Font
Color
Name
Size

clWhite
Trebuchet MS
12
Height
473
Name
Frmmetro_menu
Width
830

  • Tambahkan empat buah panel dimana panel-panel tersebut berperan sebagai wadah untuk Flat Menu.
  • Berikut ini adalah format dari keempat Panel tersebut.
Panel 1
Properties
Value
BevelOuter
bvNone
Caption
.
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Wingdings 2
40
+ Style
fsBold

True
Height
377
Left
24
Name
pnllaporan_dan_statistik
ParentCl3D
False
ParentFont
False
Top
24
Width
377

Panel 2
Properties
Value
BevelOuter
bvNone
Caption
N
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Wingdings 2
40
+ Style
fsBold

True
Height
184
Left
408
Name
pnltentang_pengguna
ParentCl3D
False
ParentFont
False
Top
24
Width
377

Panel 3
Properties
Value
BevelOuter
bvNone
Caption
V
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Webdings
35
+ Style
fsBold

True
Height
185
Left
408
Name
pnlnotifikasi
ParentCl3D
False
ParentFont
False
Top
216
Width
185

Panel 4
Properties
Value
BevelOuter
bvNone
Caption
]
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Wingdings
40
+ Style
fsBold

True
Height
185
Left
600
Name
pnlpengaturan
ParentCl3D
False
ParentFont
False
Top
216
Width
185

Jika panel-panel tersebut selesai diatur, maka akan tampil seperti gambar dibawah ini.
Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Panel Metro UI
  • Tambahkan empat buat label, masing-masing label diletakkan didalam panelnya masing-masing. Ingat diletakkan kedalam panel, bukan hanya ditimpakkan ke atas panel. 
Label 1
Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Laporan && Statistik
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label1
Transparent
True
Width
377

Label 2
Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Tentang Pengguna
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label2
Transparent
True
Width
377

Label 3
Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Notifikasi
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label3
Transparent
True
Width
185

Label 4
Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Pengaturan
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size

clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label4
Transparent
True
Width
185

Setelah label ditambahkan kedalam Panel, maka tampilannya akan tampak seperti gambar dibawah ini.
Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Label didalam Panel
  • Terakhir jalankan program tersebut dengan menekan tombol F9 pada keyboard.
  • Pembaca juga dapat mengganti font icon pada Panel tersebut dengan menggunakan icon buatan sendiri dengan dibantu software editing gambar seperti Adobe Photoshop, Illustrator maupun CorelDraw.

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108


<< Kembali : Ke Artikel yang Lebih Lengkap

Related Posts

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

Silahkan Tinggalkan Kritik dan Saran yang membangun dari Anda
1. Berkomentarlah yang baik dan sopan
2. Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
3. Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
4. Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>