c# - json 到 Windows 应用商店应用程序 C# 中的新列表框项目

Question

我有一个适用于 Windows 8 的应用程序，它需要获取一个 Json 字符串并将其反序列化为 DATACONTRACTS，它会在具有最大高度的列表框中显示我希望的信息，如果大于最大高度则滚动。

我遇到的问题与其说不能做，不如说是不知道怎么做。

到目前为止，我可以反序列化 Json，我可以指定我希望每个项目进入 UI 的位置，但我想做的基本上是为数组中的每个项目创建一个新的 Stackpanel，使用 Textblocks 格式化那将有来自 Json 的信息。不幸的是，我不知道该怎么做，我真的不知道我在寻找什么来获得如何做的教程

这是我的代码，它使用辅助类从 json 中获取项目并将它们放入 TextBlocks 的文本中。

var _FilterSaleList = new FilterSalesList();
var _Sales = await _FilterSaleList.FindSalesbyFilters();
string _SaleName = _Sales.sales[0].name.ToString();
string _SaleDescription = _Sales.sales[0].description.ToString();
string _SaleName1 = _Sales.sales[1].name.ToString();
string _SaleDescription1 = _Sales.sales[1].description.ToString();
int _TotalResults = _Sales.sales.Length;
SaleTitle.Text = _SaleName;
SaleDescription.Text = _SaleDescription;
SaleTitle1.Text = _SaleName1;
SaleDescription1.Text = _SaleDescription1;

这是 Listbox 的 XAML 代码，其中已有 2 个 Stack 面板。

<ListBox Grid.Row="1">
    <StackPanel Margin="0,0,0,5">
        <TextBlock x:Name="SaleTitle" Text="" HorizontalAlignment="Center" Margin="0,0,0,5"/>
        <TextBlock x:Name="SaleDescription" Text="" HorizontalAlignment="Center" MaxHeight="40" Margin="0,0,0,5" TextWrapping="Wrap"/>                        
    </StackPanel>
    <StackPanel Margin="0,0,0,5">
        <TextBlock x:Name="SaleTitle1" Text="" HorizontalAlignment="Center" Margin="0,0,0,5"/>
        <TextBlock x:Name="SaleDescription1" Text="" HorizontalAlignment="Center" MaxHeight="40" Margin="0,0,0,5" TextWrapping="Wrap"/>
    </StackPanel>
</ListBox>

下面是一张我希望它看起来如何的图片。 尽管一切都像我说的那样工作，但我希望 json 中的每个项目都将创建一个新的堆栈面板并显示图像中的信息。我不知道完成此操作后它的名称是什么，所以即使是关于在哪里查看的简单提示也很棒!

http://puu.sh/2biMZ

Answer 1

在 XAML 中，有一个非常好的功能称为绑定(bind)，它允许您简单地将一个对象或一个对象列表绑定(bind)到可视元素。这样，您就不必在 C# 代码中手动“构建”图形用户界面。

这是一个非常大的话题，所以您可能应该看看什么是 MVVM，它将帮助您利用 Binding 的强大功能:http://channel9.msdn.com/Series/Building-Apps-for-Both-Windows-8-and-Windows-Phone-8-Jump-Start/Building-Apps-for-Both-Windows-8-and-Windows-Phone-8-03-Model-View-ViewModel

但是现在，您可以:

1/如下定义您的 ListBox，使用 ItemTemplate 属性的 DataTemplate:

<ListBox Grid.Row="1" x:Name="SalesListbox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,5">
                <TextBlock x:Name="SaleTitle" Text="{Binding name}" HorizontalAlignment="Center" Margin="0,0,0,5"/>
                <TextBlock x:Name="SaleDescription" Text="{Binding description}" HorizontalAlignment="Center" MaxHeight="40" Margin="0,0,0,5" TextWrapping="Wrap"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

DataTemplate 将告诉列表中的每一项应该如何呈现。您还应该注意到我们如何为每个文本 block 中的文本属性使用绑定(bind)。它绑定(bind)到 name 和 description，它们是模型中属性的名称。

然后你可以用你的数据填充你的列表框:

var filterSaleList = new FilterSalesList();
var salesByFilters = await filterSaleList.FindSalesbyFilters();
SalesListbox.ItemsSource = salesByFilters.sales;