單擊后如何更新列表視圖項？

Question

我想創建一個與Windows 10相同的列表視圖列表。當用戶單擊列表項時，它將顯示更多信息。

我不知道如何在單擊一項時在UWP app的Listview項目中顯示其他數據？

在選擇Wifi節點之前

選擇Wifi節點后

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

希望這可以幫助。