• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Các bài viết hướng dẫn, giúp các bạn hiểu và tiếp cận với Visual Basic nhanh hơn
Hình đại diện của người dùng
Dang Minh Du
Thành viên ưu tú
Thành viên ưu tú
Bài viết: 531
Ngày tham gia: T.Tư 02/04/2008 2:08 pm
Đến từ: RGames Team
Has thanked: 3 time
Been thanked: 17 time
Liên hệ:

Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Gửi bàigửi bởi Dang Minh Du » T.Bảy 18/10/2008 2:47 pm

Tên bài viết: Hướng dẫn từng bước tạo giao diện "đẹp" cho ct
Tác giả: Đặng Minh Dự
Cấp độ bài viết: Căn bản bổ sung
Tóm tắt: Theo quan điểm của riêng tôi, một chương trình, để có thể thu hút được người dùng, không chỉ chức năng là yếu tố duy nhất để quyết định điều này. Mà bên cạnh đó, có lẽ giao diện cũng đóng góp một phần không nhỏ!


HƯỚNG DẪN TỪNG BƯỚC TẠO GIAO DIỆN "ĐẸP" CHO CHƯƠNG TRÌNH
Giới thiệu: Theo quan điểm của riêng tôi, một chương trình, để có thể thu hút được người dùng, không chỉ chức năng là yếu tố duy nhất để quyết định điều này. Mà bên cạnh đó, có lẽ giao diện cũng đóng góp một phần không nhỏ!

Mục tiêu bài viết: [welcome]
- Nâng cao kĩ năng tạo giao diện cho người mới làm quen (hoặc các Pro về Code nhưng tạo giao diện không được hấp).
- Giúp người mới tìm hiểu VB làm quen với việc tạo giao diện (đẹp).
- Nguồn tham khảo thêm về các cách làm giao diện chương trình cho các Pro.
Lưu ý:trình độ VB của tôi chỉ ở mức căn bản nên bài viết có gì lệch lạc, sai xót xin mọi người thông cảm và đóng góp để tôi sửa sai. Xin phép mọi người cho xưng hô tôi trong bài.

-------------------++--------------------

Kì 1. Quan niệm về “giao diện đẹp” - Bước gợi mở cho việc tạo giao diện.

• Quan niệm về “giao diện đẹp”:
- Có lẽ không có quan niệm nào là cái chuẫn chính xác, cái này mang tính chủ quan nhiều hơn.
- Quan niệm của tôi về một giao diện đẹp là:
+ Giao diện trực quan, dễ nhìn, dễ thao tác,…
+ Với thời đại ngày nay, công nghệ 3D rất phổ biến và “rất tuyệt vời”, nếu chúng ta không áp dụng công nghệ này vào chương trình thì rất tiếc! [-X
+ Hình dáng cân đối, màu sắc hài hòa, không quá lòe loẹt với các mảng màu thô (màu đơn).
Tôi thì chỉ có thế thôi! Thế mọi người quan niệm như thế nào. >:P

• Gợi mở công việc tạo giao diện: (tự đặt ra những câu hỏi mà mình cho là cần thiết để tạo giao diện cho chương trình).
- Đề xem, mình sẽ làm chương trình gì đây!? Nó cần phải như thế nào?...
- Chương trình chức năng thế này thì cần phải giao diện như thế nào? Có cần thanh công cụ không?, có cần menu không?, có cần nút lệnh không? Chúng cần phải như thế nào? (nút tròn, bầu dục, vuông…; menu màu gì? , cần icon không?, cần giống như menu của MSOffice hay không?...; toolbar gồm những gì?, các item của toolbar to hay nhỏ? Cần biểu tượng gì?)….
- Thế này đa thích hợp chưa?, cần chỉnh sửa gì không?...

Như chúng ta thấy và đã biết, có rất rất nhiều câu hỏi đặt ra khi chúng ta làm một chương trình, việc tạo giao diện cho chương trình cũng có không ít những câu hỏi!
Với mỗi một chương trình khác nhau, giao diện cần có một cách bày trí, một phong cách khác nhau, tất cả điều xuất phát từ chức năng của chương trình và đối tượng sử dụng chương trình (già - trẻ, game thủ, nhân viên văn phòng, lập trình viên….).

Để tìm hiểu các bước, cách thức, các điều cần có và biết khi tạo giao diện chương trình, chúng ta hãy cùng tìm hiểu ở các kì tiếp theo qua đề mục hướng dẫn và các ví dụ. :-t

Kì 2. Tôi không thể tạo giao diện đẹp mặc dù đã có rất nhiều ý tưởng và định hướng để làm!

- Bạn thử xem các câu hỏi bên dưới:
+ Ý tưởng của bạn như thế nào? Có phù hợp với chương trình không?
+ Ý tưởng có đúng với khả năng của bạn không?
+ Bạn định hướng như thế nào?
- Có lẽ kĩ năng về code và đồ họa của bạn chưa đủ, không phù hợp với khả năng của bạn, cũng có thể bạn đã tạo giao diện đẹp, nhưng nó đã không thể hiện được chính bản thân nó vì bạn đã không làm cho nó phù hợp và khớp với chức năng (có khi nào bạn tạo một giao diện nào là lá bay, hoa nở, tuyết rơi cho một chương trình tính toán văn phòng?!!)
- Có lẽ chúng ta cần những ví dụ cụ thể hơn. Mời xem tiếp kì sau!

Kì 3. Thử tạo giao diện cho một chương trình tính toán “cộng số” dành cho bé.

Phân tích & chuẩn bị:
- Đã dành cho bé thì cần phải: ngây thơ, hoa văn, đường nét, màu mè nhẹ nhàng nhưng vui tươi…. Gây cho bé cảm giác thích học.
- Cần hình gif động về hoa, lá hoặc một nhân vật hoạt hình…, cần có các nút lệnh, textbox đẹp. (3D nhé! >:P).

Yêu cầu: các kĩ năng cơ bản về cắt ghép, xử lí ảnh.
Tiến hành làm giao diện chương trình.
a) Tạo nút:
- Một nút bình thường có 3 trạng thái:
+ Trạng thái bình thường (không có mouse move qua hay press lên).
+ Trạng thái khi chuột nằm trên nút, move qua nút (mouse không press).
+ Trạng thái “lún” khi bị mouse nhấn.

Như vậy cần làm cả 3 trạng thái nút mới “ra trò”! B-)

@Ngoài đề một chút: có rất nhiều để làm giao diện cho chương trình, có cách thì dùng hình ảnh (thông qua vẽ bằng các chương trình) kết hợp với code để tạo hiệu ứng…, có cách thì dùng chính ngôn ngữ lập trình để làm (cách này rất cao cấp, tốn nhiều thời gian, công sức nhưng giao diện cũng ko bao giờ bằng việc chúng ta đồ họa ảnh, cách này cũng đòi hỏi một lượng kiến thức ít nhất là “tương đối” về GDI, trong thực tế, có lẽ cách này chỉ được dùng để bổ sung một cách đơn giản cho giao diện (cắt, chia hình, đổi màu, lọc màu, định hình cửa số…)).

Ở đây, tôi chỉ là một người mới tìm hiểu VB và dừng ở mức độ cơ bản nên sẽ không trình bày cách “Code” giao diện.

@Quay lại với chủ đề:
- Chúng ta cần có 3 tấm ảnh thể hiện 3 trạng thái của nút.
- Nhớ là nút 3D đó, ít nhất thì cũng là nút có màu Gradien.
- Nếu kĩ năng đồ họa của bạn kém hay không có đủ ý tưởng để vẽ nên 3 trạng thái nút 3D một cách hoàn hảo thì tại sao chúng ta không nghĩ đến một hướng khác đề tạo ra 3 trạng thái nút này mà ít tốn công nhất, nhanh nhất và…. Đẹp nhất!?

