How can I get a row wise tab order in an ItemsControl with a datatemplate?

Question

I want the Tab go forward through each item in a row, and this for each row. But actually it goes through all items in a column, column after column!

In the DataTemplate are 2 Comboboxes (let's say cb1 and cb1) and one TextBox (tb). The actual tab order is the following:

Row0.cb1, Row1.cb1 ... Row0.cb2, Row1.cb2 ... Row0.tb, Row1.tb ...

But what i want is:

Row0.cb1, Row0.cb2, Row0.tb, Row1.cb1, Row1.cb2, Row1.tb ...

                            <ItemsControl ItemsSource="{Binding}" Name="myItemsControl">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="3*"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <ComboBox Grid.Column="0" ItemsSource="{Binding Source={StaticResource SomeItems}}" IsSynchronizedWithCurrentItem="False" SelectedItem="{Binding Path=SomeValue, Mode=TwoWay}" DisplayMemberPath="Name" TabIndex="20"/>
                                            <ComboBox Grid.Column="1" ItemsSource="{Binding Source={StaticResource SomeOtherItems}}" IsSynchronizedWithCurrentItem="False" SelectedItem="{Binding Path=SomeOtherValue, Mode=TwoWay}" DisplayMemberPath="Value" TabIndex="21"/>
                                            <TextBox HorizontalContentAlignment="Stretch" Grid.Column="2" TabIndex="22" LostKeyboardFocus="TextBox_FormatAfterLostFocus">
                                                <TextBox.Text>
                                                    <Binding Path="Wert" Mode="TwoWay" />
                                                </TextBox.Text>
                                            </TextBox>
                                        </Grid>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

Could you please share a picture of what you're trying to do to help us understand your problem ? — japf, Jan 22 '10 at 10:27
Thread moved to: http://stackoverflow.com/questions/2116802/wpf-tabstop-tabindex-in-itemscontrol — nilnitzer, Jan 22 '10 at 11:15

score -1 · Answer 1 · answered Jan 23 '10 at 16:25

you have set TabIndex Values in an ItemsControl. What WPF does is give every row the same TabIndices this means:

row1.cb1.TabIndex =20 |row1.cb2.TabIndex = 21| row1.tb.TabIndex = 22
row2.cb1.TabIndex =20 |row2.cb2.TabIndex = 21| row2.tb.TabIndex = 22

as the 20 of the second row is lower than 21 of first rows second combobox wpf will first cycle through the rows before cycling through the columns.

try leaving out the manually set TabIndex Values! That way it's using WPFs automated tabbing to cycle first through children and then through siblings of the XAML.

like so:

                        <ItemsControl ItemsSource="{Binding}" Name="myItemsControl">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="3*"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <ComboBox Grid.Column="0" ItemsSource="{Binding Source={StaticResource SomeItems}}" IsSynchronizedWithCurrentItem="False" SelectedItem="{Binding Path=SomeValue, Mode=TwoWay}" DisplayMemberPath="Name"/>
                                        <ComboBox Grid.Column="1" ItemsSource="{Binding Source={StaticResource SomeOtherItems}}" IsSynchronizedWithCurrentItem="False" SelectedItem="{Binding Path=SomeOtherValue, Mode=TwoWay}" DisplayMemberPath="Value"/>
                                        <TextBox HorizontalContentAlignment="Stretch" Grid.Column="2" LostKeyboardFocus="TextBox_FormatAfterLostFocus">
                                            <TextBox.Text>
                                                <Binding Path="Wert" Mode="TwoWay" />
                                            </TextBox.Text>
                                        </TextBox>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

How can I get a row wise tab order in an ItemsControl with a datatemplate?

1 Answers1