ตอนที่แล้วเราหยุดกันที่การสร้าง BarItem ขึ้นมาแล้วทำการเอา TableLayoutPanel มาเป็นตัวจัดระเบียบ
ซึ่งเวลาใช้งานจริง ๆ อาจจะลำบาก เพราะบางทีเราอาจจะไม่รู้ว่า จำนวน Bar ที่จะแสดงผลมีกี่อันกันแน่

เพราะงั๊นเราจะทำการเขียน Code เพื่อให้เราไปงานง่าย ๆ เลยดังนี้ครับ

จากนั้น ลาก TableLayoutPanel มาวางไว้ 1 ตัว
แล้วก็ Set Property ColumnCount และ RowCount ให้เป็น 1 รอไว้ก่อน
เดี๋ยวเราจะสร้าง Property ไว้รอ แล้วค่อยมา Add BarItem ตามจำนวนใน code เอาครับ
ที่ขาดไม่ได้คือต้อง Set Dock ให้เป็น Fill ด้วย นั่นคือให้ TableLayoutPanel ขยายตัวให้เต็มเนื้อที่ทั้งหมดเลย
อ่อ ๆ ๆ....
ในที่นี้ผมทำการเปลี่ยน BackColor ของ BarChart หรือตัว UserControl ให้เป็นสีขาวด้วยครับ

        Return Me.pBar.BackColor
    End Get
    Set(ByVal value As Color)
        Me.pBar.BackColor = value
    End Set
End Property
............................................................................................................................................
เราไม่จำเป็นต้องประกาศตัวแปรเพิ่มเพื่อเก็บสีนะครับ เพราะเราจะใช้สีของ Panel เลย
เสร็จแล้วกลับมาที่ BarChart เหมือนเดิมครับ
ที่นี่เราจะสร้างตัวแปรต่าง ๆ ที่จำเป็นดังนี้
............................................................................................................................................
    Private maximum As Integer
    Private bItem As List(Of BarItem)
    Private itemBGColor As Color
............................................................................................................................................
โดยที่

    maximum  ใช้เก็บค่าสูงสุดของทุก ๆ BarItem ซึ่งมันจะต้องเหมือนกัน
  จริง ๆ เราอาจจะอ้างที่ BarItem ใด ๆ ซักอันก็ได้
  แต่กลัวเวลากลับมาอ่าน Code มันจะดูยากครับ
    bItem   อันนี้จะเป็นตัวแปรแบบ List of โดยสร้างให้เป็น List of BarItem
  ใช้เพื่ออ้างอิง BarItem แต่ละตัวแบบง่าย ๆ โดยใช้ Index ครับ
    itemBGColor  อันนี้ที่เพิ่งไปเติมมา คือใช้เป็นสีของ Background ของ BarItem แต่ละตัว
  ลักษณะการอ้างอิงเป็นแนว ๆ เดียวกับ maximum ครับ

จากนั้น
เราจะเริ่ม code แรกกันที่ New ครับ
............................................................................................................................................
Public Sub New()
    Dim _item As New BarItem()

    InitializeComponent()

    Me.maximum = 100
    Me.itemBGColor = Color.Aqua

    Me.bItem = New List(Of BarItem)
    _item.Maximum = Me.maximum
    _item.CurrentValue = 10
    _item.Dock = DockStyle.Fill
    _item.BGColor = Me.itemBGColor
    Me.bItem.Add(_item)

    Me.tbItem.ColumnCount = 1
    Me.tbItem.Controls.Add(_item, 0, 0)

    Me.tbItem.ColumnStyles.Clear()
    Me.tbItem.ColumnStyles.Add(New ColumnStyle(SizeType.Percent, 100))

End Sub
............................................................................................................................................
ใน Sub New นี้ ผมได้มีการกำหนดค่าเริ่มต้นต่าง ๆ ไปแล้วเรียบร้อย รวมถึงสร้าง BarItem ไว้รอ 1 อันด้วย
โดยที่สังเกตุจาก code จะมีการ Add _item เข้าถึง 2 จุดคือ
............................................................................................................................................
    Me.bItem.Add(_item)
    Me.tbItem.Controls.Add(_item, 0, 0)