Câu trả lời cho những con người “thông minh” là “chôm”. Có vẻ nhiều người cho rằng cách này không hay lắm! Nhưng đối với tôi, đó là cách cực kì tối ưu, chúng ta không có ý xấu gì cả!, chúng ta không “ăn cắp” ý tưởng của họ! (mặc dù chúng ta nói là “chôm”, chúng ta không “ăn cắp” thành quả của họ!, chúng ta đang “tận dung” hết tất cả những gì có sẵn, tất cả những gì có thể thích hợp với chương trình của chúng ta! - Đây cũng là một lời khuyên mà tôi nhận được từ chính kinh nghiệm của mình!!!.

Tất cả những thao tác mà chúng ta phải làm là mở chương trình có những cái nút với hình dáng, màu sắc, kích cỡ phù hợp; nhấn Print Screen; mở một chương trình đồ họa nào đó (Paint, Photoshop, Gimp,…) Paste tấm hình vừa chụp được vào, dùng các công cụ loại bỏ các khung cửa sổ, các thứ không cần thiết… để lọc lấy cái nút.
3 tấm hình chụp được cho 3 trạng thái nút, có lẽ bạn làm được mà! Nhớ là làm sao cho kích thước của chúng phải khớp nhau đó!.

@Ngoài lề chút nữa: có nhiều chương trình “hết sức” tốt bụng!, các file dữ liệu của chương trình có những cái nút mà chúng ta cần với đầy đủ trạng thái, kích thước chuẫn, màu sắc thích hợp… chúng ta chỉ cần mở thư mục chứa nó và copy vào thư mục Project của chúng ta đang làm để thao tác, tuyệt!!!

Tôi có vài chương trình mà chúng ta có thể “chôm” nút đây: ;)
- Sothink DHTML Design (có cả đống dữ liệu là ảnh trong thư mục cài đặt, lo mà “chôm”).
totbungwe.JPG
totbungwe.JPG (6.19 KiB) Đã xem 11876 lần


- Easy Menu&Button Maker Pro (có rất nhiều mẫu nút đẹp, nếu sài có bản quyền, bạn có thể tạo và save thành hình để dùng luôn, ở đây tôi sài bản Trial nên phải chụp lại ảnh chứ không thể save).
easy....JPG



@Quay lại chủ đề:
- Dưới đây là các trạng thái nút tôi đã làm (chụp, cắt, bỏ nền ở các nét cong…)

hinh.JPG
hinh.JPG (6.45 KiB) Đã xem 11858 lần
- Lời khuyên: nếu bạn dự định làm tương tự ở một Project mới khác, bạn nên viết luôn Usercontrol để sau này cần chỉ lấy ra chỉnh sửa chút ít chứ không phải làm lại tất cả (mà trong project này thôi cũng đã cần rất nhiều nút, nếu không viết Usercontrol thì bạn sẽ bỏ ra rất nhiều công sức để làm mà không đáng tí nào đó!). Ở đây, tôi sẽ hướng dẫn bằng cách tạo Usercontrol.
- Nếu bạn nào chưa biết Usercontrol thì vào các Topic sau để xem:
- http://caulacbovb.com/forum/viewtopic.php?f=22&t=196

Tất cả Code cần cho Usercontrol như sau:

