Month: June 2019

Quick Analysis ใน Excel 2016 : ชุดคำสั่ง “Formatting”

sirirat.g

June 16, 2019

จากบทความที่เคยเขียนไปก่อนหน้านี้ เรื่อง แนะนำการใช้เครื่องมือ Quick Analysis ใน Excel 2016 : ชุดคำสั่ง “Text” สำหรับโจทย์ที่เป็นตัวอักษร แต่ครั้งนี้จะมาเล่าต่อของ Quick Analysis ในชุดคำสั่ง “Formatting” เหมือนเดิมนั่นแหละ แต่โจทย์จะเปลี่ยนไปเป็นตัวเลขบ้าง มาดูกันสิว่ามันสามารถทำอะไรได้บ้าง

สำหรับรอบนี้ได้สมมุติข้อมูลเป็นข้อมูลเวลาการทำงานในแต่ละวันของพนักงานที่ทำงานเป็นกะ เป็นรายชั่วโมง โดยคนคนนี้ทำงาน ได้กี่ชั่วโมงในแต่ละวัน ดังรูป

มาดูว่าจะมีลูกเล่นอะไรบ้างค่ะ

ส่วน Data bar เป็นการแสดง Bar หรือแท่งของข้อมูลนั่นเองค่ะ
ถ้าไม่เห็นภาพ มาปฏิบัติกันดีกว่าค่ะ โดยเลือกช่วงของข้อมูล และเลือก Formatting เลือก Quick Analysis จากนั้นเลือก Data bar ตามขั้นตอนดังรูป

ผลลัพธ์ที่ได้ ดังรูปด้านล่างค่ะ เป็นการแสดง Bar ให้เห็นถึงปริมาณของชั่วโมงการทำงานนั่นเอง

ส่วน Greater จะเลือกข้อมูลที่มีข้อมูลที่สูงกว่า ที่เรากำหนด สามารถทำได้ดังนี้ค่ะ
โดยเลือกช่วงข้อมูลที่ต้องการ เลือก Quick Analysis และเลือก Formatting จากนั้นเลือก Greater จะปรากฎ Dialog ขึ้นมาเพื่อให้ใส่ จำนวนที่จะให้ว่าให้เลือกข้อมูลที่ดีกว่าอะไร ในที่นี้ระบุเป็น “8” จากนั้น จะให้แสดงข้อมูลที่เข้าเงื่อนไขเป็นอย่างไร ในที่นี่เลือกเป็น “Light Red Fill with Dark Red Text” คือให้ cell และอักษร ที่เข้าเงื่อนไขเป็นสีแดง นั่นเอง (สามารถทำตามได้จากรูปด้านล่างค่ะ)

และผลลัพธ์ คือใน Column C จะทำการ เปลี่ยนสีของ cell และ อักษร เป็นสีแดง สำหรับ วันที่มีการทำงานมากกว่า 8 ชั่วโมงนั่นเอง

ส่วน Color จะแสดงข้อมูลในลักษณะของสี เพื่อแสดงถึงข้อมูลด้วยสีต่าง ๆ โดยตัวเลขน้อยสุดจะเป็น สีแดง เลขสูงสุดจะเป็นสีเขียว สำหรับข้อมูลตัวเลขกลาง ๆ จะเป็นสีที่แตกต่างออกไป
มาทำเพื่อให้เห็นภาพดีกว่าค่ะ โดยเลือกช่วงข้อมูล จากนั้นเลือก Quick Analysis และเลือก Color ผลลัพธ์ จะเป็นดังรูปด้านล่างค่ะ

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

June 16, 2019
สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms

suriporn.a

June 14, 2019

สวัสดีค่ะ จาก post ที่แล้วได้แนะนำ วิธีติดตั้งเครื่องมือที่ใช้พัฒนา app ด้วย Xamarin.Forms ไปแล้ว บทความนี้เราจะมาเริ่มสร้าง app ง่ายๆ นั่นก็คือ Hello World app หรือ แอพสวัสดีชาวโลก นั่นเองค่ะ เพื่อเรียนรู้การทำงานและทำความเข้าใจ solution/project structure ของ Xamarin

มาเริ่มกันเลยค่า…
1. ก่อนอื่นเราต้องสร้าง project ขึ้นมาก่อน เปิด Visual Studio แล้วเลือก Create New Project ดังรูป

2. เลือก Cross Platform และเลือก Mobile App (Xamarin.Forms) template หลังจากนั้น ตั้งชื่อ Project และระบุ path ของ project ตามต้องการแล้วกด OK ดังรูป