............................................................................................................................................
เกิดข้อสงสัยว่า Add เข้า TableLayoutPanel แค่อย่างเดียวไม่ได้เหรอ แล้วเวลาอ้างถึง ไปวิ่งอ้างในนั้นเอา
ตอบว่า : ก็ได้ครับ แต่มันจะอ่านยาก และการวิ่งลูปไปใน TableLayoutPanel ที่เก็บอะไรก็ได้ในนั้น
มันจะต้องมีการ Cast Object มาเป็น BarItem อีกทีเ เพราะเวลา TableLayoutPanel มัน return ออกมามันจะเป็น Object
แล้วก็เหมือนเดิมคือ

กลับมาอ่านยาก

เลยแก้ปัญหาด้วยการเพิ่มตัวแปรแบบ List of BarItem แทน จะได้ใช้กันง่าย ๆ ครับ
ส่วนอีกส่วนนึง
............................................................................................................................................
    Me.tbItem.ColumnStyles.Clear()
    Me.tbItem.ColumnStyles.Add(New ColumnStyle(SizeType.Percent, 100))
............................................................................................................................................
อันนี้จะเป็นการ Set ในส่วนของขนาดของแต่ละ Column ที่ในบทความแรกที่เราใช้การ Click เอาครับ
ต่อไปจะเป็นส่วนของ Property ต่าง ๆ ครับ
............................................................................................................................................
Public Property MaximunValue() As Integer
    Get
        Return Me.maximum
    End Get
    Set(ByVal value As Integer)
        If Not (value = Me.maximum) Then
            Me.maximum = value
            For Each b As BarItem In Me.bItem
                b.Maximum = value                   
            Next
        End If
    End Set
End Property

Public Property BarItemColor() As Color
    Get
        Return Me.itemBGColor
    End Get
    Set(ByVal value As Color)
        If Not (Me.itemBGColor = value) Then
            Me.itemBGColor = value
            For Each bItem As BarItem In Me.bItem
                bItem.BGColor = Me.BarItemColor
            Next
        End If
    End Set
End Property
............................................................................................................................................
Property ทั้ง 2 ตัวที่เห็นจะมีการวนลูปเพื่อไล่ Set ค่าที่กำหนดให้ BarItem แต่ละตัวครับ
โดยก่อนวนลูป ผมจะทำการตรวจสอบก่อนว่า ค่าเดิมกะค่าใหม่เท่ากันหรือเปล่า
ถ้าเท่าจะได้ไม่เสียเวลาไปวนลูป เพราะวนไปมันก็เหมือนเดิม

Property ยังไม่ครบนะครับ แต่ขอผ่านไปก่อน
มาดูในส่วนของการอ้างถึง BarItem แต่ละตัวจากข้างนอกก่อนครับ
............................................................................................................................................
Public Function GetBarItem(ByVal index As Integer) As BarItem
    If (index >= 0) AndAlso (index < Me.bItem.Count) Then
        Return Me.bItem(index)
    Else
        Return Nothing
    End If
End Function
............................................................................................................................................
อันนี้จะเป็น function ที่ใช้ในการอ้างถึง BarItem โดยใช้ index เป็นตัวชี้ครับ
อย่าลืมนะครับ Index เริ่มจาก 0

จากนั้น....
มาดู Property อีกตัวที่ข้ามไว้
ซึ่งเป็นหัวใจของ BarChart เลยครับ
............................................................................................................................................
Public Property BarItemCount() As Integer
    Get
        Return Me.tbItem.ColumnCount
    End Get
 '...................................................................................................
    Set(ByVal value As Integer)
        Dim iBeforeCount As Integer = Me.tbItem.ColumnCount
        '..............................
        If value = iBeforeCount Then
            Return
        End If
        '..............................
        Me.tbItem.Visible = False
        '..............................
        Me.tbItem.ColumnStyles.Clear()
        '..............................
        If value > iBeforeCount Then
            Me.tbItem.ColumnCount = value
            iBeforeCount += 1
            For i As Integer = iBeforeCount To value
                Dim _item As New BarItem()
                _item.Maximum = Me.maximum
                _item.CurrentValue = 10
                _item.Dock = DockStyle.Fill
                _item.BGColor = Me.itemBGColor
    
                Me.bItem.Add(_item) 
                Me.tbItem.Controls.Add(_item, i - 1, 0)
            Next
        Else
            iBeforeCount -= 1
            For i As Integer = iBeforeCount To value Step -1
                Me.bItem.RemoveAt(i)
                Me.tbItem.Controls.RemoveAt(i)
            Next
            Me.tbItem.ColumnCount = value
        End If
        '...................................................

        Dim sAVG As Single = 100 / Me.tbItem.ColumnCount

        For i As Integer = 1 To Me.tbItem.ColumnCount
            Me.tbItem.ColumnStyles.Add(New ColumnStyle(SizeType.Percent, sAVG))
        Next
        Me.tbItem.Visible = True
    End Set
 '...................................................................................................