Mã: Chọn hết

  1.  
  2. 'Default Property Values:
  3. Const m_def_BorderColor = 0
  4. Const m_def_TextAlign = 0
  5. Const m_def_Caption = ""
  6. Const m_def_ToolTipText = ""
  7. Const m_def_NormalTextColor = &HFFFFFF
  8. Const m_def_OverTextColor = &HFFFFFF
  9. Const m_def_DownTextColor = &HFFFFFF
  10. 'Property Variables:
  11. Dim m_BorderColor As OLE_COLOR
  12. Dim m_TextAlign As fmTextAlign
  13. Dim m_Caption As String
  14. Dim m_ToolTipText As String
  15. Dim m_NormalTextColor As OLE_COLOR
  16. Dim m_OverTextColor As OLE_COLOR
  17. Dim m_DownTextColor As OLE_COLOR
  18. 'Event Declarations:
  19. Event KeyDown(KeyCode As Integer, Shift As Integer)
  20. Event KeyPress(KeyAscii As Integer)
  21. Event KeyUp(KeyCode As Integer, Shift As Integer)
  22. Event Click()
  23. Event DblClick()
  24. Event MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  25. Event MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  26. Event MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
  27.  
  28. 'Vi tri' mouse
  29. Private Declare Function WindowFromPoint Lib "user32" (ByVal xPoint As Long, ByVal yPoint As Long) As Long
  30. Private Declare Function GetCursorPos Lib "user32" (lpPoint As POINTAPI) As Long
  31. Private isMousePress As Boolean
  32.  
  33. 'Toa. do^. X,Y cua? mouse
  34. Private Type POINTAPI
  35.     X As Long
  36.     Y As Long
  37. End Type
  38. 'Di.nh nghi~a mouse over
  39. Private Function isMouseOver() As Boolean
  40. Dim pt As POINTAPI
  41. GetCursorPos pt
  42. isMouseOver = (WindowFromPoint(pt.X, pt.Y) = hWnd)
  43. End Function
  44.  
  45. Private Sub Set_Property()
  46. Lbl.Caption = m_Caption
  47. Lbl.ForeColor = m_NormalTextColor
  48. Lbl.Height = TextHeight(Lbl.Caption)
  49. End Sub
  50. Public Property Get Enabled() As Boolean
  51.     Enabled = UserControl.Enabled
  52. End Property
  53.  
  54. Public Property Let Enabled(ByVal New_Enabled As Boolean)
  55.     UserControl.Enabled() = New_Enabled
  56.     PropertyChanged "Enabled"
  57. End Property
  58.  
  59. Public Sub Refresh()
  60.     UserControl.Refresh
  61. End Sub
  62.  
  63. Private Sub LblOver_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  64.     RaiseEvent MouseDown(Button, Shift, X, Y)
  65. isMousePress = True
  66. End Sub
  67.  
  68. Private Sub LblOver_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  69.     RaiseEvent MouseMove(Button, Shift, X, Y)
  70. Timer1.Enabled = True
  71. End Sub
  72.  
  73. Private Sub LblOver_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
  74.     RaiseEvent MouseUp(Button, Shift, X, Y)
  75. isMousePress = False
  76. End Sub
  77.  
  78. Private Sub Timer1_Timer()
  79. If isMouseOver = True Then
  80.     If isMousePress = False Then
  81.         If OverBt.Visible = False Then OverBt.Visible = True
  82.         If NormalBt.Visible = True Then NormalBt.Visible = False
  83.         If PressBt.Visible = True Then PressBt.Visible = False
  84.         If Lbl.ForeColor <> m_OverTextColor Then Lbl.ForeColor = m_OverTextColor
  85.     Else
  86.         If OverBt.Visible = True Then OverBt.Visible = False
  87.         If NormalBt.Visible = True Then NormalBt.Visible = False
  88.         If PressBt.Visible = False Then PressBt.Visible = True
  89.         If Lbl.ForeColor <> m_DownTextColor Then Lbl.ForeColor = m_DownTextColor
  90.     End If
  91. Else
  92.     If OverBt.Visible = True Then OverBt.Visible = False
  93.     If NormalBt.Visible = False Then NormalBt.Visible = True
  94.     If PressBt.Visible = True Then PressBt.Visible = False
  95.     If Lbl.ForeColor <> m_NormalTextColor Then Lbl.ForeColor = m_NormalTextColor
  96.     Timer1.Enabled = False
  97. End If
  98. End Sub
  99.  
  100. Private Sub UserControl_Initialize()
  101. Timer1.Enabled = True
  102. End Sub
  103.  
  104. Public Property Get Caption() As String
  105.     Caption = m_Caption
  106. End Property
  107.  
  108. Public Property Let Caption(ByVal New_Caption As String)
  109.     m_Caption = New_Caption
  110.     PropertyChanged "Caption"
  111.     Lbl.Caption = m_Caption
  112. End Property
  113.  
  114. Public Property Get ToolTipText() As String
  115.     ToolTipText = m_ToolTipText
  116. End Property
  117.  
  118. Public Property Let ToolTipText(ByVal New_ToolTipText As String)
  119.     m_ToolTipText = New_ToolTipText
  120.     PropertyChanged "ToolTipText"
  121. End Property
  122.  
  123. Public Property Get NormalTextColor() As OLE_COLOR
  124.     NormalTextColor = m_NormalTextColor
  125. End Property
  126.  
  127. Public Property Let NormalTextColor(ByVal New_NormalTextColor As OLE_COLOR)
  128.     m_NormalTextColor = New_NormalTextColor
  129.     PropertyChanged "NormalTextColor"
  130. End Property
  131.  
  132. Public Property Get OverTextColor() As OLE_COLOR
  133.     OverTextColor = m_OverTextColor
  134. End Property
  135.  
  136. Public Property Let OverTextColor(ByVal New_OverTextColor As OLE_COLOR)
  137.     m_OverTextColor = New_OverTextColor
  138.     PropertyChanged "OverTextColor"
  139. End Property
  140.  
  141. Public Property Get DownTextColor() As OLE_COLOR
  142.     DownTextColor = m_DownTextColor
  143. End Property
  144.  
  145. Public Property Let DownTextColor(ByVal New_DownTextColor As OLE_COLOR)
  146.     m_DownTextColor = New_DownTextColor
  147.     PropertyChanged "DownTextColor"
  148. End Property
  149.  
  150. 'Initialize Properties for User Control
  151. Private Sub UserControl_InitProperties()
  152.     m_Caption = m_def_Caption
  153.     m_ToolTipText = m_def_ToolTipText
  154.     m_NormalTextColor = m_def_NormalTextColor
  155.     m_OverTextColor = m_def_OverTextColor
  156.     m_DownTextColor = m_def_DownTextColor
  157.     m_TextAlign = m_def_TextAlign
  158.     m_BorderColor = m_def_BorderColor
  159. End Sub
  160.  
  161. 'Load property values from storage
  162. Private Sub UserControl_ReadProperties(PropBag As PropertyBag)
  163.     UserControl.ForeColor = PropBag.ReadProperty("ForeColor", &H80000012)
  164.     UserControl.Enabled = PropBag.ReadProperty("Enabled", True)
  165.     m_Caption = PropBag.ReadProperty("Caption", m_def_Caption)
  166.     m_ToolTipText = PropBag.ReadProperty("ToolTipText", m_def_ToolTipText)
  167.     m_NormalTextColor = PropBag.ReadProperty("NormalTextColor", m_def_NormalTextColor)
  168.     m_OverTextColor = PropBag.ReadProperty("OverTextColor", m_def_OverTextColor)
  169.     m_DownTextColor = PropBag.ReadProperty("DownTextColor", m_def_DownTextColor)
  170.     m_TextAlign = PropBag.ReadProperty("TextAlign", m_def_TextAlign)
  171.     Set Lbl.Font = PropBag.ReadProperty("Font", Ambient.Font)
  172. Set_Property
  173.     BShape.BorderColor = PropBag.ReadProperty("BorderColor", -2147483640)
  174.     m_BorderColor = PropBag.ReadProperty("BorderColor", m_def_BorderColor)
  175. End Sub
  176.  
  177. Private Sub UserControl_Resize()
  178. OverBt.Move -60, -40
  179. PressBt.Move -60, -40
  180. NormalBt.Move -60, -40
  181. BShape.Move 0, 0
  182.  
  183. If UserControl.Height >= 380 Then
  184.     UserControl.Height = 380
  185. End If
  186.  
  187. NormalBt.Width = UserControl.Width + 115
  188. NormalBt.Height = UserControl.Height + 90
  189.  
  190. OverBt.Width = UserControl.Width + 115
  191. OverBt.Height = UserControl.Height + 90
  192.  
  193. PressBt.Width = UserControl.Width + 115
  194. PressBt.Height = UserControl.Height + 90
  195.  
  196. LblOver.Width = UserControl.Width + 115
  197. LblOver.Height = UserControl.Height + 90
  198.  
  199. Lbl.Width = UserControl.Width
  200. Lbl.Left = UserControl.Width / 2 - Lbl.Width / 2
  201. Lbl.Top = UserControl.Height / 2 - Lbl.Height / 2
  202.  
  203. BShape.Width = UserControl.Width
  204. BShape.Height = UserControl.Height
  205.  
  206. End Sub
  207.  
  208. 'Write property values to storage
  209. Private Sub UserControl_WriteProperties(PropBag As PropertyBag)
  210.  
  211.     Call PropBag.WriteProperty("ForeColor", UserControl.ForeColor, &H80000012)
  212.     Call PropBag.WriteProperty("Enabled", UserControl.Enabled, True)
  213.     Call PropBag.WriteProperty("Caption", m_Caption, m_def_Caption)
  214.     Call PropBag.WriteProperty("ToolTipText", m_ToolTipText, m_def_ToolTipText)
  215.     Call PropBag.WriteProperty("NormalTextColor", m_NormalTextColor, m_def_NormalTextColor)
  216.     Call PropBag.WriteProperty("OverTextColor", m_OverTextColor, m_def_OverTextColor)
  217.     Call PropBag.WriteProperty("DownTextColor", m_DownTextColor, m_def_DownTextColor)
  218.     Call PropBag.WriteProperty("TextAlign", m_TextAlign, m_def_TextAlign)
  219.     Call PropBag.WriteProperty("Font", Lbl.Font, Ambient.Font)
  220.     Call PropBag.WriteProperty("BorderColor", BShape.BorderColor, -2147483640)
  221.     Call PropBag.WriteProperty("BorderColor", m_BorderColor, m_def_BorderColor)
  222. End Sub
  223.  
  224. Public Property Get TextAlign() As fmTextAlign
  225.     TextAlign = m_TextAlign
  226. End Property
  227.  
  228. Public Property Let TextAlign(ByVal New_TextAlign As fmTextAlign)
  229.     m_TextAlign = New_TextAlign
  230.     PropertyChanged "TextAlign"
  231.     Lbl.TextAlign = m_TextAlign
  232. End Property
  233.  
  234. Private Sub LblOver_Click()
  235.     RaiseEvent Click
  236. End Sub
  237.  
  238. Private Sub LblOver_DblClick()
  239.     RaiseEvent DblClick
  240. End Sub
  241.  
  242. Public Property Get Font() As Font
  243.     Set Font = Lbl.Font
  244. End Property
  245.  
  246. Public Property Set Font(ByVal New_Font As Font)
  247.     Set Lbl.Font = New_Font
  248.     PropertyChanged "Font"
  249. End Property
  250.  
  251. Public Property Get BorderColor() As OLE_COLOR
  252.     BorderColor = BShape.BorderColor
  253. End Property
  254.  
  255. Public Property Let BorderColor(ByVal New_BorderColor As OLE_COLOR)
  256.     BShape.BorderColor() = New_BorderColor
  257.     PropertyChanged "BorderColor"
  258. End Property
  259.  


Àh mà này, Code chỉ mang tính chất tham khảo thôi, nếu mọi người có cách khác thì cứ viết, xong nhớ Reply đóng góp nhé ! Có mấy cái còn tùy thuộc vào bạn nữa, cần chỉnh code cho phù hợp (vị trí, đôro65ngng, cao… của các Image…)
Bộ khung Code trên tôi viết bằng công cụ ActiveX Control Interface Wizard rồi thêm chút code để làm các hiệu ứng.

