How to display items horizontally in a list control?

Question

I am developing an application for Windows Phone 7. I am new to Windows Phone 7. I have the following list control in my application

<ListBox Margin="0,355,70,205" Name="WeekSummaryListBox" DataContext="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> <ListBox.Template> <ControlTemplate> <ScrollViewer HorizontalScrollBarVisibility="Visible"> <ItemsPresenter /> </ScrollViewer> </ControlTemplate> </ListBox.Template> </ListBox> 

The above list controls are displayed vertically. I want to display items in a listbox horizonatlly control. Therefore, I use the following code.

 <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> 

but when I put two text blocks inside the stack panel, it gives an error. For this, I use the following code

 <StackPanel Orientation="Horizontal"> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock> </StackPanel> 

I am trying to use the following code. In the following code I get an error

 <ListBox Margin="0,355,70,205" Name="WeekSummaryListBox" DataContext="{Binding}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock> </StackPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.Template> <ControlTemplate> <ScrollViewer HorizontalScrollBarVisibility="Visible"> <ItemsPresenter /> </ScrollViewer> </ControlTemplate> </ListBox.Template> </ListBox> 

I get the error message "It is not possible to explicitly modify the Panel child collection used as the ItemPanel for ItemsControl.ItemsControl genartes of the children of the panel"

I use the following function to display data in a ListBox:

 public void WeekSumValue(int TransactionType_ID) { UserInterfaceManager UserInterfaceManagerObj = new UserInterfaceManager(); List<UserInterfaceManager.TotalSummary> WeekSummary = new List<UserInterfaceManager.TotalSummary>(); ObservableCollection<AmountCurrency> WeekIncomeSumCollection = new ObservableCollection<AmountCurrency>(); WeekSummary = UserInterfaceManagerObj.LoadWeekSum(SelectedButtonName, TransactionType_ID, selectedDate); foreach (UserInterfaceManager.TotalSummary vWeekSummary in WeekSummary) { WeekIncomeSumCollection.Add(new AmountCurrency(vWeekSummary.Amount, vWeekSummary.Currency)); } if (WeekIncomeSumCollection.Count != 0 && SummaryCombobox.SelectedIndex == 0) { WeekSummaryListBox.ItemsSource = WeekIncomeSumCollection; } else if (WeekIncomeSumCollection.Count != 0 && SummaryCombobox.SelectedIndex == 2) { MonthSummaryListBox.ItemsSource = WeekIncomeSumCollection; } else { ObservableCollection<TextBlock> NoRecordsCollection = new ObservableCollection<TextBlock>(); TextBlock NoRecordsTextBlock = new TextBlock(); NoRecordsTextBlock.Text = "No record found"; NoRecordsTextBlock.FontSize = 25; NoRecordsTextBlock.Foreground = new SolidColorBrush(Colors.Gray); NoRecordsCollection.Add(NoRecordsTextBlock); if (SummaryCombobox.SelectedIndex == 0) WeekSummaryListBox.ItemsSource = NoRecordsCollection; if (SummaryCombobox.SelectedIndex == 2) MonthSummaryListBox.ItemsSource = NoRecordsCollection; } } 

In the above function, data is delivered dynamically. There may be two, three or more records, nor can there be records. I bind this dynamic data to text blocks that are inside the list.

I use the following class used in the above code

 public class AmountCurrency { public int Amount { get; set; } public String Currency { get; set; } public AmountCurrency(int Amount, String Currency) { this.Amount = Amount; this.Currency = Currency; } } 

How should I put the above two text blocks inside a list that will display elements horizontally? Can you provide me any code or link through which I can solve the above problem? If I am doing something wrong, then please guide me.

Answer 1

It seems to me that you have two text blocks inside the wrong part of the template.

These two text blocks should be in ListBox.ItemTemplate , and not in ListBox.ItemsPanelTemplate :

 <ListBox ItemsSource="{Binding Items}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"></StackPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17" Width="300" Orientation="Horizontal"> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock> <TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 

If you want to understand how this control works, start with a working “base” control that shows the elements , and then look at adding an ItemsPanelTemplate to this working sample.

Answer 2

Replace DataContext="{Binding}" with ItemsSource="{Binding}" , which works for me.