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

问题

I have a listview containing some item. And I want to expand the item to show detail information when I select one item, what should I do?

回答1:

I didn't check the CustomControl carefully which provided by @AVK Naidu, which is good and seems can solve your problem. But I need to say here, it is totally possible to do this work with the default ListView control, what you need is just changing the DataTemplate for your ListViewItem when it is selected.

Just for example here:

<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>

Code behind for 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"];
    }
}

Result:

来源：https://stackoverflow.com/questions/40026593/uwp-listview-how-to-expand-an-item-when-select-it

标签

uwp

uwp-xaml