UWP ListView：如何在 select 时扩展项目？

Question

我有一个包含某些项目的列表视图。当我select一个项目时，我想展开项目以显示详细信息，我该怎么办？

Answer 1

没仔细看@AVK奈都提供的CustomControl，不错，好像可以解决你的问题。但我需要在这里说，使用默认的 ListView 控件完全可以完成这项工作，你需要的只是在选择 ListViewItem 时将 DataTemplate 更改为 ListViewItem。

举个例子：

<Page.Resources>
    <DataTemplate x:Name="Normal" x:Key="Normal">
        <TextBlock Text="{Binding Name}" />
    </DataTemplate>
    <DataTemplate x:Name="Detail" x:Key="Detail">
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="30" Foreground="Red" HorizontalAlignment="Center" />
            <TextBlock Text="Details:" FontSize="30" Foreground="Blue" Margin="0,10" />
            <TextBlock Text="{Binding Details}" FontSize="20" />
        </StackPanel>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemTemplate="{StaticResource Normal}"
              ItemsSource="{x:Bind Collection}" SelectionChanged="listView_SelectionChanged" />
</Grid>

listView_SelectionChanged 的隐藏代码：

private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    //Assign DataTemplate for selected items
    foreach (var item in e.AddedItems)
    {
        ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
        lvi.ContentTemplate = (DataTemplate)this.Resources["Detail"];
    }
    //Remove DataTemplate for unselected items
    foreach (var item in e.RemovedItems)
    {
        ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
        lvi.ContentTemplate = (DataTemplate)this.Resources["Normal"];
    }
}

结果：

UWP ListView：如何在 select 时扩展项目？

UWP ListView: How to expand an item when select it?

uwp

uwp-xaml