3. หน้า Select template จะมี template ให้เลือก 3 แบบ คือ Blank, Master-Detail และ Tabbed
– Blank คือ project เปล่าๆ ว่างๆ ไม่มี page ใดๆ generate มาให้
– Master-Detail คือ project ที่ generate page ในลักษณะ Mater Detail เป็นตัวอย่างมาให้พร้อม
– Tabbed คือ project ที่ generate page ในลักษณะ Tab menu มาให้
เลือกได้ตามสะดวก ขึ้นอยุ่กับ app ว่าเป็นแบบไหน ผู้เขียนเลือก Blank template ไปก่อน อยากเพิ่มอะไรค่อยเพิ่มทีหลังได้ค่ะ ส่วนของ Platform ก็เลือกเลยว่าอยากให้คอมไพล์เป็น app ของ platform ไหนบ้าง และในส่วนของ Code Sharing Strategy จะมีให้เลือก 2 รูปแบบ คือ .NET Standard กับ Share Project ให้กดเลือก .NET Standard ซึ่งเป็นCode Sharing รูปแบบใหม่ที่ทาง Microsoft แนะนำ แล้วกด OK ดังรูป

4. เสร็จแล้วจะได้หน้าตา project ที่มีโครงสร้างแบบนี้ พร้อมให้เราเขียน code พัฒนา app แล้วค่ะ

ก่อนที่เราจะทดลอง run ดูผลลัพธ์ เรามาดู Solution/Project structure กันคร่าวๆ ก่อนว่าประกอบด้วยอะไรบ้าง เราต้องเขียน code ลงตรงไหน ยังไงบ้าง

Solution/Project Structure

ใน solution ที่เราสร้างขึ้นมาจะประกอบไปด้วย share project และ project ตาม platform ที่เราได้เลือกไว้ที่หน้า template จากตัวอย่างข้างบนจะประกอบด้วย

1. HelloWord คือ share project ที่เราสามารถเขียน code ทั้งหมดภายใต้ project นี้ ทั้งส่วน UI ที่เขียนด้วย XAML และส่วน business logic ต่างๆ ที่เขียนด้วย C#
2. HelloWorld.Android คือ android platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ โดยภายในโครงสร้าง project จะมี MainActivity.cs ที่ภายในมีการ initial Xamarin.form เอาไว้ และมีไฟล์ AndroidManifest.XML,Assets, Resource file ต่างๆ ที่คล้ายกับโครงสร้าง android project ทั่วไป ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้ค่ะ
3. HelloWorld.iOS คือ iOS platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ เช่นเดียวกันกับ android ซึ่งภายในโครงสร้าง iOS project จะมีไฟล์หลักๆ AppDelegate.cs, Assets,Resource, Info.plist เช่นเดียวกับโครงสร้าง iOS project ที่เขียน native app ด้วย XCode ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้เช่นเดียวกัน

เมื่อเราได้ทราบ solution structure คร่าวๆ แล้ว เราจะมาทดลองเขียน code และ run แอปกันดูนะคะ หลักๆ เลย เราจะเขียน UI ด้วย XAML ไฟล์ และ code behind เป็น .cs จากรูปด้านล่าง ที่ solution explorer สังเกตจะมีไฟล์ App.xam.cs ซึ่งจะเป็นไฟล์หลักในการ start แอปขึ้นมา

ซึ่งในไฟล์ ส่วนหลักที่เรียก load หน้าแรกของ app ขึ้นมา คือ การ set หน้า page แรกให้กับ MainPage properties โดย default จะ set ไปที่ MainPage ซึ่งเป็น Page ที่เราสร้างขึ้น และมี override method หลัก 3 method คือ OnStart(), OnSleep() และ OnResume() แต่ละ method การทำงานก็ตามชื่อเลย หากเราต้อง handle code อะไรที่จะให้แอปทำงานเพิ่มเติมก็ใส่ code เพิ่มเติมได้เลย ดังรูป

ทีนี้เราลองมาแก้ code ที่หน้า MainPage.xaml กันดูบ้าง ทดลองเปลี่ยนข้อความและขยาย Font ดังรูป

เสร็จแล้วก็ได้เวลา run app ขึ้นมาซะที หากใครติดตั้งตัว Emulator มาด้วยแล้ว ตรง tab bar ที่รัน ก็จะ default Emulator ตัวนั้นขึ้นมาให้ทันที ซึ่งผู้เขียนไม่ได้ติดตั้งไว้ เนื่องจากกินพื้นที่เยอะและเวลา run เนี่ยกินแรมเยอะมากกกก โดยผู้เขียนจะใช้วิธีเสียบสาย usb ต่อเข้ากับมือถือ android เพื่อที่จะได้ run บน device จริงๆเลย (ปล. มือถือต้องเปิด Developer mode และ USB Debugging mode ก่อนนะคะ ซึ่งวิธีเปิดลองหาดูตาม google ค่ะ เพราะแต่ยี่ห้อ แต่ละรุ่นมีวิธีกดเปิดไม่เหมือนกัน) ถ้าหา device เจอแล้ว ตรง tab bar ที่รัน จะขึ้นรุ่นมือถือมาให้เห็นดังรูป