Nhớ thêm các Object sau vào Usercontrol :
+ 1 Timer tên Timer1 : Interval=1, Enabled=Flase
+ 3 Image lần lượt là : NormalBt chứa hình nút hiện lúc bình thường, OverBt chứa hình hiện nút lúc mouse over, PressBt chứa hình hiện lúc mouse press.
+ 2 Label lần lượt là : Lbl để chứa Caption, LblOver để nhận Focus và nhận, thực hiện các sự kiện tương tác với mouse.
+ 1 Shape tên là Bshape, kiểu Shape=0 làm Boder cho Control.
Để 3 Image nằm sát góc trái Usercontrol và chồng khích lên nhau, thứ tự các Object nên sắp xếp như sau : PressBt, OverBt, NormalBt, Lbl, LblOver.
** Lưu ý: Khi xử lí và save các ảnh thì nên dùng các kiểu như BMP để giữ chất lượng của ảnh, sau đó dùng các trình như MS Picture Manger để compress sang JPG (chất lượng ảnh sẽ giảm nhưng ta không thấy được đâu), dung lượng sẽ rất nhẹ, các tấm hình BMP thì để dành phòng khi chỉnh sửa. Đây là kinh nghiệm quí báu mà em rút dc khi làm, trước em hay dùng những tấm hình "nguyên chất" thường dung lượng rất lớn dẫn tới chương trình của mình có dung lượng lớn một cách "đột biến" mà không đáng.
b) Tạo Bacground:
Cái này như thế nào là do ý tưởng của bạn đó!, ý tưởng của tôi thì như sau:
- Chương trình dành cho trẻ con thì phải “màu mè hoa lá hẹ” mộ chút.
- Cần vài hình ảnh nhân vật hoạt hình, hoa…
Nếu không tự tạo được thì bạn có thể “ăn cắp” các thành phần từ các ảnh có sẵn, dù gì thì bạn cũng có một ít kĩ năng thục hành trên Photoshop hay đơn giản là Paint…

Đây là Bgacground mà em đã Draw
BG.jpg

Tạm dưng tại đây. #:-S
@@@Bye, tuần sau Post tiếp vậy, em về đây…! :-h


~°Dòng Sông Mùa Thu°~
Studying...!

Hình đại diện của người dùng
Dang Minh Du
Thành viên ưu tú
Thành viên ưu tú
Bài viết: 531
Ngày tham gia: T.Tư 02/04/2008 2:08 pm
Đến từ: RGames Team
Has thanked: 3 time
Been thanked: 17 time
Liên hệ:

Re: Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Gửi bàigửi bởi Dang Minh Du » T.Bảy 18/10/2008 3:26 pm

Quên, đây là Usercontrol button tham khảo :)
Tập tin đính kèm
ActiveX.rar
(6.07 KiB) Đã tải 1534 lần
~°Dòng Sông Mùa Thu°~
Studying...!

Hình đại diện của người dùng
Dang Minh Du
Thành viên ưu tú
Thành viên ưu tú
Bài viết: 531
Ngày tham gia: T.Tư 02/04/2008 2:08 pm
Đến từ: RGames Team
Has thanked: 3 time
Been thanked: 17 time
Liên hệ:

Re: Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Gửi bàigửi bởi Dang Minh Du » CN 19/10/2008 9:43 am

Tiếp tục nào!
a) Tạo Textbox:
@Cái này do quên chứ không thì tôi đã đề cập trước mục tạo Bacground! I’m sorry! >:D<
@Nền tảng của cái Usercontrol Textbox mới là Textbox của MS Form 2.0 Object, thêm vào Project 1 Textbox (Borderstyle=1) và 1 Shape (kiểu Shape=0).

Và đây là code mà ta cần viết: (đơn giản thôi, chỉ cần vài thao tác với ActiveX Interface Wizard là xong!!!).

