xamlwindows-phone-8datatemplatealignmentlonglistselector

Horizontal list inside LongListSelector


Im trying to approach following LongListSelector item:

List item text
SubItem 1 SubItem 2 SubItem 3

So the list item has one line of text ("List item text") and nested horizontal list (SubItem 1 SubItem 2...).

I have tried to build this using ItemTemplate with data template etc but can not get nested list workin.

My source data is in following format:

public class Data
{
    public string title{ get; set; }
    public List<SubItem> SubItems{ get; set; }

}

All examples are welcome :)


Solution

  • You can define ItemsPanel to either WP Toolkit's WrapPanel or just <StackPanel Orientation="Horizontal" />

    <phone:LongListSelector ItemsSource="{Binding Data}">
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Title}" />
                    <ListBox ItemsSource="{Binding SubItems}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding SubItemTitle}" Margin="0,0,12,0" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
    

    You can see I am using ListBox in the inner list because to my knowledge LongListSelector doesn't expose that.