Search code examples
uwpuwp-xamlxboxxbox-one

Move focus on GridView item one by one

I'm designing app for pc and xbox. Now facing a tricky problem.

I have a GridView, which is one row enabled. So the focus can move left/right. I have calculated the item's width, so in the user visual area, there are always 4 items visible.

On my pc, when the focus moves left/right, it seems good as expected. But on my xbox, when move item to right, the items always show a part.

More clearly, here are two videos.

Pc

Xbox

Note on xbox, when I move focus to enter image description here , the next item show a part of it.

enter image description here

So, how to disable the next item shows part of it, just act like pc. When the focus is on it, the item shows. When the focus is not on it, do not show it.

In the PreviewKeyDown event, I use 

                case VirtualKey.Right:
                case VirtualKey.GamepadDPadRight:
                case VirtualKey.GamepadLeftThumbstickRight:
                    if (itemIndexInCurrentRiver + 1 <= currentRiver.Items.Count - 1)
                    {
                        currentRiver.Focus(FocusState.Programmatic);

                        GridViewItem item = new GridViewItem();
                        item = currentRiver.ContainerFromIndex(listIndexsInEachRiver[riverIndexInAllRivers]) as GridViewItem;
                        listIndexsInEachRiver[riverIndexInAllRivers] = itemIndexInCurrentRiver + 1;

                        item.Focus(FocusState.Programmatic);
                        item.IsSelected = true;
                        item.StartBringIntoView();

                        e.Handled = false;
                    }
                    else
                        e.Handled = true;
                    break;
Solution

  • I checked your video record, If you want to make Xbox GridView display same as pc, you need turn off overscan border manually.

    Xbox Settings> Display&Sound> Video output, under "Advanced" select "Video fidelity & overscan" You will see an option that says "Apps can add a border", turn if off.

    Unfortunately, we have not provide api could turn if off programmatically. Please feel free post it on the UserVoice. And you could also share code sample for us, We will check if there is other workaround for this.