Mã: Chọn hết

  1.  
  2. 'Event Declarations:
  3. Event Click()
  4. Event DblClick(Cancel As ReturnBoolean)
  5. Event KeyDown(KeyCode As ReturnInteger, Shift As Integer)
  6. Event KeyPress(KeyAscii As ReturnInteger)
  7. Event KeyUp(KeyCode As ReturnInteger, Shift As Integer)
  8. Event MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  9. Event MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  10. Event MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
  11. Event Change()
  12.  
  13.  
  14. Private Sub TxtText_Change()
  15.     RaiseEvent Change
  16. End Sub
  17.  
  18. Private Sub UserControl_Initialize()
  19. TxtText.Move 0, 0
  20. BShape.Move 0, 0
  21. End Sub
  22.  
  23. Private Sub UserControl_Resize()
  24. TxtText.Width = UserControl.Width
  25. TxtText.Height = UserControl.Height
  26. BShape.Width = UserControl.Width
  27. BShape.Height = UserControl.Height
  28. End Sub
  29.  
  30. Public Property Get BackColor() As OLE_COLOR
  31.     BackColor = TxtText.BackColor
  32. End Property
  33.  
  34. Public Property Let BackColor(ByVal New_BackColor As OLE_COLOR)
  35.     TxtText.BackColor() = New_BackColor
  36.     PropertyChanged "BackColor"
  37. End Property
  38.  
  39. Public Property Get ForeColor() As OLE_COLOR
  40.     ForeColor = TxtText.ForeColor
  41. End Property
  42.  
  43. Public Property Let ForeColor(ByVal New_ForeColor As OLE_COLOR)
  44.     TxtText.ForeColor() = New_ForeColor
  45.     PropertyChanged "ForeColor"
  46. End Property
  47.  
  48. Public Property Get Enabled() As Boolean
  49.     Enabled = TxtText.Enabled
  50. End Property
  51.  
  52. Public Property Let Enabled(ByVal New_Enabled As Boolean)
  53.     TxtText.Enabled() = New_Enabled
  54.     PropertyChanged "Enabled"
  55. End Property
  56.  
  57. Public Property Get Font() As Font
  58.     Set Font = TxtText.Font
  59. End Property
  60.  
  61. Public Property Set Font(ByVal New_Font As Font)
  62.     Set TxtText.Font = New_Font
  63.     PropertyChanged "Font"
  64. End Property
  65.  
  66. Public Property Get BackStyle() As fmBackStyle
  67.     BackStyle = TxtText.BackStyle
  68. End Property
  69.  
  70. Public Property Let BackStyle(ByVal New_BackStyle As fmBackStyle)
  71.     TxtText.BackStyle() = New_BackStyle
  72.     PropertyChanged "BackStyle"
  73. End Property
  74.  
  75. Public Property Get BorderStyle() As fmBorderStyle
  76.     BorderStyle = TxtText.BorderStyle
  77. End Property
  78.  
  79. Public Property Let BorderStyle(ByVal New_BorderStyle As fmBorderStyle)
  80.     TxtText.BorderStyle() = New_BorderStyle
  81.     PropertyChanged "BorderStyle"
  82. End Property
  83.  
  84. Public Sub Refresh()
  85.      
  86. End Sub
  87.  
  88. Private Sub TxtText_DblClick(Cancel As ReturnBoolean)
  89.     RaiseEvent DblClick(Cancel)
  90. End Sub
  91.  
  92. Private Sub TxtText_KeyDown(KeyCode As ReturnInteger, Shift As Integer)
  93.     RaiseEvent KeyDown(KeyCode, Shift)
  94. End Sub
  95.  
  96. Private Sub TxtText_KeyPress(KeyAscii As ReturnInteger)
  97.     RaiseEvent KeyPress(KeyAscii)
  98. End Sub
  99.  
  100. Private Sub TxtText_KeyUp(KeyCode As ReturnInteger, Shift As Integer)
  101.     RaiseEvent KeyUp(KeyCode, Shift)
  102. End Sub
  103.  
  104. Private Sub TxtText_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  105.     RaiseEvent MouseDown(Button, Shift, X, Y)
  106. End Sub
  107.  
  108. Private Sub TxtText_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  109.     RaiseEvent MouseMove(Button, Shift, X, Y)
  110. End Sub
  111.  
  112. Private Sub TxtText_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
  113.     RaiseEvent MouseUp(Button, Shift, X, Y)
  114. End Sub
  115.  
  116. Public Property Get BorderColor() As OLE_COLOR
  117.     BorderColor = BShape.BorderColor
  118. End Property
  119.  
  120. Public Property Let BorderColor(ByVal New_BorderColor As OLE_COLOR)
  121.     BShape.BorderColor() = New_BorderColor
  122.     PropertyChanged "BorderColor"
  123. End Property
  124.  
  125. Public Property Get MultiLine() As Boolean
  126.     MultiLine = TxtText.MultiLine
  127. End Property
  128.  
  129. Public Property Let MultiLine(ByVal New_MultiLine As Boolean)
  130.     TxtText.MultiLine() = New_MultiLine
  131.     PropertyChanged "MultiLine"
  132. End Property
  133.  
  134. Public Property Get SpecialEffect() As fmSpecialEffect
  135.     SpecialEffect = TxtText.SpecialEffect
  136. End Property
  137.  
  138. Public Property Let SpecialEffect(ByVal New_SpecialEffect As fmSpecialEffect)
  139.     TxtText.SpecialEffect() = New_SpecialEffect
  140.     PropertyChanged "SpecialEffect"
  141. End Property
  142.  
  143. Public Property Get Text() As String
  144.     Text = TxtText.Text
  145. End Property
  146.  
  147. Public Property Let Text(ByVal New_Text As String)
  148.     TxtText.Text() = New_Text
  149.     PropertyChanged "Text"
  150. End Property
  151.  
  152. Public Property Get TextAlign() As fmTextAlign
  153.     TextAlign = TxtText.TextAlign
  154. End Property
  155.  
  156. Public Property Let TextAlign(ByVal New_TextAlign As fmTextAlign)
  157.     TxtText.TextAlign() = New_TextAlign
  158.     PropertyChanged "TextAlign"
  159. End Property
  160.  
  161. Public Property Get ToolTipText() As String
  162.     ToolTipText = TxtText.ToolTipText
  163. End Property
  164.  
  165. Public Property Let ToolTipText(ByVal New_ToolTipText As String)
  166.     TxtText.ToolTipText() = New_ToolTipText
  167.     PropertyChanged "ToolTipText"
  168. End Property
  169.  
  170. Public Property Get WordWrap() As Boolean
  171.     WordWrap = TxtText.WordWrap
  172. End Property
  173.  
  174. Public Property Let WordWrap(ByVal New_WordWrap As Boolean)
  175.     TxtText.WordWrap() = New_WordWrap
  176.     PropertyChanged "WordWrap"
  177. End Property
  178.  
  179. 'Load property values from storage
  180. Private Sub UserControl_ReadProperties(PropBag As PropertyBag)
  181.  
  182.     TxtText.BackColor = PropBag.ReadProperty("BackColor", &H80000005)
  183.     TxtText.ForeColor = PropBag.ReadProperty("ForeColor", &H80000008)
  184.     TxtText.Enabled = PropBag.ReadProperty("Enabled", True)
  185.     Set TxtText.Font = PropBag.ReadProperty("Font", Ambient.Font)
  186.     TxtText.BackStyle = PropBag.ReadProperty("BackStyle", 1)
  187.     TxtText.BorderStyle = PropBag.ReadProperty("BorderStyle", 1)
  188.     BShape.BorderColor = PropBag.ReadProperty("BorderColor", -2147483642)
  189.     TxtText.MultiLine = PropBag.ReadProperty("MultiLine", False)
  190.     TxtText.SpecialEffect = PropBag.ReadProperty("SpecialEffect", 0)
  191.     TxtText.Text = PropBag.ReadProperty("Text", "")
  192.     TxtText.TextAlign = PropBag.ReadProperty("TextAlign", 1)
  193.     TxtText.ToolTipText = PropBag.ReadProperty("ToolTipText", "")
  194.     TxtText.WordWrap = PropBag.ReadProperty("WordWrap", True)
  195. End Sub
  196.  
  197. 'Write property values to storage
  198. Private Sub UserControl_WriteProperties(PropBag As PropertyBag)
  199.  
  200.     Call PropBag.WriteProperty("BackColor", TxtText.BackColor, &H80000005)
  201.     Call PropBag.WriteProperty("ForeColor", TxtText.ForeColor, &H80000008)
  202.     Call PropBag.WriteProperty("Enabled", TxtText.Enabled, True)
  203.     Call PropBag.WriteProperty("Font", TxtText.Font, Ambient.Font)
  204.     Call PropBag.WriteProperty("BackStyle", TxtText.BackStyle, 1)
  205.     Call PropBag.WriteProperty("BorderStyle", TxtText.BorderStyle, 1)
  206.     Call PropBag.WriteProperty("BorderColor", BShape.BorderColor, -2147483642)
  207.     Call PropBag.WriteProperty("MultiLine", TxtText.MultiLine, False)
  208.     Call PropBag.WriteProperty("SpecialEffect", TxtText.SpecialEffect, 0)
  209.     Call PropBag.WriteProperty("Text", TxtText.Text, "")
  210.     Call PropBag.WriteProperty("TextAlign", TxtText.TextAlign, 1)
  211.     Call PropBag.WriteProperty("ToolTipText", TxtText.ToolTipText, "")
  212.     Call PropBag.WriteProperty("WordWrap", TxtText.WordWrap, True)
  213. End Sub
  214.  


@Một chút lợi ích của Usercontrol Textbox và Button vừa tạo là: hỗ trợ hiển thị Unicode, nút đẹp (không như mấy cái command button nội tại xấu hết sức!), textbox có border color (textbox thì tôi cũng chẳng biết làm sao mà cho đẹp, nên lợi dụng shape làm border để kiểu cọ một chút bằng cách đổi màu khi mouse move tới lui.)… #-o

Okie, vậy là các thứ cơ bản nhất cũng đã chuẩn bị xong, giờ chỉ còn code Main Project là xong!!! [cool]
Chuẩn bị Module sau (hỗ trợ hộp thoại MsgBox Unicode):

Mã: Chọn hết

  1.  
  2. Private Declare Function MessageBoxW Lib "User32" (ByVal hWnd As Long, ByVal lpText As Long, ByVal lpCaption As Long, ByVal wType As Long) As Long
  3.  
  4. Public Function xUniMsgBox(sNoiDung As String, Optional xNut As VbMsgBoxStyle = vbOKOnly, Optional sTieuDe As String) As VbMsgBoxResult
  5. If sTieuDe = "" Then sTieuDe = App.Title
  6. xUniMsgBox = MessageBoxW(&H0, StrPtr(ToUni(sNoiDung)), StrPtr(ToUni(sTieuDe)), xNut)
  7. End Function
  8.  
  9. Public Function ToUni(str$) As String
  10.     Dim ansi$, UNI$, i&, sTem$, sUni$, arrUNI() As String
  11.     ansi = "a1|a2|a3|a4|a5|a6|a8|a61a62a63a64a65a81a82a83a84a85A1|A2|A3|A4|A5|A6|A8|A61A62A63A64A65A81A82A83A84A85e1|e2|e3|e4|e5|e6|e61e62e63e64e65E1|E2|E3|E4|E5|E6|E61E62E63E64E65i1|i2|i3|i4|i5|I1|I2|I3|I4|I5|o1|o2|o3|o4|o5|o6|o7|o61o62o63o64o65o71o72o73o74o75O1|O2|O3|O4|O5|O6|O7|O61O62O63O64O65O71O72O73O74O75u1|u2|u3|u4|u5|u7|u71u72u73u74u75U1|U2|U3|U4|U5|U7|U71U72U73U74U75y1|y2|y3|y4|y5|Y1|Y2|Y3|Y4|Y5|d9|D9|"
  12.     UNI = "E1,E0,1EA3,E3,1EA1,E2,103,1EA5,1EA7,1EA9,1EAB,1EAD,1EAF,1EB1,1EB3,1EB5,1EB7,C1,C0,1EA2,C3,1EA0,C2,102,1EA4,1EA6,1EA8,1EAA,1EAC,1EAE,1EB0,1EB2,1EB4,1EB6,E9,E8,1EBB,1EBD,1EB9,EA,1EBF,1EC1,1EC3,1EC5,1EC7,C9,C8,1EBA,1EBC,1EB8,CA,1EBE,1EC0,1EC2,1EC4,1EC6,ED,EC,1EC9,129,1ECB,CD,CC,1EC8,128,1ECA,F3,F2,1ECF,F5,1ECD,F4,1A1,1ED1,1ED3,1ED5,1ED7,1ED9,1EDB,1EDD,1EDF,1EE1,1EE3,D3,D2,1ECE,D5,1ECC,D4,1A0,1ED0,1ED2,1ED4,1ED6,1ED8,1EDA,1EDC,1EDE,1EE0,1EE2,FA,F9,1EE7,169,1EE5,1B0,1EE9,1EEB,1EED,1EEF,1EF1,DA,D9,1EE6,168,1EE4,1AF,1EE8,1EEA,1EEC,1EEE,1EF0,FD,1EF3,1EF7,1EF9,1EF5,DD,1EF2,1EF6,1EF8,1EF4,111,110"
  13.     arrUNI = Split(UNI, ",")
  14.  
  15.     For i = 1 To Len(str)
  16.         If IsNumeric(Mid(str, i + 1, 1)) = False Then
  17.             sUni = sUni & Mid(str, i, 1)
  18.         Else
  19.             sTem = IIf(IsNumeric(Mid(str, i + 2, 1)), Mid(str, i, 3), Mid(str, i, 2))
  20.             i = i + IIf(IsNumeric(Mid(str, i + 2, 1)), 2, 1)
  21.             If InStr(ansi, sTem) > 0 Then sTem = ChrW("&h" & arrUNI(InStr(ansi, sTem) \ 3))
  22.             sUni = sUni & sTem
  23.         End If
  24.     Next
  25.     ToUni = sUni
  26. End Function
  27.  