กดปุ่ม run เลยค่ะ ผลลัพธ์ที่ได้บนหน้าจอมือถือของเราก็จะประมาณนี้ โดย app จะถูก build และติดตั้งบนเครื่องให้เรียบร้อยค่ะ หลังจากนั้นเราสามารถเรียกดู app ได้โดยไม่ต้องเสียบสายจากการแตะ icon บนหน้าจอเหมือนแอพทั่วไปบนเครื่องได้เลยค่ะ

เป็นอันเสร็จเรียบร้อยค่ะ ^^ ฝากบทความถัดไปของซีรีย์นี้ด้วยนะคะ => Xamarin.Form Binding ข้อมูลด้วย MVVM pattern

June 14, 2019
เมื่อฉัน “แหก” (ใบแจ้งค่าน้ำประปา) การประปาส่วนภูมิภาค

kanakorn.h

June 13, 2019

Disclaimer: คำเตือน บทความนี้ ผู้เขียนมีจุดประสงค์ “แค่” นำเสนอ วิธีการแก้ปัญหาเมื่อจ่ายค่าน้ำประปา ผ่านทาง Mobile Application ไม่ได้เท่านั้น

ปัญหา: ทุก ๆ เดือน เจ้าหน้าที่การประปาจะมาจดมาตรวัตน้ำ และปริ้นท์ใบเสร็จมาใส่กล่องจดหมายหน้าบ้าน และก็สามารถจ่ายผ่าน True Money Wallet ได้ทุกครั้ง … แต่มาครั้งนี้ จ่ายไม่ได้

จากภาพ จะเห็นว่า ใบเสร็จประกอบด้วยข้อมูลต่าง ๆ แต่ที่น่าสนใจ ได้แก่
– เลขที่ใบแจ้งค่าน้ำ: 1227620229846
– เลขที่ผู้ใช้น้ำ: 1227052xxxx
– หน่วยงาน: 1227-21
– วันที่อ่าน: 09/06/62
– รวมเงินที่ต้องชำระทั้งสิ้น: 353.10

คราวนี้ … ใบแจ้งนี้ จะมี QR Code และ Barcode ซึ่ง ทดลองใช้ Google Lens อ่านพบว่า ได้ค่าออกมาเป็น

|09940001649041111227052xxxx1906621227620229846000930000035310

นับแล้ว ได้ความยาว 62 ตัวอักษร

ลองแล้วลองอีก ก็ไม่สามารถจ่ายได้ โทรไปถามการประปา ท่านก็ว่า ให้ไปที่สำนักงาน ซึ่ง … ไกลมวากกกกก คิวก็ยาวววววว จ่ายผ่านบัตรเครดิตไม่ได้ด้วย

ก็เลย ไปที่ 7-Eleven ผลคือ ก็ยิง Barcode ได้ แต่ไม่สามารถจ่ายเงินได้อยู่ดี !!!

พอดีสาขาที่ไป ช่วงนั้นลูกค้าไม่คับคั่ง จึงสอบถามพนักงานว่า ไม่ทราบมีวิธี Manual ไม๊ จะได้ทราบว่า มี โดยที่ Counter สามารถ Key เลขที่ใบแจ้งค่าน้ำ, เลขที่ผู้ใช้น้ำ, หน่วยงาน ได้

แต่ …. เมื่อ Key ตามช่องที่ระบบมีให้นั้น ปรากฏว่า ตั้งแต่ เลขที่ใบแจ้งค่าน้ำ ระบบก็บอกว่าไม่ถูกต้อง

ก็เลย ขอรบกวนเค้า ให้ลอง Key ตัวเลขใต้ Barcode ขนาดความยาว 58 ตัวอักษร ลงไป ในช่อง เลขที่ใบแจ้งค่าน้ำ เลย ผลปรากฏว่า จ่ายได้ !!!

12276202298461227052xxxx122721190662000035310

อึ่มมมมม มันต้องมีอะไรแน่ ๆ …. ก็เลขมาสังเกตดู

ถ้าเอา เลขที่ใบแจ้งค่าน้ำ, เลขที่ผู้ใช้น้ำ, หน่วยงาน มาต่อกัน จะได้
1227620229846 1227052xxxx 122721

ส่วนต่อมา
190662
น่าจะเป็น 19/06/62 ซึ่ง ก็คือ 10 วัน หลังจาก วันที่อ่าน (09/06/62)

และ
000035310
น่าจะเป็น จำนวนเงิน หลักล้าน ทศนิยม 2 ตำแหน่ง Padding ด้วย 0 ด้านหน้า
0,000,353.10

