Tab Order

Hvis du har arbejdet med en computer længe nok til at ville lære programmering, ved du sikkert også, at du kan bruge Tab-tasten på tastaturet til at navigere mellem vinduer/dialoger. Dette giver dig mulighed for at holde hænderne på tastaturet, når du udfylder en formular eller lignende, i stedet for at skulle bruge musen til at vælge næste felt/kontrol.

WPF understøtter denne funktion lige ud af boksen, og endnu bedre: Det vil automatisk etablere den rækkefølge, der bruges, når du flytter fra et felt til et andet, så generelt behøver du overhovedet ikke bekymre dig om dette. Men nogle gange dit vindues/dialogboks design WPF til at bruge en tabulatorrækkefølge, som du af forskellige årsager måske ikke er enig i. Du kan også beslutte, at visse kontroller ikke skal være en del af tabuleringsrækkefølgen. Tillad mig at illustrere dette med et eksempel:

Denne dialog består af et gitter, delt på midten, med StackPanel'er på hver side, som indeholder etiketter og tekstbokse. Standardfunktionerne for tabulatorrækkefølge er at starte med den første kontrol i vinduet og derefter tabulere gennem hver af de underordnede kontrolelementer, der findes i den, inden du går videre til den næste kontrol. Da dialogen består af vertikalt orienterede StackPanel'er, ville det betyde, at vi ville starte i feltet Fornavn og derefter flytte til feltet Gadenavn og derefter feltet By, før vi flyttede til StackPanel nummer to, der indeholder felterne for Efternavn og Postkode. Når du taber ud af det andet StackPanel, ville de to knapper endelig være nået

Men det er ikke den adfærd, jeg ønsker for denne dialog. I stedet vil jeg tabulere fra Fornavn til Efternavn (så dybest set bevæger jeg mig vandret i stedet for lodret), og jeg ønsker oven i købet ikke at indtaste By-feltet, når jeg tabulerer gennem formularen, fordi det automatisk udfyldes ud fra baseret postnummeret i denne imaginære dialogboks og derfor er blevet auto udfyldt. For at opnå alt dette vil jeg bruge to egenskaber: TabIndex og IsTabStop. TabIndex bruges til at definere rækkefølgen, mens IsTabStop-egenskaben vil tvinge WPF til at springe en kontrol over, når du tabulerer gennem vinduet. Her er koden, der blev brugt til at oprette dialogen:

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

Notice how I simply give each relevant control a number in the TabIndex property, and then use the IsTabStop for the TextBox used for the City - it's that simple to control the tab order in a dialog!

Summary

Controlling the tab order of a dialog is very important, but fortunately for us, WPF does a very good job of automatically defining a proper tab order for you. However, in some cases, it will make sense to go in and take control, using the TabIndex and IsTabStop properties, as illustrated in the example above.