Tiếp theo là code sau trong Main Form, mọi người tự ngâm nhé, đơn giản thôi, ở đây tôi chỉ hướng dẫn thiết kế giao diện thôi mà! :D

Mã: Chọn hết

  1.  
  2. Private Declare Function LoadCursor Lib "user32.dll" Alias "LoadCursorA" (ByVal hInstance As Long, ByVal lpCursorName As Long) As Long
  3. Private Declare Function SetCursor Lib "user32.dll" (ByVal hCursor As Long) As Long
  4. Const IDC_HAND As Long = 32649 'Ban
  5.  
  6.  
  7. Private Sub CmdAbout_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  8. CmdAbout.BorderColor = &HFF00&
  9. SetCursor LoadCursor(ByVal 0&, IDC_HAND)
  10. End Sub
  11.  
  12. Private Sub CmdCong_Click()
  13. LblPhepTinh.Caption = "+"
  14. Lbl1.Caption = ToUni("So61 ha5ng thu71 nha61t:")
  15. Lbl2.Caption = ToUni("So61 ha5ng thu71 hai:")
  16. Lbl3.Caption = ToUni("To63ng:")
  17. End Sub
  18.  
  19. Private Sub CmdCong_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  20. CmdCong.BorderColor = &HFF00&
  21. SetCursor LoadCursor(ByVal 0&, IDC_HAND)
  22. End Sub
  23.  
  24. Private Sub CmdThoat_Click()
  25. End
  26. End Sub
  27.  
  28. Private Sub CmdAbout_Click()
  29. UniMsgBox "Chu7o7ng tri2nh minh ho5a ba2i vie61t ''Hu7o71ng da64n ta5o giao die65n d9e5p cho chu7o7ng tri2nh''" & Chr(13) & "Copyright © 2008 by D9a85ng Minh Du75" & Chr(13) & "http://www.caulacbovb.com", vbOKOnly, "Tho6ng tin"
  30. End Sub
  31.  
  32. Private Sub CmdThoat_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  33. CmdThoat.BorderColor = &HFF00&
  34. SetCursor LoadCursor(ByVal 0&, IDC_HAND)
  35. End Sub
  36.  
  37. Private Sub CmdTru_Click()
  38. LblPhepTinh.Caption = "-"
  39. Lbl1.Caption = ToUni("So61 bi5 chia:")
  40. Lbl2.Caption = ToUni("So61 chia:")
  41. Lbl3.Caption = ToUni("Hie65u:")
  42. End Sub
  43.  
  44. Private Sub CmdTru_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  45. CmdTru.BorderColor = &HFF00&
  46. SetCursor LoadCursor(ByVal 0&, IDC_HAND)
  47. End Sub
  48.  
  49. Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  50. Txt1.BorderColor = &HFF00&
  51. Txt2.BorderColor = &HFF00&
  52. TxtKq.BorderColor = &HFF00&
  53. CmdThoat.BorderColor = &HFF00FF
  54. CmdAbout.BorderColor = &HFF00FF
  55. CmdCong.BorderColor = &HFF00FF
  56. CmdTru.BorderColor = &HFF00FF
  57. End Sub
  58.  
  59. Private Sub LblHelp_Click()
  60. If PbHelp.Visible = False Then
  61.     PbHelp.Visible = True
  62.     Timer2.Enabled = False
  63.     Timer1.Enabled = True
  64.     LblHelp.Caption = ToUni("A63n giu1p d9o74")
  65. Else
  66.     Timer1.Enabled = False
  67.     Timer2.Enabled = True
  68.     LblHelp.Caption = ToUni("Hie65n giu1p d9o74")
  69. End If
  70. End Sub
  71.  
  72. Private Sub LblHelp_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  73. SetCursor LoadCursor(ByVal 0&, IDC_HAND)
  74. End Sub
  75.  
  76. Private Sub Timer1_Timer()
  77. If PbHelp.Width = 5775 And PbHelp.Height = 7095 Then Timer1.Enabled = False
  78. If PbHelp.Width < 5775 Then PbHelp.Width = PbHelp.Width + 20
  79. If PbHelp.Height < 7095 Then PbHelp.Height = PbHelp.Height + 20
  80. End Sub
  81.  
  82. Private Sub Timer2_Timer()
  83. If PbHelp.Width = 15 And PbHelp.Height = 15 Then
  84.     With PbHelp
  85.         .Visible = False
  86.         .Width = 5
  87.         .Height = 5
  88.     End With
  89.     Timer2.Enabled = False
  90. End If
  91. If PbHelp.Width > 20 Then PbHelp.Width = PbHelp.Width - 20
  92. If PbHelp.Height > 20 Then PbHelp.Height = PbHelp.Height - 20
  93. End Sub
  94.  
  95. Private Sub Txt1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  96. Txt1.BorderColor = &HFF0000
  97. End Sub
  98.  
  99. Private Sub Txt2_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  100. Txt2.BorderColor = &HFF0000
  101. End Sub
  102.  
  103. Private Sub TxtKq_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  104. TxtKq.BorderColor = &HFF0000
  105. End Sub
  106.  
  107. Private Sub Form_Load()
  108.     hCursor = LoadCursor(ByVal 0&, IDC_HAND)
  109. End Sub
  110.  


@Nhớ thêm các Object như sau: mượn đỡ code trong file FRM cho nhanh ;))