อย่ากระนั้นเลย ไหน ลองเอาของเดือนที่แล้วมาดูซิ ซึ่งเคยจ่ายผ่าน App ได้

09940001649041111227052xxxx2105621227620148723000930000037343

เปรียบเทียบ 2 เดือน

|09940001649041111227052xxxx1906621227620229846000930000035310
09940001649041111227052xxxx2105621227620148723000930000037343

อ่อ เพราะเดือนที่ยิงไม่ได้ มีเครื่องหมาย | ข้างหน้า

และ มีเลข 0994000164904111
UPDATE: 0994000164904 คือ เลขที่ผู้เสียภาษี (Tax ID) ส่วน 111 อาจจะเอาไว้คั่น มั้ง

สรุป

เดือนไหนจ่ายไม่ได้ ลองเอาเลขใต้ Barcode ให้ 7-Eleven คีย์เข้าไปดูในช่อง “เลขที่ใบแจ้งค่าน้ำ” ก็จะจ่ายได้จร้า

แล้ว …. ถ้าเอา
09940001649041111227052xxxx1906621227620229846000930000035310
ไปสร้าง QR Code หล่ะ (ไม่เอา | นำหน้า)

เฮ้ยยยยยยยย !!!!

June 13, 2019
WPF Layout (Part II)

wunwisa.c

June 11, 2019
Popular layout panels of WPF

1. StackPanel

ภาพตัวอย่าง StackPanel

StackPanel ของ WPF เป็น panel ที่เรียบง่ายและมีประโยชน์ในการนำมาใช้งาน โดยรูปแบบการจัดวางของ element ที่เป็น child จะวางอยู่ในรูปแบบซ้อนจากบนลงล่างหรือเรียงไปทางด้านซ้ายไปขวา ขึ้นกับการกำหนดค่าของ orientation StackPanel เหมาะสำหรับการจัดวางในรูปแบบที่มีลักษณะเป็น List โดย ItemsControls ของ WPF ทั้งหมด ที่เป็นลักษณะของ ComboBox, ListBox หรือ Menu จะใช้ StackPanel เพื่อจัดรูปแบบภายในของ Control ตัวมันเอง ดังตัวอย่าง
```
<StackPanel>
  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>
```
Stack Items horizontally

จากภาพตัวอย่างจะแสดงในส่วนของการใช้ horizontal stack panel คือจะประกอบด้วย ปุ่ม “OK” และ ปุ่ม “Cancel” ใน window โดยเมื่อมีการเปลี่ยนขนาดของตัวอักษรหรือเปลี่ยนภาษา โดยที่เราไม่จำเป็นต้องกำหนดขนาดของปุ่ม แต่ stack panel จะทำหน้าที่ในการจัดเรียงปุ่มตามขนาดของปุ่มทั้งสองให้โดยอัตโนมัติ ดังตัวอย่าง

ภาพตัวอย่าง Stack Items horizontally
```
<StackPanel Margin="8" Orientation="Horizontal">            
   <Button MinWidth="93">OK</Button>
   <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button>
</StackPanel>
```
2. Wrap Panel

ภาพตัวอย่าง Wrap Panel

Wrap panel เหมือนกับ Stack Panel แต่ต่างกันที่ Wrap panel คือจะไม่บรรจุ child ทั้งหมดใน 1 แถว แต่ตัดส่วนที่เกินและขึ้นบรรทัดใหม่ กรณีที่ไม่มีพื้นที่ว่างเหลือพอบรรจุอยู่ โดยทิศทางการจัดวางสามารถกำหนดเป็น Horizontal หรือ Vertical
Wrap panel เคยใช้จัดวาง tabs ของ tabs control, itemของเมนูใน toolbar หรือ item ใน Windows Explorer ในรูปแบบ list โดย Wrap panel จะถูกนำมาใช้บ่อยกับitem ที่มีขนาดเท่ากัน แต่ในส่วนนี้ไม่ใช่ข้อกำหนดของ Wrap panel
```
<WrapPanel Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</WrapPanel>
```
3. Dock Panel

Dock panel คือรูปแบบในการจัดวางเรียง elements ของ panel นั้นๆ ได้ 4 ด้าน คือ ซ้าย ขวา บน และ ล่าง หรือจะจัดเรียงไว้ตรงกลางก็สามารถทำได้ โดยแต่ละทิศทางการจัดเรียงจะสามารถกำหนดได้นั้นต้องระบุที่ DockPanel.Dock กรณีที่ต้องการจัดวางเรียงให้อยู่ตรงกลางของ panel จำเป็นต้องให้ child ที่ต้องการจัดเรียงไว้ตรงกลางนั้นจัดวางอยู่ในตำแหน่งสุดท้าย แล้วต้องกำหนด panel นั้น ให้ มี LastChildFill property = true ดังตัวอย่าง

