1

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;
Vincent
  • 3,124
  • 3
  • 21
  • 40
  • Hi @Vincent, how do you focus the `GridView` item next by next in pc platform? – Nico Zhu May 28 '19 at 03:08
  • Hi, Nico. I use case VirtualKey.Right, which is keyboard Left/Right, to move focus. – Vincent May 28 '19 at 03:10
  • You could try connect xbox game pad within pc platform and move next with game pad right key, you could also see the part of the next one with animation. I think It is by design. – Nico Zhu May 28 '19 at 03:17
  • No, I connected a Xbox controller to my pc, and move focus left/right, it behaves all normal, just like I use my keyboard. So it seems right when running on pc platform, no matter what input devices I use. See my video: https://drive.google.com/file/d/1vaNfdd-4hWjSOfjiCZ3kmB9rzxLHyC1Z/view?usp=sharing – Vincent May 28 '19 at 03:26
  • So the issue only occur in xbox platform. Have you debug within xbox and check if the correct `VirtualKey` pressed? – Nico Zhu May 28 '19 at 05:09
  • Have you checked this [document](https://learn.microsoft.com/en-us/windows/uwp/design/devices/designing-for-tv#scrolling-ends-of-lists-and-grids)? – Nico Zhu May 28 '19 at 08:01
  • OK, I'll check that code. – Vincent May 28 '19 at 08:45

1 Answers1

0

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.

Nico Zhu
  • 32,367
  • 2
  • 15
  • 36
  • 1
    Hi, I created a user voice [Card Alignment Bug On Xbox](https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/37759939-card-alignment-bug-on-xbox). Hope MS can give a workaround. – Vincent May 29 '19 at 06:10