Mã: Chọn hết

  1.  
  2. VERSION 5.00
  3. Object = "{0D452EE1-E08F-101A-852E-02608C4D0BB4}#2.0#0"; "FM20.DLL"
  4. FrmMain
  5.    BorderStyle     =   0  'None
  6.    Caption         =   "Form1"
  7.    ClientHeight    =   11520
  8.    ClientLeft      =   0
  9.    ClientTop       =   0
  10.    ClientWidth     =   15360
  11.    LinkTopic       =   "Form1"
  12.    Picture         =   "Form1.frx":0000
  13.    ScaleHeight     =   11520
  14.    ScaleWidth      =   15360
  15.    ShowInTaskbar   =   0   'False
  16.    StartUpPosition =   3  'Windows Default
  17.    WindowState     =   2  'Maximized
  18. Timer2
  19.       Enabled         =   0   'False
  20.       Interval        =   1
  21. Timer1
  22.       Enabled         =   0   'False
  23.       Interval        =   1
  24. PbHelp
  25.       Appearance      =   0  'Flat
  26.       AutoRedraw      =   -1  'True
  27.       BackColor       =   &H80000005&
  28.       Enabled         =   0   'False
  29.       BeginProperty Font
  30.          Name            =   "Tahoma"
  31.          Size            =   9.75
  32.          Charset         =   0
  33.          Weight          =   400
  34.          Underline       =   0   'False
  35.          Italic          =   0   'False
  36.          Strikethrough   =   0   'False
  37.       EndProperty
  38.       ForeColor       =   &H0000FF00&
  39.       Height          =   15
  40.       Left            =   4560
  41.       Picture         =   "Form1.frx":3E2C2
  42.       ScaleHeight     =   0
  43.       ScaleWidth      =   0
  44.       TabIndex        =   8
  45.       Top             =   1320
  46.       Visible         =   0   'False
  47.       Width           =   15
  48. sTxtHelp
  49.          Height          =   6855
  50.          Left            =   100
  51.          TabIndex        =   9
  52.          Top             =   100
  53.          Width           =   5535
  54.          VariousPropertyBits=   -1400879085
  55.          ForeColor       =   65535
  56.          ScrollBars      =   3
  57.          Size            =   "9763;12091"
  58.          BorderColor     =   16711680
  59.          SpecialEffect   =   3
  60.          FontName        =   "Tahoma"
  61.          FontHeight      =   240
  62.          FontCharSet     =   0
  63.          FontPitchAndFamily=   2
  64. Txt1
  65.       Height          =   1335
  66.       Left            =   1320
  67.       TabIndex        =   4
  68.       Top             =   1320
  69.       Width           =   2895
  70.       _ExtentX        =   5106
  71.       _ExtentY        =   2355
  72.       ForeColor       =   255
  73.       Font            =   "Form1.frx":46722
  74.       BorderColor     =   65280
  75.       TextAlign       =   3
  76. CmdCong
  77.       Height          =   375
  78.       Left            =   12600
  79.       TabIndex        =   0
  80.       Top             =   1080
  81.       Width           =   2655
  82.       _ExtentX        =   4683
  83.       _ExtentY        =   661
  84.       Caption         =   "Bé tập tính cộng"
  85.       NormalTextColor =   255
  86.       OverTextColor   =   16776960
  87.       DownTextColor   =   65280
  88.       TextAlign       =   2
  89.       Font            =   "Form1.frx":46752
  90.       BorderColor     =   16711935
  91.       BorderColor     =   16711935
  92. CmdTru
  93.       Height          =   375
  94.       Left            =   12600
  95.       TabIndex        =   1
  96.       Top             =   1560
  97.       Width           =   2655
  98.       _ExtentX        =   4683
  99.       _ExtentY        =   661
  100.       Caption         =   "Bé tập tính trừ"
  101.       NormalTextColor =   255
  102.       OverTextColor   =   16776960
  103.       DownTextColor   =   65280
  104.       TextAlign       =   2
  105.       Font            =   "Form1.frx":46786
  106.       BorderColor     =   16711935
  107.       BorderColor     =   16711935
  108. CmdAbout
  109.       Height          =   375
  110.       Left            =   12600
  111.       TabIndex        =   2
  112.       Top             =   2040
  113.       Width           =   2655
  114.       _ExtentX        =   4683
  115.       _ExtentY        =   661
  116.       Caption         =   "Thông tin"
  117.       NormalTextColor =   255
  118.       OverTextColor   =   16776960
  119.       DownTextColor   =   65280
  120.       TextAlign       =   2
  121.       Font            =   "Form1.frx":467BA
  122.       BorderColor     =   16711935
  123.       BorderColor     =   16711935
  124. CmdThoat
  125.       Height          =   375
  126.       Left            =   12600
  127.       TabIndex        =   3
  128.       Top             =   2520
  129.       Width           =   2655
  130.       _ExtentX        =   4683
  131.       _ExtentY        =   661
  132.       Caption         =   "Thoát"
  133.       NormalTextColor =   255
  134.       OverTextColor   =   16776960
  135.       DownTextColor   =   65280
  136.       TextAlign       =   2
  137.       Font            =   "Form1.frx":467EE
  138.       BorderColor     =   16711935
  139.       BorderColor     =   16711935
  140. Txt2
  141.       Height          =   1335
  142.       Left            =   1320
  143.       TabIndex        =   5
  144.       Top             =   3360
  145.       Width           =   2895
  146.       _ExtentX        =   5106
  147.       _ExtentY        =   2355
  148.       ForeColor       =   255
  149.       Font            =   "Form1.frx":46822
  150.       BorderColor     =   65280
  151.       TextAlign       =   3
  152. TxtKq
  153.       Height          =   1335
  154.       Left            =   1320
  155.       TabIndex        =   7
  156.       Top             =   5280
  157.       Width           =   2895
  158.       _ExtentX        =   5106
  159.       _ExtentY        =   2355
  160.       ForeColor       =   255
  161.       Font            =   "Form1.frx":46852
  162.       BorderColor     =   65280
  163.       TextAlign       =   3
  164. Lbl1
  165.       Height          =   375
  166.       Left            =   1320
  167.       TabIndex        =   14
  168.       Top             =   960
  169.       Width           =   2895
  170.       ForeColor       =   12582912
  171.       VariousPropertyBits=   8388627
  172.       Caption         =   "Số hạng thứ nhất:"
  173.       Size            =   "5106;661"
  174.       FontName        =   "Tahoma"
  175.       FontEffects     =   1073741825
  176.       FontHeight      =   240
  177.       FontCharSet     =   0
  178.       FontPitchAndFamily=   2
  179.       FontWeight      =   700
  180. LblHelp
  181.       Height          =   240
  182.       Left            =   2400
  183.       TabIndex        =   13
  184.       Top             =   8040
  185.       Width           =   1320
  186.       ForeColor       =   255
  187.       VariousPropertyBits=   8388627
  188.       Caption         =   "Hiện giúp đỡ"
  189.       Size            =   "2328;423"
  190.       MousePointer    =   99
  191.       FontName        =   "Tahoma"
  192.       FontEffects     =   1073741828
  193.       FontHeight      =   195
  194.       FontCharSet     =   0
  195.       FontPitchAndFamily=   2
  196. Label4
  197.       Height          =   495
  198.       Left            =   2040
  199.       TabIndex        =   12
  200.       Top             =   7080
  201.       Width           =   1815
  202.       VariousPropertyBits=   8388627
  203.       Caption         =   "Có cần Garfiel giúp gì không nào!!?"
  204.       Size            =   "3201;873"
  205.       FontName        =   "Tahoma"
  206.       FontHeight      =   195
  207.       FontCharSet     =   0
  208.       FontPitchAndFamily=   2
  209. Shape13
  210.       BorderColor     =   &H0080FFFF&
  211.       FillColor       =   &H0000FFFF&
  212.       FillStyle       =   0  'Solid
  213.       Height          =   975
  214.       Left            =   3240
  215.       Shape           =   3  'Circle
  216.       Top             =   6840
  217.       Width           =   1095
  218. Shape12
  219.       BorderColor     =   &H0080FFFF&
  220.       FillColor       =   &H0000FFFF&
  221.       FillStyle       =   0  'Solid
  222.       Height          =   975
  223.       Left            =   1680
  224.       Shape           =   2  'Oval
  225.       Top             =   6840
  226.       Width           =   2175
  227. Shape11
  228.       BorderColor     =   &H0080FFFF&
  229.       FillColor       =   &H0000FFFF&
  230.       FillStyle       =   0  'Solid
  231.       Height          =   975
  232.       Left            =   1920
  233.       Shape           =   2  'Oval
  234.       Top             =   7560
  235.       Width           =   2175
  236. Shape10
  237.       BorderColor     =   &H0080FFFF&
  238.       FillColor       =   &H0080FFFF&
  239.       FillStyle       =   0  'Solid
  240.       Height          =   495
  241.       Left            =   1440
  242.       Shape           =   2  'Oval
  243.       Top             =   7440
  244.       Width           =   855
  245. Shape9
  246.       BorderColor     =   &H0080FFFF&
  247.       FillColor       =   &H0080FFFF&
  248.       FillStyle       =   0  'Solid
  249.       Height          =   255
  250.       Left            =   1320
  251.       Shape           =   3  'Circle
  252.       Top             =   7680
  253.       Width           =   135
  254. Lbl3
  255.       Height          =   375
  256.       Left            =   1320
  257.       TabIndex        =   11
  258.       Top             =   4920
  259.       Width           =   2895
  260.       ForeColor       =   12582912
  261.       VariousPropertyBits=   8388627
  262.       Caption         =   "Tổng:"
  263.       Size            =   "5106;661"
  264.       FontName        =   "Tahoma"
  265.       FontEffects     =   1073741825
  266.       FontHeight      =   240
  267.       FontCharSet     =   0
  268.       FontPitchAndFamily=   2
  269.       FontWeight      =   700
  270. Lbl2
  271.       Height          =   375
  272.       Left            =   1320
  273.       TabIndex        =   10
  274.       Top             =   3000
  275.       Width           =   2895
  276.       ForeColor       =   12582912
  277.       VariousPropertyBits=   8388627
  278.       Caption         =   "Số hạng thứ hai:"
  279.       Size            =   "5106;661"
  280.       FontName        =   "Tahoma"
  281.       FontEffects     =   1073741825
  282.       FontHeight      =   240
  283.       FontCharSet     =   0
  284.       FontPitchAndFamily=   2
  285.       FontWeight      =   700
  286. Line2
  287.       BorderColor     =   &H0000FFFF&
  288.       X1              =   4440
  289.       X2              =   4440
  290.       Y1              =   1320
  291.       Y2              =   8400
  292. Line1
  293.       BorderColor     =   &H0000FFFF&
  294.       X1              =   960
  295.       X2              =   4560
  296.       Y1              =   4800
  297.       Y2              =   4800
  298. Shape6
  299.       BorderColor     =   &H00FF00FF&
  300.       FillColor       =   &H0000FF00&
  301.       FillStyle       =   0  'Solid
  302.       Height          =   255
  303.       Left            =   12300
  304.       Shape           =   3  'Circle
  305.       Top             =   2595
  306.       Width           =   255
  307. Shape5
  308.       BorderColor     =   &H00FF00FF&
  309.       FillColor       =   &H0000FF00&
  310.       FillStyle       =   0  'Solid
  311.       Height          =   255
  312.       Left            =   12300
  313.       Shape           =   3  'Circle
  314.       Top             =   2100
  315.       Width           =   255
  316. Shape4
  317.       BorderColor     =   &H00FF00FF&
  318.       FillColor       =   &H0000FF00&
  319.       FillStyle       =   0  'Solid
  320.       Height          =   255
  321.       Left            =   12300
  322.       Shape           =   3  'Circle
  323.       Top             =   1140
  324.       Width           =   255
  325. Shape3
  326.       BorderColor     =   &H00FF00FF&
  327.       FillColor       =   &H0000FF00&
  328.       FillStyle       =   0  'Solid
  329.       Height          =   255
  330.       Left            =   12300
  331.       Shape           =   3  'Circle
  332.       Top             =   1635
  333.       Width           =   255
  334. Shape2
  335.       BorderColor     =   &H00FF00FF&
  336.       FillColor       =   &H00FFFF00&
  337.       FillStyle       =   0  'Solid
  338.       Height          =   375
  339.       Left            =   12240
  340.       Shape           =   3  'Circle
  341.       Top             =   1560
  342.       Width           =   375
  343. Shape1
  344.       BorderColor     =   &H00FF00FF&
  345.       FillColor       =   &H00FFFF00&
  346.       FillStyle       =   0  'Solid
  347.       Height          =   375
  348.       Left            =   12240
  349.       Shape           =   3  'Circle
  350.       Top             =   1080
  351.       Width           =   375
  352. Shape7
  353.       BorderColor     =   &H00FF00FF&
  354.       FillColor       =   &H00FFFF00&
  355.       FillStyle       =   0  'Solid
  356.       Height          =   375
  357.       Left            =   12240
  358.       Shape           =   3  'Circle
  359.       Top             =   2520
  360.       Width           =   375
  361. Shape8
  362.       BorderColor     =   &H00FF00FF&
  363.       FillColor       =   &H00FFFF00&
  364.       FillStyle       =   0  'Solid
  365.       Height          =   375
  366.       Left            =   12240
  367.       Shape           =   3  'Circle
  368.       Top             =   2040
  369.       Width           =   375
  370. LblPhepTinh
  371.       Height          =   615
  372.       Left            =   1080
  373.       TabIndex        =   6
  374.       Top             =   2520
  375.       Width           =   1215
  376.       ForeColor       =   255
  377.       Size            =   "2143;1085"
  378.  


