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

问题

I want to click on any row in gridview then a menu appears under the clicked row any help please ??

here is my code

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

回答1:

You can use a UserControl as the Content of each item, by right clicking the project in the solution Explorer, then choose "Add" and "New Item...", in the popup window choose "User Control", give a name to it and confirm to create one.

Now you can modify your user control like this:

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

code behind:

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

Now the problem is how to use it in the GridView's DataTemplate.Before we doing this, we need to know that this user control can be expanded, so the height of this control can be dynamic changeable. And the GridView control uses ItemsWrapGrid as its ItemsPanel, this will force all the other items's size be the same with the first item's size.

Basically, it means, if your first item is expanded, the other items will change the height to the first item's height but will not expand the drop down menu, and if the first item is not expanded, when you expand the other items, the expanded item and the original one will be re-sized. So I just use this user control in both ListView and GridView, you may compare them.

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

code behind:

private ObservableCollection<RoomInfo> roominfo;

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

Here is the rendering image of my demo:

In case you need my demo to have a test, please check here.

来源：https://stackoverflow.com/questions/36167365/how-to-create-drop-down-menu-foreach-row-in-gridview-onclick-uwp-windows-10-app

标签

gridview

win-universal-app

windows-10-universal