ภาพตัวอย่าง Dock Panel
```
<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>
```
Multiple elements on one side

Dock panel รองรับการมี elements ได้หลายตัวในแต่ละด้าน โดยแต่ละ element ต้องระบุ DockPanel.Dock ให้ตรงกับทิศทางที่ต้องการจัดเรียง ดังตัวอย่าง

ภาพตัวอย่าง Multiple elements on one side
```
<DockPanel LastChildFill="True">
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>
```
Change the stacking order

ลำดับการจัดเรียงพื้นที่ให้กับ element คือ มันจะกำหนดพื้นที่การจัดเรียงคือ elements ตัวแรก จะได้พื้นที่ทั้งหมดตามความยาวหรือความสูงของตัวมันเอง ในส่วนของ elements อื่นๆจะได้พื้นที่เหลือจาก elements ตัวแรก และ elements ตัวอื่นๆที่จัดวางเรียงต่อๆกัน

4. Canvas Panel

Canvas คือ panel ที่มีรูปแบบพื้นฐานที่ธรรมดาที่สุดใน WPF โดย elementภายใน panel จะมีพิกัดที่ชัดเจน โดยสามารถระบุพิกัดที่ต้องการจัดเรียงด้านต่างๆโดยใช้ Canvas.Left, Canvas.Top, Canvas.Bottom และ Canvas.Right โดยระบุใน properties ของ element นั้นๆ

Canvas เป็น Panel ที่ใช้สำหรับจัดกลุ่ม elements ที่เป็น 2D แต่จะไม่ใช้สำหรับจัดรูปแบบของ UI โดยส่วนนี้จะสำคัญมากเนื่องจากการกำหนดพิกัดที่แน่นอนจะทำให้ยุ่งยากในกรณีที่เราต้องการเปลี่ยนขนาด ขยายขนาด หรือจำกัด application ผู้พัฒนาที่เคยพัฒนาในส่วนของ Winforms จะคุ้นเคยกับการจัดวางรูปแบบแบบนี้ แต่มันไม่ใช่วิธีปฏิบัติที่ดีใน WPF โดยมีการกำหนดการจัดวางตำแหน่งตามตัวอย่าง
```
<Canvas>
    <Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue"  />
    <Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58" Fill="Blue"  />
    <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue" 
          Stretch="Fill" Data="M61,125 L193,28"/>
</Canvas>
```
Override the Z-Order of Elements

โดยปกติ Z-Order ของ elements ใน canvas จะถูกระบุลำดับใน XAML แต่เราสามารถ override ของ Z-Order ได้โดยการกำหนด Canvas.ZIndex ของ element ดังตัวอย่าง

ภาพตัวอย่าง Override the Z-Order of Elements
```
<Canvas>
    <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"    Canvas.ZIndex="1"/>
    <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>
</Canvas>
```
แหล่งอ้างอิง
https://www.wpftutorial.net
June 11, 2019
WPF Layout (Part I)

wunwisa.c

June 11, 2019
Introduction to WPF Layout

การอออกแบบ controls คือส่วนสำคัญของการออกแบบโปรแกรมที่นำมาใช้งาน การจัดวาง controls ที่มีการกำหนดค่าขนาดของ pixel ของ controls นั้นๆ อาจจะใช้งานได้ดีในกรณีสภาพแวดล้อมที่ถูกจำกัด แต่ในขณะเดียวกันจะได้ผลลัพธ์ที่ไม่พึงประสงค์นักหากไปแสดงบนหน้าจอที่มีความละเอียดของหน้าจอหรือขนาดของตัวอักษรที่ต่างกันออกไป WPF จึงมีการนำ panel มาแก้ไขปัญหาในส่วนนี้ โดย panel ที่ใช้ในการจัดวาง Layout มีอยู่ 5 ชนิดที่นิยมใช้การการออกแบบดังนี้
- Grid Panel
- Stack Panel
- Dock Panel
- Wrap Panel
- Canvas Panel
Best Practices
1. หลีกเลี่ยงการกำหนดค่าตำแหน่ง : กรณีที่ต้องการกำหนดตำแหน่งการวาง controls ใน panel ควรใช้ Alignment properties ร่วมกับ Margin เพื่อกำหนดค่าตำแหน่งใน panel แทนการกำหนดเป็นค่าคงที่ในตำแหน่งนั้นๆ
2. หลีกเลี่ยงการกำหนดขนาด : ควรกำหนด Width และ Height ของ element ให้เป็น Auto
3. ไม่ใช้ canvas panel ในการจัดวาง layout ของ element ใช้ canvas panel กรณีที่เป็น vector graphic เท่านั้น
4. ควรใช้ Stack panel เพื่อจัดเรียงปุ่ม
5. ใช้ grid panel ในกับ form ที่เป็น form สำหรับการรับข้อมูลเข้า โดย control ที่อยู่ใน grid panel ที่เป็น label ควรกำหนดขนาดเป็น Auto และ controlที่เป็น Textbox ควรกำหนดขนาดเป็น *
6. ใช้ itemControl ใน DataTemplate ของ grid panel เพื่อใช้ในการจัดวาง control ที่แสดงข้อมูลที่มีการเปลี่ยนแปลงของ keyตลอดเวลา และควรใช้ SharedSize เพื่อให้ label มีขนาดความกว้างเท่ากัน
Vertical and Horizontal Alignment

