I had a demo for list view to display menu having parent and child. I simply added items into list view, but the result is only parent item is showing. How can I get to show my list view including both parent and children items?
My debug result is having 2 child items in parent. But can’t display. Is it binding problem?
<Page.Resources>
<DataTemplate x:Key="ParentDataTemplate">
<TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14"/>
</DataTemplate>
<DataTemplate x:Key="ChildDataTemplate">
<TextBlock Text="{Binding Name}" Margin="20,0,0,0"/>
</DataTemplate>
<local:MenuItemTemplateSelector x:Key="MenuItemTemplateSelector"
ParentTemplate="{StaticResource ParentDataTemplate}"
ChildTemplate="{StaticResource ChildDataTemplate}"/>
</Page.Resources>
<Grid>
<muxc:ListView x:Name="nestedListView" ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}">
<muxc:ListView.ItemContainerStyle>
<Style TargetType="muxc:ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</muxc:ListView.ItemContainerStyle>
<muxc:ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</muxc:ListView.ItemsPanel>
</muxc:ListView>
</Grid>
this is my cs code.
public MainPage()
{
this.InitializeComponent();
// Creating a parent item
MenuItem parentItem = new MenuItem
{
Name = "Parent Item 1"
};
// Creating child items
MenuItem childItem1 = new MenuItem { Name = "Child Item 1" };
MenuItem childItem2 = new MenuItem { Name = "Child Item 2" };
// Adding child items to the parent
parentItem.Children.Add(childItem1);
parentItem.Children.Add(childItem2);
MenuItemViewModel viewModel = new MenuItemViewModel();
viewModel.MenuItems.Add(parentItem);
nestedListView.ItemsSource = viewModel.MenuItems;
}
}
public class MenuItem
{
public string Name { get; set; }
public ObservableCollection<MenuItem> Children { get; set; } = new ObservableCollection<MenuItem>();
}
public class MenuItemViewModel
{
public ObservableCollection<MenuItem> MenuItems { get; } = new ObservableCollection<MenuItem>();
}
public class MenuItemTemplateSelector : DataTemplateSelector
{
public DataTemplate ParentTemplate { get; set; }
public DataTemplate ChildTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is MenuItem menuItem)
{
return menuItem.Children.Count > 0 ? ChildTemplate : ParentTemplate;
}
return base.SelectTemplateCore(item, container);
}
}