Tab Order

Als je lang genoeg hebt gewerkt met een computer om te leren programmeren dan weet je waarschijnlijk al dat je kan navigeren in een venster/dialoogvenster door de tab-toets te gebruiken. Dit in plaats van een muis te gebruiken om het volgend veld of besturingselement te selecteren wanneer je een formulier of iets dergelijks moet invullen laat dit je toe om je handen op het toetsenbord te houden.

WPF ondersteunt dit gedrag rechtstreeks uit de doos, en nog beter: het zal automatisch de volgorde bepalen die wordt gebruikt bij het gaan van het ene naar het andere veld. Dus in het algemeen hoeft u zich hier geen zorgen in te maken. Maar soms zorgt het ontwerp van je venster/dialoogvenster dat WPF een tabvolgorde gebruikt waar u het, om verschillende redenen, niet mee eens bent. Ook kan je beslissen dat bepaalde besturingselementen geen deel mogen uitmaken van de tabvolgorde. Laat me dit tonen aan de hand van een voorbeeld:

Dit dialoogvenster bestaat uit een Grid, gesplitst in het midden, met StackPanels aan elke zijde die labels en tekstvakken bevatten. Het standaardgedrag voor de tabvolgorde is om te beginnen bij het eerste besturingselement van het venster en vervolgens door elk van de onderliggende besturingselementen te bladeren voordat u naar het volgende besturingselement gaat. Omdat het dialoogvenster bestaat uit verticaal georiënteerde StackPanels zou dit betekenen dat we in het veld First name beginnen, vervolgens naar het veld Street name gaan en dan naar het City veld. Dit voordat u naar StackPanel twee gaat met de velden Last name en Zip code. Pas wanneer u door het tweede StackPanel hebt gebladerd zou u uiteindelijk de twee knoppen bereiken.

Voor dit dialoogvenster is dit echter niet het gedrag dat we willen. In plaats daarvan willen we van First name naar Last name gaan (dus eigenlijk horizontaal in plaats van verticaal), en bovendien willen we niet het City veld selecteren wanneer we met de tab-toets door het formulier bladeren. Dit willen we niet omdat dit automatisch wordt ingevuld op basis van de Zip code. Daarom is het in dit dialoogvenster alleen-lezen (readonly) gemaakt. Om ons doel te bereiken gaan we de volgende eigenschappen (properties) gebruiken: TabIndex en IsTabStop. TabIndex wordt gebruikt om de volgorde te definiëren terwijl IsTabStop WPF dwingt een besturingselement over te slaan wanneer u door het formulier bladert. Dit is de markup die werd gebruikt om het dialoogvenster te maken:

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

Merk op hoe we elk relevant besturingselement een nummer geven in de eigenschap (property) TabIndex en vervolgens TabIndex voor de TextBox die wordt gebruikt voor de City. Zo eenvoudig is het om de tabvolgorde te commanderen in een dialoogvenster!

Overzicht

Het sturen van de tabvolgorde in een dialoogvenster is erg belangrijk, gelukkig levert WPF, in de meeste gevallen, automatisch al een juiste tabvolgorde voor ons. Maar in sommige gevallen is het nodig om zelf de controle te nemen over de tabvolgorde met behulp van de eigenschappen (properties) TabIndex en IsTabStop, zoals geïllustreerd werd in het bovenstaande voorbeeld.