I cannot get the selection box in my Xbox UWP app popup

Question

I have created a popup and have some buttons over it and I am not able to select those and nor does the XBox default selection box appears around the button.

<Grid>

    <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0">

        <Button Content="Show Popup Flyout" Click="ShowFlyoutPopup" />

    </StackPanel>

    <Popup x:Name="logincontrol1" IsOpen="False" IsLightDismissEnabled="True">

        <Popup.ChildTransitions>

            <TransitionCollection>

                <PaneThemeTransition />

            </TransitionCollection>

        </Popup.ChildTransitions>
        <StackPanel Orientation="Vertical" Background="#313131" Width="1000" Height="500"  x:Name="pop" Margin="0,100,0,0" >

            <StackPanel>
                <GridView ItemsSource="{Binding GamesList}" >
                <GridView.ItemTemplate>
                    <DataTemplate x:Name="testtemp">
                            <Button x:Name="SwapBtn" Command="{Binding TestClick,Mode=OneWay}">
                            <StackPanel Width="202" VerticalAlignment="Top">
                                <Image Source="{Binding ImageUrl}" Height="324"/>
                                <StackPanel Background="Black" Padding="19,9,0,0">
                                    <TextBlock FontWeight="Semibold" TextTrimming="CharacterEllipsis" FontFamily="Segoe Pro" Foreground="White" TextAlignment="Left" FontSize="24" Text="{Binding Title}" TextWrapping="Wrap" Height="65"/>
                                    <TextBlock FontFamily="Segoe Pro" Foreground="White" TextAlignment="Left" FontSize="16" Text="{Binding Price}" Margin="0,48,0,0"/>
                                </StackPanel>
                            </StackPanel>
                        </Button>
                        </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

            </StackPanel>

        </StackPanel>
    </Popup>

</Grid>

Code behind: Its like this and I am not able to get the focus on my popup. I thought it should work automatically.

   public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    private void ShowFlyoutPopup(object sender, RoutedEventArgs e)

    {

        if (!logincontrol1.IsOpen)

        {

            RootPopupBorder.Width = 646;
            logincontrol1.HorizontalOffset = Window.Current.Bounds.Width - 1485;

            logincontrol1.VerticalOffset = Window.Current.Bounds.Height - 840;

            logincontrol1.IsOpen = true;

        }

    }

}

}

The focus is not there in the popup and I cannot interact with it using the gamepad.

Mac · Accepted Answer · 2018-09-13T15:13:13.467

I'd handle the opened event of the popup,

<Popup x:Name="logincontrol1" IsOpen="False" IsLightDismissEnabled="True" Opened="Logincontrol1_OnOpened">

Controls inside your popup datatemplate is not gonna be on the visual tree of your page/view it will kind of have it's own visual tree, for this you can use VisualTreeHelper to get the control inside the popup to set the focus.

private void Logincontrol1_OnOpened(object sender, object e)
{
    Popup popup = sender as Popup;
    if (popup != null)
    {
        Button button = FindElementInVisualTree<Button>(mygrid);
        button?.Focus(FocusState.Programmatic);
    }
}

private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
    var count = VisualTreeHelper.GetChildrenCount(parentElement);
    if (count == 0) return null;

    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(parentElement, i);
        if (child != null && child is T)
            return (T)child;
        else
        {
            var result = FindElementInVisualTree<T>(child);
            if (result != null)
                return result;
        }
    }
    return null;
}

score 0 · Answer 2 · answered Sep 13 '18 at 11:59

0

You can force focus on one of the Popup's controls:

logincontrol1.IsOpen = true;
loginclick.Focus(FocusState.Programmatic);

answered Sep 13 '18 at 11:59

Martin Zikmund

38,440
7
70
91

If the content inside the popup is populated using a list, how can I specifically set focus? I am using item.template to populate the data. – sadik Sep 13 '18 at 12:24
You can set the focus to the `ListView` itself – Martin Zikmund Sep 13 '18 at 12:27
I have updated the code and can you please check that. I have a gridview.itemtemplate and can I focus on that? – sadik Sep 13 '18 at 12:36
You can set `x:Name` on the `GridView`. If you want to access an item in the grid, use `GridViewItem item = ResultGv.ContainerFromIndex(0) as GridViewItem;` and then you can try `FindName` to find the button inside an focus it – Martin Zikmund Sep 13 '18 at 12:41
Its giving me a null reference exception. Is there anyway to do it much simpler? I am kinda new to UWP. – sadik Sep 13 '18 at 12:58
Which part gives you the `NullReferenceException` (which of the variables is null)? – Martin Zikmund Sep 13 '18 at 12:59
The gridview item is returned as null. GridViewItem item = mygrid.ContainerFromIndex(0) as GridViewItem; var name = item.FindName("SwapBtn") as Button; name.Focus(FocusState.Programmatic); – sadik Sep 13 '18 at 13:07

I cannot get the selection box in my Xbox UWP app popup

2 Answers2

Linked