单击后如何更新列表视图项

本文关键字:列表 视图 更新 何更新 单击 | 更新日期: 2023-09-27 17:54:21

我想创建一个与windows 10相同的列表视图。当用户点击列表项时,它会显示更多的信息。

我不知道如何显示在UWP应用程序的Listview项目点击一个项目的额外数据?

选定Wifi节点前

选定Wifi节点后

单击后如何更新列表视图项

为了显示额外的数据,你可以使用Grid或StackPanel或任何适合你需要的可见性折叠,当用户点击项目时,它将被设置为显示。在这里,我演示了如何使用一个简单的ListView:

这是我的主页:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:App1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Name="DummyPage"
    mc:Ignorable="d">
    <Page.Resources>
        <local:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView
            Name="lvDummyData"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            IsItemClickEnabled="True"
            ItemClick="lvDummyData_ItemClick"
            SelectionMode="Single">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding FirstName}" />
                        <StackPanel
                            Grid.Row="1"
                            Margin="0,20,0,0"
                            Visibility="{Binding ShowDetails, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
                            <TextBlock Text="{Binding LastName}" />
                            <TextBlock Text="{Binding Adress}" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

下面是我的代码:

using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        public ObservableCollection<DummyData> DummyData { get; set; }
        private DummyData tempSelectedItem;
        public MainPage()
        {
            DummyData = new ObservableCollection<DummyData>();
            DummyData.Add(new DummyData()
            {
                Adress = "London",
                FirstName = "Shella",
                LastName = "Schranz",
                ShowDetails = false
            });
            DummyData.Add(new DummyData()
            {
                Adress = "New York",
                FirstName = "Karyl",
                LastName = "Lotz",
                ShowDetails = false
            });
            DummyData.Add(new DummyData()
            {
                Adress = "Pasadena",
                FirstName = "Jefferson",
                LastName = "Kaur",
                ShowDetails = false
            });
            DummyData.Add(new DummyData()
            {
                Adress = "Berlin",
                FirstName = "Soledad",
                LastName = "Farina",
                ShowDetails = false
            });
            DummyData.Add(new DummyData()
            {
                Adress = "Brazil",
                FirstName = "Cortney",
                LastName = "Mair",
                ShowDetails = false
            });
            this.InitializeComponent();
            lvDummyData.ItemsSource = DummyData;
        }
        private void lvDummyData_ItemClick(object sender, ItemClickEventArgs e)
        {
            DummyData selectedItem = e.ClickedItem as DummyData;
            selectedItem.ShowDetails = true;
            if (tempSelectedItem != null)
            {
                tempSelectedItem.ShowDetails = false;
                selectedItem.ShowDetails = true;
            }
            tempSelectedItem = selectedItem;
        }
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChangeEvent(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public class DummyData : INotifyPropertyChanged
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Adress { get; set; }
        private bool showDetails;
        public bool ShowDetails
        {
            get
            {
                return showDetails;
            }
            set
            {
                showDetails = value;
                RaisePropertyChangeEvent(nameof(ShowDetails));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChangeEvent(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在我的代码后面,我有一个变量tempSelectedItem,它保存了以前点击的项目,这样你就可以隐藏它的信息。

为了显示和隐藏信息,我们需要一个简单的BoolToVisibilityConverter:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
namespace App1
{
    public class BoolToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            bool boolValue = (bool)value;
            return boolValue ? Visibility.Visible : Visibility.Collapsed;
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}