How to display items horizontally in a listbox control?

Question

I am developing window phone 7 application. I am new to the window phone 7 application. I have the following listbox 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>

In the above listbox control items are displayed vertically. I want to display the items in a listbox control horizonatlly. So I am using the following code.

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

but when I put the two textblock inside stackpanel it gives error. For this I am using 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 for the following code. In the following code I am getting 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 am getting the error "Cannot explicitly modify children collection of Panel used as ItemsPanel for ItemsControl.ItemsControl geneartes child elements for Panel"

I am using the following function to display the data in the 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 coming dynamically. There can be two, three or more records also there can be no record. I am binding this dynamic data to the textblocks which are inside the listbox

I am using 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 textbock inside the listbox which will display the items horizonatlly ? Can you please provide me any code or link through which I can resolve the above issue ? If I am doing anything wrong then please guide me.

Answer 1

It looks to me like you've got the two text blocks inside the wrong part of the template.

These two text blocks should be in the ListBox.ItemTemplate, not in the 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, then start from a working "basic" control which shows items and then look at adding the ItemsPanelTemplate to that working sample.