GridView in UWP

Question

I are facing issue with GridView Control. We had a working Windows Store App on 8.1 where GridView left and right mouse clicks had different functionality. In the case of left mouse click, we used to use “ItemClick” event which performs navigation to another XAML page. On right click of GridItem, it gets selected and shows the appbar, we have used “SelectionChanged” event for this.

We are now migrating our existing windows store app to UWP Application, we have used same gridView Code, we find significant difference in functionality and look & feel, we don’t see GridView Item Selected like above picture. We see “ItemClick” and “SelectionChanged” are working together. The flow is something like that on left click on the item, the control goes to SelectionChanged event and then ItemClick. We were not able to differentiate actions like Left Mouse Click and Right Mouse click, since both events are getting fired up upon clicking on left click/tapping. We have different functionality on left and right clicks of mouse.

Need help on how to mimic windows 8.1 functionality in UWP.

Answer 1

My requirement was the I wanted to use Right Click/Long Tapped to select an item and take an action accordingly from App Bar Buttons and on Left Click/Tap should redirect me to the next XAML Page. The problem I was facing was the on Right Click, I wasnt able to detect that which items of GridView has been clicked and how can I add that into SelectedItem.

What I did was, I introduced extra Grid in DataTemplate of GridView. Within this Grid, I added RightTapped event.

The sample code snippet is

 <GridView x:Name="ItemGridView"   
              ItemsSource="{Binding Source={StaticResource ItemsViewSource}}" 
              IsItemClickEnabled="True" 
              SelectionMode="Single" ItemClick="ItemGridView_ItemClick" 
              SelectionChanged="ItemGridView_SelectionChanged">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid RightTapped="Grid_RightTapped">
                    <Border Background="White"  BorderThickness="0" Width="210" Height="85">
                        <TextBlock Text="{Binding FileName}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

The event name is Grid_RightTapped. This helped me detect that from which GridViewItem, I got the long tap/right click.

The code-behind for this is:

 private void Grid_RightTapped(object sender, RightTappedRoutedEventArgs e)
    {
        Song selectedItem = (sender as Grid).DataContext as Song;
        //the above line will get the exact GridViewItem where the User Clicked
        this.ItemGridView.SelectedItem = selectedItem;
        //the above line will add the item into SelectedItem and hence, I can take any action after this which I require
        }
    }

The reason we are doing this way is, because now we can add clicked item into the GridView SelectedItem using Right Click. Now in UWP, clicked items are added into SelectedItem using left click only. And with left click, I can navigate to another page using ItemClick event.

Answer 2

You are correct, there has been a change in the interaction model behavior. According to MSDN article How to change the interaction mode (XAML)

• For selection, set IsItemClickEnabled to false and SelectionMode to any value except ListViewSelectionMode.None and handle the SelectionChanged event (ItemClick is not raised in this case).
• For invoke, set IsItemClickEnabled to true and SelectionMode to ListViewSelectionMode.None and handle the ItemClick event (SelectionChanged is not raised in this case).
• Another combination is to set IsItemClickEnabled to false and SelectionMode to ListViewSelectionMode.None. This is the read-only configuration.
• A final configuration, which is used least often, is to set IsItemClickEnabled to true and SelectionMode to any value except ListViewSelectionMode.None. In this configuration first ItemClick is raised and then SelectionChanged is raised.

You seem to be using the last option - IsItemClickEnabled is set to true and SelectionMode is set to something that's not None. According the Microsoft, this is used least often so maybe it would be a good idea to rethink this design?

Since you haven't shared any code that you already tried, I will just throw in one idea: maybe playing around with Tappedand RightTapped event handlers could help you differentiate between the two more easily?

Answer 3

To identify left and right click, for right click you can use RightTapped event

<GridView x:Name="categoryItemsGV"
   Margin="5,5,0,0"
   IsItemClickEnabled="True" 
   ItemClick="categoryItemsGV_ItemClick" 
   IsRightTapEnabled="True" 
   RightTapped="categoryItemsGV_RightTapped"
   SelectionMode="Single"
   SizeChanged="categoryItemsGV_SizeChanged"
   ItemsSource="{Binding}">

and .cs code is below:

private void categoryItemsGV_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
   var tablemod = (sender as GridView).SelectedItem;
}

Answer 4

From RightTapped the item over which the mouse was right clicked can be obtained from e.OriginalSource

        <GridView x:Name="myGridView" VerticalAlignment="Center">
            <GridView.ContextFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Reset"/>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Repeat"/>
                    <MenuFlyoutItem Text="Shuffle"/>
                </MenuFlyout>
            </GridView.ContextFlyout>
        </GridView>


Private Sub myGridView_RightTapped(sender As Object, e As RightTappedRoutedEventArgs) Handles myGridView.RightTapped
myGridView.SelectedItem = e.OriginalSource
End Sub

Now that RightClick has selected the desired item, further action like delete, copy can be executed on it.