UWP 中的网格视图

Question

我遇到了 GridView 控件的问题。我们在 8.1 上有一个可用的 Windows Store 应用程序，其中 GridView 鼠标左键和右键单击具有不同的功能。在鼠标左键单击的情况下，我们过去使用“ItemClick”事件执行导航到另一个 XAML 页面。右键单击 GridItem，它会被选中并显示应用栏，为此我们使用了“SelectionChanged”事件。

我们现在正在将我们现有的 windows 商店应用程序迁移到 UWP 应用程序，我们使用了相同的 gridView 代码，我们发现功能和外观有显着差异，我们没有看到像上面那样选择的 GridView 项目图片。我们看到“ItemClick”和“SelectionChanged”一起工作。流程类似于左键单击项目，控件转到 SelectionChanged 事件，然后转到 ItemClick。我们无法区分鼠标左键单击和鼠标右键单击等操作，因为这两个事件都是在单击左侧 click/tapping 时触发的。我们在鼠标左键和右键上有不同的功能。

需要有关如何在 UWP 中模仿 windows 8.1 功能的帮助。

Answer 1

你是对的，交互模型行为发生了变化。根据 MSDN 文章 How to change the interaction mode (XAML)

对于选择，将 IsItemClickEnabled 设置为 false，将 SelectionMode 设置为 ListViewSelectionMode.None 以外的任何值并处理 SelectionChanged 事件（在这种情况下不会引发 ItemClick）。
对于调用，将 IsItemClickEnabled 设置为 true 并将 SelectionMode 设置为 ListViewSelectionMode.None 并处理 ItemClick 事件（在这种情况下不会引发 SelectionChanged）。
另一种组合是将 IsItemClickEnabled 设置为 false 并且选择模式为 ListViewSelectionMode.None。这是只读的配置。
最后一个用得最少的配置是设置 IsItemClickEnabled 为真，SelectionMode 为任何值，除了 ListViewSelectionMode.None。在此配置中，第一个 ItemClick 是引发，然后引发 SelectionChanged。

您似乎在使用最后一个选项 - IsItemClickEnabled 设置为 true 并且 SelectionMode 设置为不是 None 的内容。根据微软的说法，这是最少使用的，所以重新考虑这个设计也许是个好主意？

由于您还没有分享任何您已经尝试过的代码，我只提出一个想法：也许使用 Tapped 和 RightTapped 事件处理程序可以帮助您区分两者更容易？

Answer 2

我的要求是我想使用 Right Click/Long 点击 select 一个项目并从 App Bar Buttons 采取相应的行动，在 Left Click/Tap 应该将我重定向到下一个 XAML 页。我面临的问题是右键单击，我无法检测到 GridView 的哪些项目已被单击以及如何将其添加到 SelectedItem 中。

我所做的是，我在GridView 的DataTemplate 中引入了额外的Grid。在这个网格中，我添加了 RightTapped 事件。

示例代码片段是

 <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>

活动名称是Grid_RightTapped。这帮助我检测到我从哪个 GridViewItem 获得了长时间的 tap/right 点击。

此代码隐藏是：

 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
        }
    }

我们这样做的原因是，因为现在我们可以使用右键单击将单击的项目添加到 GridView SelectedItem 中。现在在 UWP 中，单击的项目仅使用左键单击添加到 SelectedItem 中。通过左键单击，我可以使用 ItemClick 事件导航到另一个页面。

Answer 3

识别左击和右击，对于右击可以使用RightTapped事件

<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}">

.cs 代码如下：

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

Answer 4

From RightTapped 鼠标右键点击的项目可以从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

现在右键已经选择了想要的项目，进一步的操作如删除，复制可以在它上面执行。

UWP 中的网格视图

GridView in UWP

c#

gridview

selecteditem

uwp