如何在 gridview onclick 中为每一行创建下拉菜单（UWP windows 10 应用程序）

Question

我想点击 gridview 中的任意行，然后在点击的行下方会出现一个菜单有什么帮助吗？？

这是我的代码

            <GridView.ItemTemplate>
                 <DataTemplate x:DataType="data:RoomInfo" x:Name="gridDataTemplate">
                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="StackPanel_Tapped" x:Name="sp" >
                         <TextBlock x:Name="RoomNo" FontSize="25" Foreground="White" Padding="20" Text="{x:Bind RoomNo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120"/>
                         <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind host}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="130"/>
                         <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind Status}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150"/>
                         <Image x:Name="AvailabilityLogo" Source="{x:Bind imageSource}"  Width="15" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                         <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind Date}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="170"/>
                         <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind TimeFrom}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
                         <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind TimeTo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
                     </StackPanel>
                 </DataTemplate>

             </GridView.ItemTemplate>
         </GridView>

Answer 1

您可以使用UserControl作为每一项的内容，在解决方案资源管理器中右击项目，然后选择"Add"和"New Item..."，在弹出的window选择"User Control"，给它起个名字，确认创建一个。

现在您可以像这样修改您的用户控件：

<UserControl
    x:Class="DropDownMenuForeachRowInGridView.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DropDownMenuForeachRowInGridView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="StackPanel_Tapped" Grid.Row="0">
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding RoomNo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding host}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="130" />
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Status}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" />
            <Ellipse Width="15" Height="15" Fill="{Binding ellipseColor}" VerticalAlignment="Center" HorizontalAlignment="Center" />
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Date}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="170" />
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeFrom}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
            <TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeTo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
        </StackPanel>
        <StackPanel x:Name="dropDown" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="1" Visibility="Collapsed" BorderBrush="White" BorderThickness="2" CornerRadius="5">
            <TextBlock Text="Host:" FontSize="25" Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
            <TextBox  FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
            <Button Content="Book now" Click="Button_Click" Margin="30,0,0,0" />
        </StackPanel>
    </Grid>
</UserControl>

隐藏代码：

public sealed partial class MyUserControl : UserControl
{
    public ObservableCollection<RoomInfo> roominfo;

    public MyUserControl()
    {
        this.InitializeComponent();
        roominfo = new ObservableCollection<RoomInfo>();
        roominfo.Clear();
        roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Available", Status = "Available", ellipseColor = "#FF008000", Date = "June 18,2016", TimeFrom = "02:00", TimeTo = "03:00" });
        roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Ayman", Status = "Meeting", ellipseColor = "#FFFF0000", Date = "June 19,2016", TimeFrom = "11:00", TimeTo = "All Day" });
    }

    private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
    {
        dropDown.Visibility = Visibility.Visible;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        dropDown.Visibility = Visibility.Collapsed;
    }
}

现在的问题是如何在GridView的DataTemplate中使用它。在我们这样做之前，我们需要知道这个用户控件是可以扩展的，所以这个的高度控制可以是动态可变的。 GridView 控件使用 ItemsWrapGrid 作为其 ItemsPanel，这将强制所有其他项目的大小与第一个项目的大小相同。

基本上，这意味着，如果您的第一个项目展开，其他项目将高度更改为第一个项目的高度但不会展开下拉菜单，如果第一个项目未展开，则当您展开其他项目、扩展项目和原始项目将重新调整大小。所以我只是在ListView和GridView中都使用了这个用户控件，你可以比较一下。

<ListView x:Name="listView" ItemsSource="{x:Bind roominfo}" Header="ListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:MyUserControl />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<GridView x:Name="gridView" ItemsSource="{x:Bind roominfo}" VerticalAlignment="Bottom" Header="GridView">
    <GridView.ItemTemplate>
        <DataTemplate>
            <local:MyUserControl />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

隐藏代码：

private ObservableCollection<RoomInfo> roominfo;

public MainPage()
{
    this.InitializeComponent();
    MyUserControl control = new MyUserControl();
    roominfo = control.roominfo;
}

这是我演示的渲染图：

如果您需要我的演示进行测试，请检查here。

如何在 gridview onclick 中为每一行创建下拉菜单（UWP windows 10 应用程序）

How to create drop down menu foreach row in gridview onclick (UWP windows 10 application)

c#

gridview

win-universal-app

windows-10-universal