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

Question

我想创建一个与 Window 10 相同的列表 wifi 的列表视图。当用户单击列表项时，它将显示更多信息。

我不知道如何在 UWP 应用的 Listview 项目中显示点击一项的附加数据？

before selected Wifi node

after selected Wifi node

Answer 1

为了显示其他数据，您可以使用 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();
        }
    }
}

希望这会有所帮助。