如何在列表框控件中水平显示项目？

Question

我正在开发Windows Phone 7应用程序。我对Windows Phone 7应用程序还很陌生。我在我的应用程序中有以下列表框控件：

<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>

在上面的列表框控件中，项目是垂直显示的。我想要在列表框控件中水平显示项目。因此，我使用以下代码。

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

但是当我把两个文本块放在堆栈面板中时，它会出现错误。为此，我使用以下代码：

<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>

我正在尝试以下代码。在下面的代码中，我遇到了错误。

<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>

我正在遇到一个错误：“Cannot explicitly modify children collection of Panel used as ItemsPanel for ItemsControl.ItemsControl generates child elements for Panel”。

我正在使用以下函数在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;
    }
}

在上述函数中，数据是动态获取的。可能有两条、三条或更多记录，也可能没有记录。我将这些动态数据绑定到列表框内部的文本块中。

我使用了上述代码中使用的以下类。

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;
    }
}

我该如何将上述两个文本块放置在列表框内，以横向方式显示项目？你能否提供任何代码或链接来解决上述问题？如果我做错了什么，请指导我。

- Shailesh Jaiswal

---

如果我拥有一美元（英镑、欧元，或其他）每看到一个包含“我收到了一个错误”但实际上没有包含具体错误信息的问题，我觉得我现在就可以退休了。请注意，这里不需要解释。 - AnthonyWJones

我已修改了我的问题并描述了我遇到的错误。请查看。 - Shailesh Jaiswal

感谢您更新了您的问题，但我仍然无法完全理解您在做什么。您能否请提供一个完整的示例（xaml和CS），以演示您正在尝试的内容。 - Matt Lacey

我已经更新了问题，包含所需的详细信息。请查看问题。 - Shailesh Jaiswal

Answer 1

看起来你把这两个文本块放在了错误的模板中。

这两个文本块应该放在ListBox.ItemTemplate而不是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>

如果你想了解这个控件的工作原理，那么可以从一个显示项目的“基本”控件开始，然后再看如何将ItemsPanelTemplate添加到该示例中。

- Stuart

---

我也尝试了上述代码，但它将记录垂直显示。一对金额和货币的记录显示在一行中，然后对于下一对，记录显示在下一行中。我想要在一行中显示所有记录的一对。 - Shailesh Jaiswal

Answer 2

将 DataContext="{Binding}" 替换为 ItemsSource="{Binding}" 对我来说是有效的。

- Emond

---

这个也不起作用。我已经修改了我的问题，请查看。 - Shailesh Jaiswal