CODEWITHSUNDEEP
uwpuwp-xaml
THaGKI9
THaGKI9

Reputation: 86

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?

Upvotes: 1

Views: 2254

Answers (1)

Grace Feng
Grace Feng

Reputation: 16652

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:

enter image description here

Upvotes: 4

Related Questions