如何为gridview onclick中的每一行创建下拉菜单(UWP Windows 10应用程序) [英] How to create drop down menu foreach row in gridview onclick (UWP windows 10 application)

查看:60
本文介绍了如何为gridview onclick中的每一行创建下拉菜单(UWP Windows 10应用程序)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想单击gridview中的任何行,然后在所单击的行下出现一个菜单有什么帮助吗??

这是我的代码

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

解决方案

您可以使用

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

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.

这篇关于如何为gridview onclick中的每一行创建下拉菜单(UWP Windows 10应用程序)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