ผมเชื่อว่า ทุกคนที่เขียนโปรแกรมลง PocketPC ต้องมีสักครั้งหนึ่ง ที่จะต้องเกิดอยากได้ ComboBox ที่พิมพ์ได้ขึ้นมา พอดีวันนี้นาย DeltaFlyer เขามาถามผมครับ ว่ามันมีหรือเปล่า ซึ่งปกติแล้ว ใน PocketPC มันจะพิมพ์ไม่ได้ใช่ไหมละครับ งั้นผมจะแนะนำวิธีจำลอง ComboBox แบบที่ว่านี้ให้ทดลองทำดูกัน ไม่ต้องเกริ่นอะไรกันให้เมื่อยมือละนะ มาเริ่มกันเลยดีกว่า

แรกเริ่มเลย ก้อต้องสร้าง UesrControl มาก่อนครับ จะใช้เป็นโปรเจค Class Library แยกไว้ เวลา Compile จะได้ไม่ต้อง Compile หลาย ๆ รอบก็ได้ ไม่ว่ากันครับ แล้วแต่ชอบ แต่ผมจะ Add มาตรง ๆ ใน Project เลยเนี่ยแหละ ง่ายดี :D ผมตั้งชื่อตรงเป๊งว่า "TypeableComboBox" เลยนะครับ อิอิ

หลังจากได้ UserControl มา แล้ว ก้อลาก TextBox และ ComboBox มาวางเลยครับ คงนึกออกแล้วใช่ไหมล่ะ ว่าผมกำลังจะทำอะไร ก็เอา TextBox ซ้อนมันบน ComboBox นั่นแหละครับ ไม่มีอะไรมากเลย แต่ว่าเราจะต้อง หลอกตาให้ดูเหมือนว่ามันเป็น ComboBox ธรรมดานั่นเอง เพื่อไม่ให้คุณต้องมานั่งขยับไปขยับมา

หลังจากวางแล้ว ไม่ต้องพยายามจัดเรียงให้สวยงามอะไรมากนะครับ เพราะว่าต้องอย่าลืมว่า Control มันสามารถ Resize ได้ สู้เราไปเขียน Code ให้มันขยับตำแหน่งตอน Resize ดีกว่า ไม่ต้องเมื่อยมือขยับด้วย แล้วก้อได้ผลตรงตามพิกัดเป๊ะๆ เพราะฉะนั้น ก็ไปที่หน้าต่าง Property แล้วเข้าไปแก้ไข Event ชื่อ Resize ของตัว UserControl เลยครับ

จากการทดลองขยับเขยื้อนตำแหน่งดูแล้ว ดูเหมือนว่าตำแหน่งที่เหมาะสม คือ (Left, Top) ที่ (0,0) นั่นละครับ จะวางทับ ComboBox พอดี ส่วนความกว้างก้อให้น้อยกว่าตัว ComboBox อยู่ 14 pixel ครับ จะกำลังสวยเลย

private void SetupLayout() { this.TextBox.Top = 0; this.TextBox.Left = 0; this.TextBox.Width = this.ComboBox.Width - 14; } private void TypeableCombo_Resize(object sender, EventArgs e) { this.SetupLayout(); } private void TypeableCombo_ParentChanged(object sender, EventArgs e) { this.SetupLayout(); }

จากนั้นก้อต้องให้ ComboBox มันยืดตาม Control ด้วย ไปตั้งให้ Dock เป็น Fill เลยครับ แต่ว่า ComboBox มันจะไม่ยอมขยายส่วนสูงของมันตามเนี่ยสิ ดังนั้น เราก้อต้องเปลี่ยนใหม่ ให้ตัว Control มาสูงเท่ากับ ComboBox แทน ซึ่งก็เข้าทีดีครับ เพราะว่า ComboBox มันจะล็อคส่วนสูงของมันอยู่แล้ว

private void SetupLayout() { this.TextBox.Top = 0; this.TextBox.Left = 0; this.TextBox.Width = this.ComboBox.Width - 14; this.Height = this.ComboBox.Height; }

แต่ผมเห็นว่า เส้นด้านล่างมันหายไปจาก ComboBox ครับ เพราะว่า Textbox มันทับไป ผมเลยเอา Label ออกมาอันหนึ่ง เอาวางทับเพื่อใช้เป็นเส้นครับ

private void SetupLayout() { this.TextBox.Top = 0; this.TextBox.Left = 0; this.TextBox.Width = this.ComboBox.Width - 14; this.Height = this.ComboBox.Height; this.Line.BackColor = Color.Black; this.Line.Width = this.ComboBox.Width; this.Line.Top = this.Height - 1; this.Line.Left = 0; }

คราวนี้ก็แค่สั่ง Build ตัว Control ก็จะมาอยู่ใน Toolbox แล้วครับ นำมาวางลงใน Form ได้เลย เมื่อสั่งรันดู

คุณก็จะได้ ComboBox แบบพิมพ์ได้แล้วครับ! :D

เดี๋ยยวววววว มันไม่ง่ายไปเรอะ!

แหม มันยังไม่หมดครับ อยู่ดี ๆ แค่วาง TextBox ลงไปบน ComboBox แล้วมันจะเนรมิตให้กลายเป็น ComboBox แบบพิมพ์ได้ ก้อคงจะแปลก ลองมาดูสิครับ ว่าเราขาดอะไรไปบ้าง