ใช้ VerticalAlignment และ HorizontalAlignmant properties เพื่อกำหนด Control ให้อยู่ในส่วนเดียวกันหรือหลายๆส่วนใน panel นั้นๆ โดยมีตัวอย่างดังภาพ

Margin and Padding

Margin และ Padding properties จะจองพื้นที่ช่องว่างรอบๆของcontrol ดังนี้
• The Margin คือ ส่วนของช่องว่างรอบๆของ control.
• The Padding คือส่วนของช่องว่างที่อยู่ภายใน control.
• The Padding ของ control ที่อยู่ภายนอก คือ Margin ของ control ที่อยู่ภายใน Control นั้นๆ

Height and Width

ไม่แนะนำให้กำหนดค่า Height และ Width เนื่องจากจะทำให้ยุ่งยากในการจัดการ การจัดการที่ดีควรจะกำหนดค่า MinHeight, MaxHeight, MinWidth และ MaxWidth ตามต้องการ หรือหากต้องการกำหนด width หรือ height เป็น Auto ขนาดของ controls ก็จะมีขนาดเท่ากับของข้อมูลโดยอัตโนมัติ

Overflow Handling

Clipping

ในกรณีที่ elementsซ้อนทับ border ของ panel เราจะกำหนดการแสดงการจัดวางของ control โดยใช้ ClipToBounds property โดยมีกำหนดค่าเป็น true หรือ false ดังรูป

Scrolling

กรณีที่เนื้อหาของข้อมูลมีจำนวนมากเกินกว่าขนาดของ panel ที่จะสามารถแสดงให้เห็นได้ทั้งหมดใน panel นั้นๆ คุณสามารถนำความสามารถของ ScrollViewer มาใช้แก้ปัญหาตรงจุดนี้ได้ โดยประกอบด้วยสองส่วนคือ vertical ScrollbarVisibility และ horizontal ScrollbarVisibility properties ดังตัวอย่าง
```
<ScrollViewer>    
<StackPanel>         
<Button Content="First Item" />         
<Button Content="Second Item" />        
<Button Content="Third Item" />     
</StackPanel> 
</ScrollViewer>
```
แหล่งอ้างอิง
https://www.wpftutorial.net/LayoutProperties.html
June 11, 2019
การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 5 : การตรวจสอบงานที่ได้รับมอบหมาย และการบันทึกผลการทำงาน)

sirirat.g

June 9, 2019

จากบทความ การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 4 : การวางแผนงาน) เป็นบทบาทของ Project manager ในการมอบหมายงานให้กับสมาชิกในทีม สำหรับในบทความนี้ จะกล่าวถึงในมุมมองของสมาชิกทีมที่ได้รับมอบหมายงานบ้าง ว่าจะสามารถเข้าไปดูงานที่ได้รับมอบหมายได้อย่างไรได้บ้าง เรามาดูกันเลยนะค่ะ…

สำหรับสมาชิกในทีม สามารถตรวจสอบงานที่ได้รับมอบหมาย ได้ในมุมมองดังนี้

Step 1 จาก TFS เลือกโครงการที่ต้องการตรวจสอบงานที่ได้รับอบหมาย ตามรูปที่ 1

รูปที่ 1

Step 2 เลือก Work จากนั้นเลือก Blacklogs และเลือก Sprint ที่ต้องการ ดังรูปที่ 2

รูปที่ 2

Step 3 ทำการเลือกชื่อของตนเอง ดังรูปที่ 3

รูปที่ 3

Step 4 จะแสดง Tasks ที่ได้รับมอบหมาย ตามรูปที่ 4 นะค่ะ

รูปที่ 4

จากขั้นตอนข้างต้น ทำให้เจ้าตัวทราบว่า มี Tasks อะไรบ้างที่ได้รับมอบหมาย แต่ละ Task มีสถานะเป็นอย่างไรแล้วบ้าง ซึ่งได้แก่ ยังไม่ดำเนินการ กำลังดำเนินการ หรือดำเนินการเสร็จไปเรียบร้อยแล้วนั่นเอง…ยังมีอีกมุมมองนึงที่ทีมงานสามารถตรวจสอบปริมาณงานว่า งานที่ได้รับมอบหมาย มีปริมาณคงเหลือมากน้อยเพียงใด โดยตรวจดูจากเวลาที่เหลือ ดังนี้ค่ะ ^__^

