Tab Focus on listview is skipping headers

Question

I have a listview control as below which has header template and item template. On clicking the button which opens this list view, focus first comes to the entire list view. On hitting tab, focus comes to the first list view item skipping the header. Anyways I can navigate to headers using up arrow/down arrow keys but the expected behaviour is on hitting tab, focus first comes to the header template

<ListView 
    x:Name="DataListView"
    Grid.Row="1" 
    IsItemClickEnabled="True"
    ItemClick="ListView_ItemClick"
    RightTapped="ListView_RightTapped"
    SelectionMode="None"
    IsTabStop="{x:Bind utilities:XamlExtensions.Invert(ViewModel.IsInitialSetupCompleted), Mode=OneWay}"
    ItemTemplateSelector="{StaticResource ItemTemplateSelector}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" BasedOn="{StaticResource NoMarginListStyle}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderContainerStyle>
                <Style TargetType="ListViewHeaderItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </GroupStyle.HeaderContainerStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate x:DataType="today:HeaderGroupViewModel">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock 
                            Text="{x:Bind Name}"
                            Grid.Column="0"
                            TextWrapping="WrapWholeWords"/>
                        <Button
                            Grid.Column="1"
                            Click="MoreOptions_Click"
                            RightTapped="Button_RightTapped"
                            Style="{ThemeResource BrandedChromelessButton}">
                        </Button>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel AreStickyGroupHeadersEnabled="False"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Any help is appreiciated. I tried using tab index but didn't work. Thanks

Arya Ding - MSFT Arya Ding - MSFT · Accepted Answer · 2021-01-20T06:42:44

ListviewItem can be clicked normally and then gets a focus.

So, you could add a ListviewItem to the DataTemplate of HeaderTemplate like the following.

<ListView.GroupStyle>
    <GroupStyle >
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Key}" FontSize="35" FontWeight="Bold"/>
                        <Button Margin="30,0,0,0" />
                    </StackPanel>
                </ListViewItem>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListView.GroupStyle>

Update:

You could set the IsTabStop property of ListView and that button in HeaderItem to false.
Pleae refer to the following.

<ListView 
 ……                  
 IsTabStop="False">
            ……
           <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock ……/>
                            <Button IsTabStop="False"  Grid.Column="1" Margin="30,0,0,0" Content="Click me"/>
                        </Grid>
                    </DataTemplate>
            </GroupStyle.HeaderTemplate>
   ….        
</ListView>

Tab Focus on listview is skipping headers

1 Answers