סדר הטאבים (Tab Order)

אם עבדתם עם מחשבים מספיק כדי לרצות ללמוד לתכנת, אתם בטח יודעים גם שניתן להשתמש במקש הטאב על לוח המקשים כדי לנווט דרך חלון או תיבת דו שיח (דיאלוג). כך מתאפשר לכם להשאיר את הידיים על לוח המקשים כאשר ממלאים טופס או משהו דומה, במקום שתצטרכו להשתמש בעכבר כדי לבחור את השדה או הפקד הבא.

סביבת WPF תומכת בהתנהגות הזו ישירות מהקופסה, ואפילו יותר טוב: היא תקבע אוטומטית את הסדר שישתמשו בו במעבר משדה אחד לשני, אז בדרך כלל לא תצטרכו לדאוג לזה בכלל. עם זאת, לפעמים העיצוב של החלון או הדיאלוג גורם לכך ש WPF תשתמש בסדר טאבים שלא תסכימו איתו, מסיבות אלה ואחרות. כמו כן, ייתכן שתחליטו שפקדים מסויימים לא צריכים להיות חלק מסדר הטאבים. הרשו לי להראות זאת עם דוגמה:

תיבת דו השיח כוללת Grid שמפוצל באמצעו, עם StackPanel בכל צד, המכיל תוויות ותיבות טקסט. ברירת המחדל של סדר הטאבים תתנהג כך שהיא תתחיל עם הפקד הראשון של החלון ואחר כך תעבור עם טאבים דרך כל אחד מהפקדים הילדים שנמצאים בתוכו, לפני המעבר לפקד הבא. מאחר ותיבת דו השיח כוללת פקדים מסוג StackPanel שמכווניפ אנכית, נתחיל בשדה השם הפרטי First name וממנו נעבור לשדה הרחוב Street nameואז לשדה העיר City, לפני שנעבור לפקד StackPanel השני, המכיל את השדות לשם המשפחה Last name והמיקוד Zip code. כשעוברים עם טאב החוצה מפקד ה- StackPanel השני, סוף סוף מגיעים לשני הכפתורים.

אבל עבור תיבת דו השיח הזו, זו לא ההתנהגות שנרצה. אנחנו נרצה שהטאב יעבור משדה השם הפרטי First nameאל שדה שם המשפחה Last name (כלומר לעבור אופקית במקום אנכית), ומעבר לזה, לא נרצה להכניס את שדה העיר City כשעוברים עם טאבים דרך הטופס, כי השדה הזה יתמלא אוטומטית בהתבסס על המיקוד Zip code בתיבת דו השיח הפיקטיבית הזו ולכן הוא שדה מסוג קריאה בלבד. כדי להשיג את כל זה, נשתמש בשתי תכונות: TabIndex ו- IsTabStop. אינדקס הטאב TabIndex משמש כדי להגדיר את הסדר, בעוד שהתכונה "האם נקודת עצירה לטאב" IsTabStop תאלץ את סביבת WPF לדלג על הפקד כאשר עוברים עם טאבים על החלון. הנה הקוד ליצירת תיבת דו השיח הזו:

<Window x:Class="WpfTutorialSamples.Control_concepts.TabOrderSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Control_concepts"
    mc:Ignorable="d"
    Title="TabOrderSample" Height="250" Width="400">
    <Grid Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <StackPanel>
        <Label>First name:</Label>
        <TextBox TabIndex="0" />
        <Label>Street name:</Label>
        <TextBox TabIndex="2" />
        <Label>City:</Label>
        <TextBox TabIndex="5" IsReadOnly="True" IsTabStop="False" Background="Gainsboro" />
    </StackPanel>
    <StackPanel Grid.Column="2">
        <Label>Last name:</Label>
        <TextBox TabIndex="1" />
        <Label>Zip Code:</Label>
        <TextBox TabIndex="4" />
    </StackPanel>
    <Button Grid.Row="1" HorizontalAlignment="Right" Width="80">Add</Button>
    <Button Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" Width="80">Cancel</Button>
    </Grid>
</Window>

שימו לב שפשוט נתתי לכל פקד רלוונטי מספר בתכונה TabIndex, ואז השתמשתי ב- IsTabStop בשביל תיבת הטקסט של העיר - זה עד כדי כך פשוט לשלוט על סדר הטאבים בתיבת דו שיח!

סיכום

שליטה על סדר הטאבים של תיבת דו שיח היא חשובה מאד, אבל למזלנו, סביבת WPF עושה עבודה טובה מאד בלהגדיר אוטומטית סדר טאבים תקין בשבילך. עם זאת, במקרים מסויימים, יהיה הגיוני לקחת פיקוד, בעזרת התכונות TabIndex ו- IsTabStop, כפי שאפשר לראות בדוגמה הנ"ל.