เลือก Backlogs สามารถดูเวลางานที่เหลือจาก Work by Assigned to และดูจากชื่อของตนเอง ว่ามีจำนวนชั่วโมงเวลาที่เหลือเท่าไหร่ หากมีปริมาณชั่วโมงเยอะ แสดงว่าปริมาณงานยังเยอะอยู่นะค่ะ… ขั้นตอนสามารถดูได้จากรูปที่ 5 นะค่ะ

รูปที่ 5

จากบทความข้างต้น เป็นการตรวจสอบปริมาณงานของทีมงานแต่ละคนนะค่ะว่าได้รับมอบหมายงานอะไรบ้าง มีปริมาณเหลือมากน้อยเพียงใด ขั้นตอนต่อไปปจะเล่าถึงขั้นตอนของการบันทึกผลการปฏิบัติงานให้ฟังต่อนะค่ะ

สำหรับการบันทึกผลการปฏิบัติงาน สามารถทำได้ดังนี้ค่ะ
Spet 1 เลือก Work จากนั้นเลือก Blacklogs และเลือก Sprint ที่ต้องการ ดังรูปที่ 6

รูปที่ 6

Step 2 เลือก Task ที่ต้องการบันทึกผล จะแสดงดังรูปที่ 7

รูปที่ 7

จากรูปที่ 7 จะต้อง Update ข้อมูลต่าง ๆ ดังนี้
1. State โดยประกอบด้วย Inprogress คือ กำลังดำเนินการ และ Todo หมายถึง ดำเนินการเสร็จเรียบร้อยแล้ว
2. Remaining work ให้ระบุจำนวนชั่วโมงที่เหลือ
3. History ให้ระบุข้อมูลต่าง ๆ ที่ดำเนินการ โดยสามารถแนบไฟล์ต่าง ๆ เข้าไปได้
เมื่อใส่รายละเอียดเรียบร้อยแล้ว ก็ทำการกดปุ่ม Save เพื่อบันทึกผลการปฏิบัติงาน

ขั้นตอนง่าย ๆ ไม่ยากใช่ไม๊ค่ะ เห็นไม๊ค่ะว่า TFS สามารถช่วยเรื่องการวางแผน การมอบหมาย และการบันทึกผลการทำงานได้ ในครั้งต่อไป จะมากล่าวมุมมองการติดตามการดำเนินงาน หรือติดตามผลการปฏิบัติงาน ว่าเป็นไปตามแผนที่วางไว้หรือไม่…อย่าลืมติดตามกันต่อนะค่ะ… ขอบคุณค่ะ

June 9, 2019
ทำความรู้จัก Xamarin.Forms + วิธีติดตั้งบน Windows

suriporn.a

June 7, 2019
การพัฒนา Mobile Application ปัจจุบันมีหลากหลาย solution ให้เลือกใช้ ไม่ว่าจะเป็นการพัฒนาแบบ native แยกตามแต่ละแพลตฟอร์ม , พัฒนาแบบ hybrid และแบบ cross platform นอกจากจะมีรูปแบบการพัฒนาให้พิจารณาเลือกแล้ว ยังมี Mobile framework ที่หลากหลายที่เรานำมาใช้ในการพัฒนา app ไม่ว่าจะเป็น React Native, Ionic, Fluter,Android Studio, Xcode, Xamarin เป็นต้น โดยบทความนี้ผู้เขียนจะมาแนะนำ Xamarin.Forms ซึ่งเป็น framework หนึ่งที่นิยมใช้ในการพัฒนา mobile app กัน พร้อมทั้งแนะนำวิธีติดตั้งเครื่องมือเพื่อใช้งาน

Xamarin คืออะไร?

Xamarin คือ framework หนึ่งในการพัฒนา mobile app แบบ cross platform ของค่าย Microsoft ที่สามารถเขียน code ด้วยภาษา C# แล้วคอมไพล์เป็น native app ให้สามารถรันบน ios , android และ windows platforms ได้ ซึ่งปัจจุบันตัว Xamarin เองก็มีรูปแบบการพัฒนาออกเป็น 2 แนวทาง คือ Xamarin Native และ Xamarin.Forms

แล้ว Xamarin.Forms กับ Xamarin Native ต่างกันยังไง?