End Property
............................................................................................................................................
ในส่วนนี้ค่อนข้างวุ่นวายพอสมควร
เพราะจะต้องมีการเพิ่มหรือลดจำนวน Column ให้ตรงตามค่าที่ส่งมา
นอกจากนั้นยังต้องสร้างหรือลด BarItem พร้อมทั้งกำหนดค่าเริ่มต้นให้อีกด้วย

มีจุดสังเกตุที่ code นี้ครับ
............................................................................................................................................
 Me.tbItem.Visible = false
 ...
 ....
 ...
 Me.tbItem.Visible = true
............................................................................................................................................
ถามว่าทำไปทำไม
ตรงนี้จะช่วยลดภาระการ Render Control ครับ เพราะถ้าแสดงผลตลอด จะทำให้ทำงานช้า
เพราะต้องวาด Control ทุกครั้งที่มีการเปลี่ยนแปลง
ดังนั้นผมจึง ซ่อน มันไว้ซะก่อน ให้ทำให้เสร็จ แล้วค่อยแสดงมาทีเดียว
ยังไงตรงนี้ถ้าไม่เคลียร์ว่า.... ผมเอาอะไรมาให้อ่าน

ก็ลองเอา 2 บรรทัดนี้ออกครับ
แล้วลอง Run Program ดูความแตกต่างครับ
อ่อ..แต่รอให้เราทำอะไรให้เสร็จเรียบร้อยก่อนนะครับ ค่อยลอง

เอาล่ะ ทีนี้
ReBuild Project 1 ครั้งครับ
เพื่อให้ Control เรา Update ก่อนครับ

จัด Form ให้ได้ตามรูปนะครับ
โดยจะมี BarChart 1 ตัวอยู่กลาง Form
มี NumericUpDown 1 ตัวใช้เพื่อกำหนดจำนวนของ BatItem ครับ โดยที่จะมี 1 Button ไว้กดเพื่อสั่งการ
ข้างล่าง ๆ จะมีอีก 1 Button ผมใช้เพื่อกำหนดค่าให้ BarItem แต่ละตัว โดยการสุ่มครับ
แต่ละตัวผมตั้งชื่อแบบนี้ครับ

NumericUpDown  = nBar
BarChart   = BarChart1
Button 1   = cmdSetBar
Button 2   = cmdRandom

มาดูการทำงานกัน
............................................................................................................................................
Private Sub cmdSetBar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdSetBar.Click
    ' Set จำนวน Column
    BarChart1.BarItemCount = nBar.Value
End Sub
 '............................................................................................................................
Private Sub cmdRandom_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdRandom.Click
    ' ประกาศตัวแปรแบบ Random ไว้สุ่มค่า
    Dim rnd As New Random(Now.Millisecond)

    For i As Integer = 1 To BarChart1.BarItemCount
        Dim bItem As BarItem = BarChart1.GetBarItem(i - 1)

        bItem.CurrentValue = rnd.Next(1, 100)       ' สุ่มค่าตั้งแต่ 1 - 100
        bItem.BarColor = Color.FromArgb(rnd.Next(0, 255), rnd.Next(0, 255), rnd.Next(0, 255))  ' สุ่มค่าสี RGB
        bItem.Caption = i.ToString()        ' อันนี้ Set Caption ของ BarItem แต่ละตัว
    Next
 
End Sub
............................................................................................................................................

วันนี้เยอะและ
บางคนที่อ่านคงนึกในใจ

ยังไม่จบอีกเร๊อะ.....
จริง ๆ มันจบแล้วก็ได้
แต่มันยังไม่สุดครับ
เพราะผมจะทำไตรภาค แบบ The Metrix
สำหรับตอนนี้จบภาค Reload ก่อนครับ
เดี๋ยวคราวหน้าเจอ The Metrix Revolution เป็นตอนจบครับ