เวลาเลือกข้อมูลใน ComboBox แล้ว ข้อความใน TextBox ไม่เปลี่ยน
แหม ทำได้ไม่ยากเลยครับ แค่ไปใส่ Code ไว้ในดหตุการณ์ SelectedIndexChanged ให้ตัว ComboBox เปลี่ยนข้อความใน TextBox ตามแค่นี้ก็เรียบร้อย

private void ComboBox_SelectedIndexChanged(object sender, EventArgs e) { this.TextBox.Text = ComboBox.SelectedItem.ToString(); this.TextBox.Focus(); this.TextBox.SelectAll(); }

เวลาพิมพ์ใน TextBox แล้วให้ ComboBox โดนเลือกตามไปด้วย
อันนี้ก็ไม่ยากเหมือนกันครับ แต่ใส่ Code ไว้ใน TextChanged ให้ Loop ดูใน Item ของ ComboBox แล้วก็เปลี่ยน SelectedIndex ตามเท่านั้นเอง

private void TextBox_TextChanged(object sender, EventArgs e) { for (int i = 0; i < this.ComboBox.Items.Count; i++) { if (this.ComboBox.Items[ i ].ToString() == this.TextBox.Text) { this.ComboBox.SelectedIndex = i; break; } } }

ว่าแต่ คุณรู้สึกอะไรแปลก ๆ ไหมครับ? ถ้าเราแก้ข้อมูลใน TextBox ตัว ComboBox ก้อจะ Select ตาม แล้วถ้า ComboBox โดน Select ตัว TextBox ก็จะเปลี่ยนตาม ถ้าตัว TextBox เปลี่ยน ตัว ComboBox ก้อจะ Select ตาม แล้วถ้า ComboBox โดน Select ตัว TextBox ก็จะเปลี่ยนตาม ถ้าตัว TextBox เปลี่ยน ตัว ComboBox ก้อจะ Select ตาม แล้วถ้า ComboBox โดน Select ตัว TextBox ก็จะเปลี่ยนตาม...เย๊ยยย!!!! พอแล้ว คือว่ามันจะ Loop กันไปไม่มีที่สิ้นสุดใช่ไหมละครับ ถ้าอย่างนั้นเราก็ต้องหาวิธีหยุดมันไว้ครับ

อาจจะไม่ต้องใช้วิธีผมก็ได้นะครับ ผมใช้การสร้าง Flag (ธง) ไว้ผืนหนึ่ง ให้ ComboBox เป็นคนถือไว้ (Flag ก็คือ Boolean ตัวนึงน่ะเอง) แล้วก้อถ้าเกิดว่า ComboBox โดนเปลี่ยน SelectedIndex ผมก็จะให้มันยกธงขึ้นบอกว่า "หยุด! ห้ามมาเปลี่ยน SelectedIndex เรานะ เราเป็นคนบอกให้นายเปลี่ยน Text ของนายอยู่" แล้วพอเปลี่ยนเสร็จแล้ว ก้อค่อยเอาธงลง พูดซะเป็นเรื่องเป็นราวเชียว จริงๆ ก็คือแค่นี้เองครับ

// Prevent loop from text changed and selected index changed private bool _DontModify = false; private void ComboBox_SelectedIndexChanged(object sender, EventArgs e) { if ( !_DontModify ) { this.TextBox.Text = ComboBox.SelectedItem.ToString(); this.TextBox.Focus(); this.TextBox.SelectAll(); } }

ส่วน TextBox ก้อต้องมีหน้าที่คอยดูสัญญาณจากธงด้วย ว่าจะไปบอกให้ ComboBox เปลี่ยน SelectedIndex ตามตัวเองหรือเปล่า แบบนี้...

private void TextBox_TextChanged(object sender, EventArgs e) { _DontModify = true; for ( int i = 0; i < this.ComboBox.Items.Count; i++ ) { if ( this.ComboBox.Items[ i ].ToString() == this.TextBox.Text ) { this.ComboBox.SelectedIndex = i; break; } } _DontModify = false; }

เท่านี้ก้อเรียบร้อยครับ ลองทดสอบดูได้เลย :)

อ้าว แล้วทีนี้จะ Add ข้อมูลเข้า ComboBox ยังไงล่ะ?

อันนี้ต้องใช้เทคนิคที่เรียกว่า Proxy Property ครับ ฟังดูหรู แต่จริงๆ แล้วก็คือการ Expose Property ที่ของคอนโทรลด้านใน ออกมาเป็น Property ของเราครับ สำหรับผม ผมต้องการแต่ Item ของ ComboBox เพื่อให้ Add ข้อมูลได้ ก็ทำเพียงแค่นี้ครับ

/// <summary> /// Proxy to combobox items /// </summary> public ComboBox.ObjectCollection Items { get { return this.ComboBox.Items; } }

สำหรับ Property อื่นๆ ที่ควรจะ Expose ออกมาก็เช่น: SelectedItem, SelectedValue เป็นต้น หรือถ้าหากว่าต้องการใช้ Data Binding ด้วย ก็อย่าลืม Expose ตัว DataSource, Display Member และ Value Member ด้วยครับ

ส่งท้าย

สำหรับคราวนี้เวลาหมดแล้วครับ ผมคงต้องขอตัวพอแค่นี้ก่อน สำหรับตอนต่อไป เราจะมาปั้น TypeableComboBox นี้ให้สมบูรณ์ยิ่งขึ้นครับ ด้วย AutoComplete ให้ตัว ComboBox เดาข้อความให้คุณ จากข้อมูลใน Combobox