Xamarin Native หรือที่ฝรั่งเรียก Traditional Xamarin Approach เนี่ยเป็นรูปแบบที่ทาง Xamarin ได้พัฒนาออกมาใช้เป็นรูปแบบแรก (ปัจจุบันก็ยังมีให้ใช้อยู่) ซึ่งเป็น shared code platform concept โดยเราสามารถใช้ code ฝั่ง business logic ร่วมกันได้ แต่ code ฝั่ง UI เราก็ต้องเขียน code แยกตาม sdk ของแต่ละ platforms ซึ่งผู้พัฒนาต้องรู้จักการใช้ control ต่างๆ การวาง layout ของแต่ละ platform มาพอสมควร

Xamarin.Forms เป็น concept และ tools รูปแบบใหม่ของ Xamarin ที่สามารถแชร์ code ระหว่าง platform ได้ 100% คือสามารถเขียน code เพียงครั้งเดียวทั้งฝั่ง business logic และ UI แล้วคอมไพล์เป็น native app ให้รันได้ทุก platforms (ios, android และ windows) ในส่วนของ UI จะเขียนด้วย XAML เช่นเดียวกับ WPF แต่ต่างกันที่การจัด layout และ control UI ที่มีแตกต่างกัน ซึ่งหากนักพัฒนาคนไหนเคยเขียน WPF มาแล้วก็สามารถเขียน mobile app ด้วย Xamarin.Forms ได้ง่ายขึ้น

เปรียบเทียบ Xamarin Native (Traditional) กับ Xamarin.Forms
ที่มารูป :
https://xamarinhelp.com/xamarin-forms-making-traditional-xamarin-obsolete/

Xamarin.Forms เหมาะกับ?
1. Developer ที่คุ้นเคยกับ .NET framework เนื่องจากจะคุ้นเคยกับ Tools ที่ใช้งานและทำให้เข้าใจ concept และสามารถพัฒนา app ได้รวดเร็วยิ่งขึ้น
2. พัฒนา Data Entry app เนื่องจาก Xamarin.Forms มี Simple UI control ให้พร้อมใช้งาน
3. ต้องการ app ที่คุ้มค่าแต่ใช้ budget น้อย เนื่องจาก Xamarin.Form เขียน code ครั้งเดียวสามารถ run ได้ทั้ง 3 platform ได้แก่ Android, IOS และ Windows ทำให้ประหยัดงบในการ implement แต่ละ platform
Xamarin.Forms ไม่เหมาะกับ?
1. ผู้ที่ไม่คุ้นเคยกับ .NET Framework และภาษา C# เนื่องจากจะต้องศึกษาทำความเข้าใจใหม่มากพอสมควร ซึ่งหากถนัด FrontEnd web หรือ java script อาจพิจารณาเลือกใช้ framework อื่น เช่น React Native, Ionic หรือ Fluter จะพัฒนา app เสร็จได้รวดเร็วกว่า
2. ไม่เหมาะกับ app ที่มี UI ซับซ้อนหรือ specific UI เฉพาะแต่ละ platform
วิธีติดตั้ง Xamarin.Forms บน Windows

System Requirement
1. Windows 10 ขึ้นไป
2. Microsoft Visual Studio โดยเวอร์ชันที่รองรับการใช้งาน Xamarin.Forms ต้องเป็น Microsoft Visual Studio 2017 version 15.8 ขึ้นไป
วิธีติดตั้ง
1. Download Visual Studio และ double click ไฟล์เพื่อ install แต่หากใครมี Visual Studio อยู่แล้ว ให้เปิด Visual Studio Installer ขึ้นมา แล้วเลือก Modify ดังรูป
2. ที่โมดูล Mobile & Gaming เลือก Mobile development with .NET ดังรูป
3. สังเกตที่ Installation Detail ฝั่งด้านขวา จะแสดงรายละเอียด package ที่ติดตั้ง ให้สังเกตุที่ Optional จะ default package มาให้ ซึ่งจะเห็นว่ากิน space มากพอสมควร ซึ่งตัวที่กินพื้นที่เยอะสุดคือตัว Google Android Emulator
  
  โดยหากใครจะประหยัดพื้นที่ แล้วเสียบสาย run ด้วย android device เลย ก็ให้ติ๊กถูกที่หน้า Google Android Emulator ออกได้เลย ซึ่งทำให้ space ลดลงไปเกือบครึ่งนึงเลยค่ะ
4. จากนั้นกดปุ่ม Install หรือ Modify (กรณีลง VS ไว้แล้ว)
5. จากนั้นก็ Take a coffee รอจนเสร็จค่า ^^
เป็นอันเสร็จสิ้นการติดตั้งเครื่องมือเตรียมพร้อมสำหรับการสร้าง Mobile application ด้วย Xamarin.Forms ซึ่งจะเห็นว่าขั้นตอนการติดตั้งง่ายไม่ซับซ้อนเลยถ้าเทียบกับ mobile framework อื่นๆ นะคะ บทความหน้าจะมาแนะนำเริ่มต้นการสร้าง app ด้วย Xamarin.Forms กันค่า
June 7, 2019