Reputation: 688
I have a LongListSelector that displays lots of items. When the longListSelector is opened, I see the groups expanded i.e. the items are displayed within the groups. I want the longList Selector to display the collapsed Panel showing only the group names at start. Like an index. When you tap a group, its items expand. How can this be done?
Upvotes: 0
Views: 204
Reputation: 6293
Just needed to implement this myself - did it as follows:
In the item (not header!) template definition in XAML, bind the Visibility
property of the containing item (in my case, a Grid
):
<DataTemplate x:Key="itemTemplate">
<Grid Visibility="{Binding FolderVisibility}">
...
Derive the item group from ObservableCollection
and create a suitable property for handling the expand/collapse status:
public class MyGroup : ObservableCollection<MyItem>
{
...
private bool m_expanded = true;
public bool Expanded
{
get { return m_expanded; }
set
{
m_expanded = value;
OnPropertyChanged( new PropertyChangedEventArgs( "Expanded" ));
foreach( var i in this )
{
i.OnFolderCollapsedExpanded();
}
}
}
...
Finally, you need the FolderVisibility
property on each list item:
public class MyItem : INotifyPropertyChanged
{
...
public event PropertyChangedEventHandler PropertyChanged;
...
public Visibility FolderVisibility
{
get { return MyFolder.Expanded ? Visibility.Visible : Visibility.Collapsed; }
}
public void OnFolderCollapsedExpanded()
{
var h = PropertyChanged;
if( h != null ) h( this, new PropertyChangedEventArgs( "FolderVisibility" ));
}
...
Then just toggle the folder's Expanded
property in a suitable place (e.g. a Click
handler for the folder's header template).
Upvotes: 1