การจัดการการป้อนข้อมูลเชิงตัวเลขในแอพพลิเคชัน WPF อย่างสง่างาม

เมื่อพัฒนาแอพพลิเคชันด้วย Windows Presentation Foundation (WPF สิ่งที่ท้าทายทั่วไปที่นักพัฒนาพบคือวิธีการจัดการการป้อนค่าตัวเลข ปัญหานี้มีความโดดเด่นโดยเฉพาะในกรณีที่ไม่ต้องการพึ่งพาการควบคุมภายนอกหรือจากบุคคลที่สามสำหรับฟีเจอร์ NumericUpDown

ในโพสต์นี้ เราจะสำรวจวิธีการง่ายๆ ในการจัดการการป้อนข้อมูลเชิงตัวเลขโดยใช้การควบคุม TextBox มาตรฐานโดยมั่นใจว่าสามารถใช้ได้กับผู้ใช้

ปัญหา: การจัดการการป้อนข้อมูลเชิงตัวเลขใน WPF

โดยไม่มีความสะดวกของการควบคุม NumericUpDown เราจะมั่นใจได้อย่างไรว่าผู้ใช้ป้อนเพียงค่าตัวเลขใน TextBox นักพัฒนามักเลี่ยงการจัดการเหตุการณ์คีย์ด้วยตนเอง ซึ่งมักส่งผลให้เกิดโค้ดที่อ่านยากและมีความยุ่งเหยิง หลายคนพบว่าตนเองต้องสร้าง event handler เพื่อดักจับการป้อนข้อมูลจากแป้นพิมพ์ในลักษณะที่ทำให้มั่นใจว่าเฉพาะตัวเลขเท่านั้นที่ถูกประมวลผล

นี่คือโค้ดที่นักพัฒนามักใช้เพื่อยืนยันการป้อนข้อมูลเชิงตัวเลข:

private void NumericEditPreviewKeyDown(object sender, KeyEventArgs e)
{
    bool isNumPadNumeric = (e.Key >= Key.NumPad0 && e.Key <= Key.NumPad9) || e.Key == Key.Decimal;
    bool isNumeric = (e.Key >= Key.D0 && e.Key <= Key.D9) || e.Key == Key.OemPeriod;

    if ((isNumeric || isNumPadNumeric) && Keyboard.Modifiers != ModifierKeys.None)
    {
        e.Handled = true;
        return;
    }

    bool isControl = ((Keyboard.Modifiers != ModifierKeys.None && Keyboard.Modifiers != ModifierKeys.Shift)
        || e.Key == Key.Back || e.Key == Key.Delete || e.Key == Key.Insert
        || e.Key == Key.Down || e.Key == Key.Left || e.Key == Key.Right || e.Key == Key.Up
        || e.Key == Key.Tab
        || e.Key == Key.PageDown || e.Key == Key.PageUp
        || e.Key == Key.Enter || e.Key == Key.Return || e.Key == Key.Escape
        || e.Key == Key.Home || e.Key == Key.End);

    e.Handled = !isControl && !isNumeric && !isNumPadNumeric;
}

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

วิธีแก้ปัญหา: การยืนยันค่าตัวเลขที่ง่ายขึ้น

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

ขั้นตอนที่ 1: Override Method OnPreviewTextInput

คุณสามารถตรวจสอบได้อย่างง่ายดายว่าข้อมูลที่ป้อนประกอบด้วยตัวอักขระเชิงตัวเลขที่ถูกต้องโดยการ Override Method OnPreviewTextInput ของ TextBox ของคุณ

protected override void OnPreviewTextInput(System.Windows.Input.TextCompositionEventArgs e)
{
    e.Handled = !AreAllValidNumericChars(e.Text);
    base.OnPreviewTextInput(e);
}

ขั้นตอนที่ 2: สร้าง Helper Method สำหรับการตรวจสอบตัวอักษร

นี่คือ Helper Method ง่ายๆ ที่ตรวจสอบว่าตัวอักษรทั้งหมดในสตริงข้อมูลที่ป้อนเป็นตัวเลข:

private bool AreAllValidNumericChars(string str)
{
    foreach(char c in str)
    {
        if(!Char.IsNumber(c)) return false; // ส่งคืน false หากพบตัวอักษรที่ไม่เป็นตัวเลข
    }

    return true; // ส่งคืน true หากตัวอักษรทั้งหมดเป็นตัวเลข
}

สรุป

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

การใช้วิธีการที่สะอาดและมีประสิทธิภาพช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่ฟังก์ชันหลักของแอพพลิเคชันแทนที่จะต้องยุ่งเกี่ยวกับกลไกการตรวจสอบข้อมูลที่ซับซ้อน

นี่ไม่ใช่เวลาที่คุณจะทำให้ตรรกะการป้อนข้อมูลเชิงตัวเลขใน WPF ของคุณเรียบง่ายขึ้นเหรอ? ลองใช้วิธีนี้ดูและสนุกกับฐานโค้ดที่สะอาดขึ้นและประสบการณ์ผู้ใช้ที่ดีกว่า!