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

您可以将UserControl用作每个项目的内容，方法是在解决方案资源管理器中右键单击该项目，然后选择“添加”和“新建项目...”，在弹出窗口中选择“用户控件”，为该项目命名并确认创建一个。

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

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

这是我的演示的渲染图像：

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