Tab Order

Ha már egy ideje használsz számítógépet, és már programozni is meg akartál tanulni, akkor biztosan tudod, hogy a klaviatúra tabulátor (Tab) gombja használható az ablakok és dialógusok elemei közti navigációhoz. Ez lehetővé teszi, hogy kezeid a billentyűzeten maradjanak amikor egy űrlapot vagy hasonlót töltesz ki, ahelyett, hogy állandóan az egérhez kelljen folyamodni mező- vagy elemváltáshoz.

A WPF alaphelyzetben támogatja ezt, sőt, automatikusan sorba rendezi a mezőket, hogy neked általában ne kelljen ezzel foglalkozi. Időnként azonban az ablak/dialógus kialakítás azt eredményezi, hogy ez az automatikus elrendezés nem az amire szükséged van. Az is lehetséges, hogy úgy döntesz, bizonyos elemek ne szerepeljenek a tabulációs sorrendben. Íme egy példa:

A dialógus egy, a közepén kettéválasztott Grid-et tartalmaz, mindkét oldalán egy-egy Stackpanel-lel, melyekben Label-ek és TextBox-ok vannak. A tabulálási sorrend alapértelmezése az, hogy elkezdjük az első beágyazott vezérlővel, folytatva az abba beágyazottakkal mielőtt tovább mennénk. Mivel a dialógus függőlegesen orientált Stackpanel-ekből áll, ez azt jelentené, hogy a keresztnév (First name) mezővel kezdenénk, aztán az utcanévvel (Street name) folytatnánk, utána a város (City) következne, mielőtt rátérnénk a második Stackpanel-re amely az utónevet (Last name) és irányítószámot (Zip code) tartalmazza. Végül, a második Stackpanel-ből kitabulálva érkezünk el a két gombhoz.

Azonban e dialógus esetén nem erre a sorrendre van szükségünk. Azt szeretnénk, hogy a keresztnév (First name) után az utónév (Last name) következzen (vagyis alapjában véve nem függőlegesen, hanem vizszintesen akarunk mozogni). Ráadásul, a város (City) mezőt teljesen ki akarom hagyni mivel az majd automatikusan kitöltődik ha már az irányítószámot (Zip code) megadtuk az így elképzelt dialógusban (épp ezért a mezőt írásvédetté tesszem). E szempontok elérése érdekében két tulajdonságot fogok felhasználni: a TabIndex és a IsTabStop tulajdonságokat. A TabIndex a tabulálási sorrendet adja meg, míg az IsTabStop lehetővé teszi egy elem kizárását a tabulálásból. Íme a XAML amely a dialógust létrehozza:

<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>

Mint látható, minden lényeges element elláttam egy számmal TabIndex tulajdonságában és a IsTabStop-ot használtam a város mezőnél - ilyen egyszerűen irányítható a tabulálási sorrend egy dialógusban!

Összefoglalás

A helyes tabulálási sorrend nagyon fontos, de szerencsére a WPF általában automatikusan jól megoldja ezt. Bizonyos esetekben azonban, célszerű pontosan kézben tartani a sorrendet a TabIndex és IsTabStop tulajdonságok által, ahogyan a példában is illusztráltuk.