@Đây là thành quả: [dzo2]

1.JPG


@Thế này thấy vẫn còn thô đối với các bé, cần cái gì đó “động động”
Àh, chèn Flash vào được đấy, chúng ta Add vào 2 Shockwave Flash Object nhé, lựa hai cái flash không nền chèn vào, sẽ rất tuyệt đấy. Nhớ chọn Windows Mode =Transparent, None Check Show Menu.
Okie, tuyệt rồi (tuy hơi nặng do flash chạy), thành quả đây:
[cool]
Kq.JPG

Còn lại code tính toán và trợ giúp mọi người tự code lấy nhé, nhớ là mình đang làm chương trình cho bé đó!
~°Dòng Sông Mùa Thu°~
Studying...!

Hình đại diện của người dùng
Dang Minh Du
Thành viên ưu tú
Thành viên ưu tú
Bài viết: 531
Ngày tham gia: T.Tư 02/04/2008 2:08 pm
Đến từ: RGames Team
Has thanked: 3 time
Been thanked: 17 time
Liên hệ:

Re: Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Gửi bàigửi bởi Dang Minh Du » CN 19/10/2008 9:49 am

Đây là toàn bộ project và hình ảnh:
@Tạm dừng tại đây, tuần sau sẽ post tiếp :D
Tập tin đính kèm
Skin.rar
(295.31 KiB) Đã tải 2442 lần
Pic.rar
(719.69 KiB) Đã tải 2278 lần
~°Dòng Sông Mùa Thu°~
Studying...!

Hình đại diện của người dùng
Dang Minh Du
Thành viên ưu tú
Thành viên ưu tú
Bài viết: 531
Ngày tham gia: T.Tư 02/04/2008 2:08 pm
Đến từ: RGames Team
Has thanked: 3 time
Been thanked: 17 time
Liên hệ:

Re: Hướng dẫn từng bước tạo giao diện "đẹp" cho ct

Gửi bàigửi bởi Dang Minh Du » CN 26/10/2008 2:48 pm

Đây là toàn bộ Project của cái Textbox trên, đã thêm Properties Locked. Mời Pác Down về tham khảo :D
Code đã thêm:

Mã: Chọn hết

  1. Public Property Get Locked() As Boolean
  2.     Locked = TxtText.Locked
  3. End Property
  4. Public Property Let Locked(ByVal New_Locked As Boolean)
  5.     TxtText.Locked() = New_Locked
  6.     PropertyChanged "Locked"
  7. 'Thêm vào UserControl_ReadProperties
  8.     TxtText.Locked = PropBag.ReadProperty("Locked", False)
  9. 'Thêm vào UserControl_WriteProperties
  10.     Call PropBag.WriteProperty("Locked", TxtText.Locked, False)
  11. End Property

Thanks Pác đã đọc bài này :)
Tập tin đính kèm
UniTextbox_LockedModify.rar
(2.79 KiB) Đã tải 904 lần
~°Dòng Sông Mùa Thu°~
Studying...!


Quay về “[VB] Bài viết hướng dẫn”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.0 khách