Focus control within DataTemplate of GridView

Question

I have a GridView that uses a DataTemplate to provide a UI so users can manage subscriptions to a dataservice. The DataTemplate contains text and an image and also a Button and a ToggleButton. Using this on Mobile and Desktop the user can tap or click the buttons within the control. On Desktop you can even Tab inside the control and select the buttons. However on Xbox I am only able to focus on each DataTemplate item, I cannot get it to focus on the buttons inside, is there a way around this without enabling Mouse Mode on the Xbox?

<DataTemplate x:Key="DataTemplate1">
        <Grid Background="#33FFFFFF">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Image HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="80" Source="{Binding TEAMID, Converter={StaticResource uriConverter}}" Grid.RowSpan="3"/>
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding TEAMNAME}" VerticalAlignment="Top" Grid.Column="1"/>
            <Button Content="Unsubscribe" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Tag="{Binding TEAMID}" Tapped="Button_Tapped"/>
            <ToggleButton x:Name="subscribe_tb" Content="&#xE840;" HorizontalAlignment="Center" FontFamily="Segoe MDL2 Assets" Tag="{Binding TEAMID}" IsChecked="{Binding isPinned}" Grid.Row="3" Grid.Column="1" Unchecked="subscribe_tb_Unchecked" Checked="subscribe_tb_Checked"/>
        </Grid>
</DataTemplate>

So when you navigate, it simply ignored the buttons inside, or you can't see any focus visual? — Justin XL, Jul 31 '17 at 11:59
The focus visual is around the outer box (the grid basically) and you can't move focus using the controller to the buttons inside, only to the next datatemplateitem etc — Stu Ayton, Jul 31 '17 at 12:04
This is probably a long shot but I think you can try first enabling `IsFocusEngagementEnabled` on your `GridView`, and then setting `IsTabStop` to `False` in your `GridViewItem` style. — Justin XL, Jul 31 '17 at 12:26
Unfortunately adding IsFocusEngagementEnabled onto the GridView means that the whole GridView has focus and you then have to select it to get focus on the GridViewItems inside. — Stu Ayton, Jul 31 '17 at 12:41
This could be for better practice though. Imagine when a user wants to focus a control below that, he needs to go through everything inside the `GridView` first. But if you don't want this, that's OK. Did you also try disabling GridViewItem's IsTabStop? — Justin XL, Jul 31 '17 at 12:43
I've designed the UI to avoid situations like that, so there's no controls below the GridView. Yes also disabled the IsTabStop. It's like I need `IsFocusEngagementEnabled` to `False` on the actual DataTemplate — Stu Ayton, Jul 31 '17 at 12:48
I think to answer my own question: There are three common reasons why XY navigation might not work the way you expect: The IsTabStop or Visibility property is set wrong. The control getting focus is actually bigger than you think—XY navigation looks at the total size of the control (ActualWidth and ActualHeight), not just the portion of the control that renders something interesting. One focusable control is on top of another—XY navigation doesn't support controls that are overlapped. — Stu Ayton, Jul 31 '17 at 13:12
I thought about overlapping but in your xaml it doesn't look like they are? — Justin XL, Jul 31 '17 at 13:15
I suppose as the Buttons are within the datatemplateitem it's classed as overlapping? — Stu Ayton, Jul 31 '17 at 13:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150627/discussion-between-stu-ayton-and-justin-xl). — Stu Ayton, Jul 31 '17 at 13:54

score 2 · Accepted Answer · answered Jul 31 '17 at 13:53

Solved by changing the Style of the GridView.ItemContainerStyle:

<GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="IsFocusEngagementEnabled" Value="True"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
</GridView.ItemContainerStyle>

Focus control within DataTemplate of GridView

1 Answers1