บทความ – Menu xp explorer Bar บน Windows form


 

By nano
VS (VS 2005)
Windows Application (C#)

หลายๆ ครั้งที่เราออกแบบหน้าจอโปรแกรมแล้ว ไม่ถูกใจผู้ใช้งาน กว่าจะได้ลงมือ Coding จริงๆ ก็ปาไปแล้วหลายสัปดาห์ เนื่องจาก ผู้ใช้งาน ยังไม่ถูกใจ…

บทความนี้จะทำให้การออกแบบหน้าจอนั้นง่าย แต่ดูเป็นมืออาชีพมากขึ้น นำมาฝากสำหรับมือใหม่ทุกๆ ท่านครับ

ออกแบหน้าจอ

1. ก่อนอื่นต้องไป Downloads XPExplorerBar Component จาก http://www.codeproject.com/cs/miscctrl/XPTaskBar.asp เสียก่อนครับ เสร็จแล้ว เปิด VS.Net 2005 ขึ้นมา New Project 

    เลือก Project Types เป็น Windows ,

    Templates เป็น Windows Application

Downloads XPExplorerBar สามารใช้งาน บน SV 2002, VS 2003, VS2005

Extract file XPExplorerBar_src_v3_3_VS2005.zip ไปที่ Folder Project (ในที่นี้ Project ผมชื่อ WinApplLogin)

2. คลิกขวาบน Solution Add Existing Project… เพื่อ Add Project XPExplorerBar เข้ามาใน Project ของเรา

3. เลือก Project XPExplorerBar.csproj

4. เรียบร้อย ใน Solution WinApplLogin จะเห็นมี 2 Project เสร็จแล้ว Build 1 ครั้ง เพื่อให้ได้ XPExplorerBar.dll ไป References ใน Project ของเรา Project XPExplorerBar.csproj Open source ครับ สามรถเปิดดู code แก้ไข ได้ครับ

5. VS.Net จะ Add Tab Toolbox XPExplorerBar Components ให้อัตโนมัติ

6. ที่ Form1 ลาก TaskPane มาวางบน Form

7. Set Properties Dock ดังรูป เพื่อให้อยู่ฝั่งซ้าย

8. เราจะมาสร้างเมนู ฝั่งซ้ายกันครับ

9. ลาก Expando มาวาง บน  TaskPane (3 Object)

10. Set Properties Form1 IsMdiContainer เป็น True เพื่อทำเป็น Main Form

11. ลาก Splitter มาวาง เพื่อแบ่งแยก Menu และ Form ลูก ครับ

12. ลาก taskItem มาวางบน Expando เพื่อทำหน้าที่เป็นเมนูให้เรา แล้ว Set Properties Expando (MainMenu, Transaction, LoginSystems) Animate = True (Animate ให้ทำงานเหมือน Animation), AutoLayout=True (AutoLayout  จัด Layout Auto ครับ)

Add Title Image

Collapsed = True มันจะหุบเข้าครับ , Collapsed = False จะขยายออก

13. บน Expando LoginSystems ลาก XPTextBox มาวาง ในส่วนของ Expando LoginSystems ให้ Set AutoLayout=False เพื่อสามารถจัด Layout ได้

14. ลาก Button มาวาง 2 Object (Login, Cancel)

15. ลาก label มาวาง 2 Object (Username, Password)

16. Set Image ให้กับ Menu แต่ละตัว

17. Run เพื่อทดสอบดูหน้าจอครับ (ถ้ายังไม่ กด Login ก็ Disable Menu)

(คลิกปุ่ม Login) User Login เรียบร้อย ให้ทำการ Enable menu (ตรงจุดนี้เราสามารถ ตรวจสอบ Level User ได้ ว่าให้ใช้ Menu ไหนบ้าง โดยเก็บข้อมูลใน base ครับ) แล้วสั่ง MainMenu, Transaction (Collapsed = False)

LogginSystems (Collapsed = True) จะเห็นว่า MainMenu และ Transaction ขยายออกส่วน LogginSystems จะหุบข้า

กด Cancel User ออกจาก ระบบ ให้ Disable Menu

User Log out เรียบร้อย

19. มาสร้าง Form ลูกกัน เพื่อให้ Project ดูเป็นระบบเรียบร้อย เราควรแยก form แต่ละชนิด ให้อยู่แต่ละ Folder เช่น Form สำหรับข้อมูล Master Data Form สำหรับข้อมูล Transaction ให้สร้าง 2 Folder คือ

MasterData และ Transaction โดย คลิกขวาบน Project => Add => New Folder

20. Add Windows Form คือ Employees และ PO เป็น Form เปล่า ใส่ Label ให้ Form ละ 1 อัน

Form Employees set Label1:Text =ข้อมูลพนักงาน Form PO Label1:Text= ข้อมูล PO (เพื่อทดสอบ menu)

21. Form Employees และ Form PO (form ลูกตัวอย่าง ทำแค่ 2 form ครับ) ดังรูป

22. โดย Menu จะทำงานดังนี้ คลิกที่ Menu ข้อมูลพนักงานให้ Show Form ข้อมูลพนักงาน

23. คลิกที่ Menu ออกใบ PO ให้ Show Form ข้อมูล PO

24 และแล้ว การอกกแบบหน้าจอก็เป็นอันเสร็จเรียบร้อยครับ

เขียน Code กันครับ

เมื่อ User เปิดโปรแกรม ครั้งแรก ใน Method Form1_Load ต้องการให้ MainMenu (expando1) และ Transaction (expando2) ไม่สามารใช้งานได้ เปิดใช้งานเฉพาะ LoginSystems (expando3) เพื่อให้ User ใช้ระบบโดยผ่านการ Login เข้าระบบ

private void Form1_Load(object sender, EventArgs e)

{

expando1.Enabled = false;

expando2.Enabled = false;

expando3.Collapsed = false;

}

ปุ่ม Login (button1) Method button1_Click จำลองว่า User Login เข้าระบบโดยผ่านการป้อน UserName และ Password เรียบร้อย ให้ MainMenu และTransaction สามารถใช้งานได้ (Enabled = true) และให้ขยาย Menu ออก โดยคำสั่ง expando1.Collapsed = false; LoginSystems ให้หุบเข้า โดยคำสั่ง expando3.Collapsed = true;

//Login

private void button1_Click(object sender, EventArgs e)

{

//Login

expando1.Enabled = true ;

expando2.Enabled = true;

expando1.Collapsed = false;

expando2.Collapsed = false;

expando3.Collapsed = true;

}

จำลองว่า User ออกจากระบบ (แต่ยังไม่ปิดโปรแกรม)

//cancel

private void button2_Click(object sender, EventArgs e)

{

//cancel

expando1.Enabled = false;

expando2.Enabled = false;

expando1.Collapsed = true;

expando2.Collapsed = true;

expando3.Collapsed = false;

}

เข้าจัดการกับข้อมูลพนักงาน โดยคลิกที่เมนู ข้อมูลพนักงาน (taskItem1)

//ข้อมูลพนักงาน

private void taskItem1_Click(object sender, EventArgs e)

{

MasterData.Employees f = new WinApplLogin.MasterData.Employees();

f.MdiParent = this;

f.WindowState = FormWindowState.Maximized;

f.Show();

}

เข้าจัดการกับข้อมูลออกใบสั่งซื้อ โดยคลิกที่เมนู ออกใบสั่งซื้อ (taskItem4)

//ออกใบสั่งซื้อ

private void taskItem4_Click(object sender, EventArgs e)

{

Transaction.PO f = new WinApplLogin.Transaction.PO();

f.MdiParent = this;

f.WindowState = FormWindowState.Maximized;

f.Show();

}

สรุป

เห็นใหมครับการออกแบบหน้าจอ และเมนูโปรแกรมบน Windows Application ไม่ใช่เรื่องยากเลยใช่ใหมครับ

มือใหม่ก็สามารถออกแบบหน้าจอได้เหมือนมืออาชีพได้ ผู้ใช้งานจะบ่นน้อยลง คุณจะมีเวลาพัฒนาระบบมากขึ้น งานเสร็จเร็ว หัวหน้ามีพึ่งพอใจ แล้วสิ้นปีไม่แน่ คุณก็อาจจะได้เงินเพิ่ม …

อ้างอิง

ศึษาเพิ่มเติมจาก

Themed Windows XP style Explorer Bar

By Mathew Hall.

http://www.codeproject.com/cs/miscctrl/XPTaskBar.asp

หากเกิดข้อผิดพลาดประการใด ต้องขออภัย และพร้อมน้อมรับคำแนะนำ เพื่อแก้ไขในครั้งต่อๆ ไปครับ

ขอให้สนุกกับโลกของ .Net ครับ…

อ่านเพิ่มเติมได้ที่ : Greatfriends.biz:=> บทความ – Menu XP Explorer Bar บน Windows form

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Windows Application
One comment on “บทความ – Menu xp explorer Bar บน Windows form
  1. mamgmo พูดว่า:

    สุดยอดมากครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: