TabIndex

Mar 12, 2015 at 9:55 AM
Hello,

first of all thanks for this very useful extension of Textbox control: works really fine!
I'm using it to let users select a sea port from a list which appears while they're typing the port name. My only problem is that it seems to ignore the TabIndex value.
I have 5 controls (textbox, textbox, AutoCompleteTextBox, textbox and a spinner) placed horizontally in a simple stackpanel. The AutoCompleteTextBox has TabIndex=3 and, while tabbing, it is totally skipped: focus switches from control with TabIndex=2 to control with TabIndex=4.

Any idea about this behaviour?

Thanks in advance
Giacomo
Coordinator
Mar 12, 2015 at 1:16 PM

Hi Giacomo,

I'll check the issue tomorrow meanwhile I'll suggest you to try setting IsTabstop property to true.

Cheers!
Deepak

Mar 12, 2015 at 2:40 PM
Hi Deepak,

I already tried to set IsTabStop=True without luck..
I will wait 'till tomorrow

Cheers!
Giacomo
Coordinator
Mar 13, 2015 at 7:17 AM
Hi Giacomo,

I have discovered and fixed the issue, however I am unable to commit the code at the moment. You may implement the change in your local copy of code.

You need to add below binding in control template on PART_Editor.
TabIndex="{TemplateBinding TabIndex}"
Cheers!
Deepak
Coordinator
Mar 13, 2015 at 7:19 AM
Style after update will look like below.
<Style TargetType="{x:Type local:AutoCompleteTextBox}">
        <Setter Property="Focusable"
                Value="False" />
        <Setter Property="IsTabStop" 
                Value="True"/>
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="BorderBrush"
                Value="Gray" />
        <Setter Property="Validation.ErrorTemplate" 
                Value="{x:Null}"/>
        <Setter Property="FocusVisualStyle"
                Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:AutoCompleteTextBox}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="3">
                        <Grid>
                            <DockPanel>
                                <ContentPresenter ContentSource="Icon"
                                                  x:Name="PART_Icon"
                                                  Visibility="{TemplateBinding IconVisibility}" />
                                <Grid>
                                    <TextBlock x:Name="PART_Watermark"
                                               Text="{TemplateBinding Watermark}"
                                               Visibility="Collapsed"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Left"
                                               Focusable="False"
                                               Foreground="Gray"
                                               Margin="3,0" />
                                    <TextBox x:Name="PART_Editor"
                                             HorizontalAlignment="Stretch"
                                             VerticalAlignment="Center"
                                             Focusable="True"
                                             TabIndex="{TemplateBinding TabIndex}"
                                             Style="{StaticResource ResourceKey=TransparentTextBoxStyle}"
                                             Text="{Binding Path=Text, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" />
                                </Grid>
                            </DockPanel>
                            <Popup x:Name="PART_Popup"
                                   IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay}"
                                   Width="{TemplateBinding ActualWidth}"
                                   HorizontalOffset="0"
                                   MinHeight="25"
                                   MaxHeight="600"
                                   AllowsTransparency="True"
                                   PopupAnimation="Slide"
                                   Focusable="False">
                                <Border Background="White"
                                        BorderThickness="1"
                                        BorderBrush="Gray"
                                        CornerRadius="5"
                                        Padding="2">
                                    <Grid>
                                        <ListBox x:Name="PART_Selector"
                                                 ItemTemplate="{TemplateBinding ItemTemplate}"
                                                 ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                 Focusable="False"
                                                 BorderThickness="0"
                                                 ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                                 ScrollViewer.VerticalScrollBarVisibility="Auto"
                                                 ItemContainerStyle="{StaticResource ResourceKey=SuggestionItemStyle}">
                                        </ListBox>
                                        <Border Visibility="{Binding Path=IsLoading, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ResourceKey=BoolToVisConverter}}">
                                            <ContentPresenter ContentSource="LoadingContent"/>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Popup>

                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Text"
                                 Value=""
                                 SourceName="PART_Editor">
                            <Setter Property="Visibility"
                                    Value="Visible"
                                    TargetName="PART_Watermark" />
                        </Trigger>
                        <Trigger Property="IconPlacement"
                                 Value="Left">
                            <Setter Property="DockPanel.Dock"
                                    Value="Left"
                                    TargetName="PART_Icon" />
                        </Trigger>
                        <Trigger Property="IconPlacement"
                                 Value="Right">
                            <Setter Property="DockPanel.Dock"
                                    Value="Right"
                                    TargetName="PART_Icon" />
                        </Trigger>
                        <Trigger Property="Validation.HasError" Value="True">
                            <Setter Property="BorderBrush"
                                    Value="Red"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Marked as answer by deepdotnet on 3/18/2015 at 10:38 PM
Mar 13, 2015 at 8:12 AM
Hi Deepak,

woooorks peeerfectly!!

Thank you for your help and for your wonderful AutoCompleteTextBox!

Cheers
Giacomo
Coordinator
Mar 13, 2015 at 8:28 AM
Cheers! Thanks for your appreciations!!