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作为每个项目的内容，通过右键单击解决方案资源管理器中的项目，然后选择“添加”和“新项目...”，在弹出窗口中选择“用户”控制“，为其命名并确认创建一个。

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

<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的{{1}}中使用它。在我们这样做之前，我们需要知道这个用户控件可以扩展，所以这个控件的高度可以动态变化。并且DataTemplate控件使用ItemsWrapGrid作为其GridView，这将强制所有其他项目的大小与第一个项目的大小相同。

基本上，这意味着，如果您的第一个项目展开，其他项目将更改高度到第一个项目的高度但不会展开下拉菜单，如果第一个项目未展开，则展开另一个项目项目，展开的项目和原始项目将重新调整大小。我只是在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>

以下是我演示的渲染图片：

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

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

1 个答案: