Question

All,

I have simple accordion with 2 accordion items each containing 4 text boxes. When I tab into the accordion item, why can’t I tab across each of the textboxes in the accordion item? I tried practically everything from tabindex to TabNavigation=’Local’ & ‘Cycle’.

I want to be able to tab through all textboxes in the accordion item.

Requested code:

<UserControl x:Class="Pimarc.Silverlight.Commerce.UI.View.TestView"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

<Grid x:Name="LayoutRoot" Background="White">
    <toolkit:Accordion HorizontalAlignment="Left" Margin="30,46,0,0" Name="accordion1" VerticalAlignment="Top" Width="200">
        <toolkit:AccordionItem Header="abac" IsTabStop="True" TabNavigation="Cycle">
            <StackPanel>
            <TextBox Name="textBox1" Width="120" TabIndex="0" />
                <TextBox Name="textBox2" Width="120" TabIndex="1" />
                <TextBox Name="textBox3" Width="120" TabIndex="2" />
                <TextBox Name="textBox4" Width="120" TabIndex="3"/>
            </StackPanel>
        </toolkit:AccordionItem>

        <toolkit:AccordionItem Header="bob">
            <StackPanel>
            <TextBox Name="textBox5" VerticalAlignment="Top" Width="120" />
            <TextBox Name="textBox6" VerticalAlignment="Top" Width="120" />
            <TextBox Name="textBox71" VerticalAlignment="Top" Width="120" />
            <TextBox Name="textBox81" VerticalAlignment="Top" Width="120" />
            </StackPanel>
        </toolkit:AccordionItem>
    </toolkit:Accordion>
</Grid>

Answer 1

This is a known issue of the accordion see: Tab order of controls in Accordion control

However there is a easy workaround:

You need to set the TabNavigation property with the help of the ExpandableContentControlStyle.

So you need to create a style:

<Style x:Key="TabNavigationStyle" TargetType="toolkit:ExpandableContentControl">
    <Setter Property="TabNavigation" Value="Cycle" />
</Style>

And use this in your AccordionItem:

<toolkit:AccordionItem Header="abac" IsTabStop="True" 
     ExpandableContentControlStyle="{StaticResource TabNavigationStyle}">