Search code examples
c#xamlgridviewuwpselectedindex

How to resolve delay in SelectedIndex for GridViewItem c# (UWP)


First post woo! - I have a gridview that presents 4 options to the user. Selecting item 0 reveals a hidden sub-menu that pertains to that option while the other items have different functionality. In order for the correct index to be selected I have to make the selection twice. The SelectedIndex starts at -1 which according to documentation is the intended behavior and makes perfect sense. If I initialize the view with the index at 0 the item has the borders highlighted as if it is selected and only takes one click to activate the menu but if I click any other items it takes two clicks for those items to register.

For example, if I have index 0 selected then select index 1 it shows index 0 then if I select index 0 again it shows index 1.

        private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        
        int index = StudyTypeGrid.SelectedIndex;
        var selected = e.ClickedItem;
        System.Diagnostics.Debug.WriteLine("Index: " + index);
        System.Diagnostics.Debug.WriteLine("Item: " + selected.ToString());

        if (selected != null && index == 0)
        {
            HiddenOptionPanel.Visibility = Visibility.Visible;
        }else
        {
            HiddenOptionPanel.Visibility = Visibility.Collapsed;
        }
    }

Here is a chunk of the Xaml:

                        <GridView x:Name="StudyTypeGrid"  HorizontalAlignment="Center" Margin="0,20,0,0" ItemClick="GridView_ItemClick"
                              IsItemClickEnabled="True" IsDoubleTapEnabled="False">
                        <GridViewItem Height="200" Width="200" >
                            <StackPanel Width="200">
                                <StackPanel Height="100">
                                    <TextBlock Text="Option 1" FontSize="24" TextWrapping="WrapWholeWords"
                                               HorizontalAlignment="Center"  TextAlignment="Center" Margin="0,20,0,0" />
                                </StackPanel>
                                <StackPanel Background="LightGray" Height="100">
                                    <TextBlock Text="Description"
                                               TextWrapping="WrapWholeWords" TextAlignment="Center" VerticalAlignment="Center" />
                                </StackPanel>
                            </StackPanel>
                        </GridViewItem>

I have also tried setting the IsDoubleTapEnabled to false, and tried to reference the selected object instead of selected index. The orignal If-statement only had index == 0 but left the "selected" to show I have tried that route as well. Going from left to right and back I get the following output:

Index: -1
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 0
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 1
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 2
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 3
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 2
Item: Windows.UI.Xaml.Controls.StackPanel
Index: 1
Item: Windows.UI.Xaml.Controls.StackPanel

This view is launched from a page that also has a gridview and is responding in the same way. What am I missing?


Solution

  • When the ItemClick event is triggered, the currently selected item haven't changed, so the value of its SelectedIndex is still the previous selected index, it is an expected behavior. If you want to display the correct SelectedIndex, you could subscribe the SelectionChanged event. In this event, the SelectedIndex is the currently selected index.

    private void StudyTypeGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        int index = StudyTypeGrid.SelectedIndex;
        var selected = e.AddedItems[0];
        System.Diagnostics.Debug.WriteLine("Index: " + index);
        System.Diagnostics.Debug.WriteLine("Item: " + selected.ToString());
    
        if (selected != null && index == 0)
        {
            HiddenOptionPanel.Visibility = Visibility.Visible;
        }
        else
        {
            HiddenOptionPanel.Visibility = Visibility.Collapsed;
        }
    }