Windows Phone - 使用 Json 填充 ListBox

Question

我有一个保存在“IsolatedStorage”（json.html）中的 Json 文件，我需要用“FName”字段（来自 Json 文件）填充一个“ListBox”。

下面的Json，存储在文件（json.html）中并保存在 隔离存储。该文件将根据需要进行更改（同步 与网络服务器）。所以我需要这些字段作为“FNome”和“FEstado” 从“json.html”收到信息。

我的 Json 文件：

{"xId":"52","result":{"type":"Basico.Bean.MunicipioClass.TMunicipio","id":1,"fields":{"FRefCount":0,"FId":52,"FNome":"Sumare","FEstado":"SP","FPais":"Brasil"}}}

我的 Json 课：

        public class Fields
    {
        public int FId { get; set; }
        public string FNome { get; set; }
        public string FEstado { get; set; }
        public string FPais { get; set; }
    }

我的列表框：

 <ListBox x:Name="listBox1" 
             Height="192" Width="456" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Top" 
             BorderThickness="5"
             Padding="5"
             BorderBrush="White"
             FontSize="30"
             HorizontalContentAlignment="Stretch" Foreground="{x:Null}">
                    <ListBox.Background>
                        <SolidColorBrush Color="White" Opacity="0.5"/>
                    </ListBox.Background>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="200"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding FNome}"/>
                                <TextBlock Grid.Column="10" Text="{Binding FEstado}"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Answer 1

我假设您没有使用 MVVM design pattern 或任何“花哨”的东西，所以这里（几乎）是最小的工作示例供您学习。

首先，右键单击您的项目，选择Manage NuGet Packages 并安装Json.NET 依赖项。 Json.NET 包可帮助您处理 JSON 格式的数据。

安装后，这将是您的MainWindow.xaml。在这里，您可以定义在显示每个 ListBox 项时要使用的 ListBox 和模板。

<Window x:Class="MyWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="100"
        Width="420">

    <Grid>
        <!-- Your ListBox, notice the ItemsSource -->
        <ListBox 
             Height="50" 
             Width="400"
             FontSize="30"
             HorizontalContentAlignment="Stretch"
             ItemsSource="{Binding Items}">

            <!-- Template to display each item -->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <!-- Bind UI controls to properties you want to display -->
                        <TextBlock Grid.Column="0" Text="{Binding FId}"/>
                        <TextBlock Grid.Column="1" Text="{Binding FPais}"/>
                        <TextBlock Grid.Column="2" Text="{Binding FNome}"/>
                        <TextBlock Grid.Column="3" Text="{Binding FEstado}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>  

还有你的代码隐藏，即MainWindow.xaml.cs。为清楚起见，json 被定义为 const 字符串。

using System.Windows;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace MyWpfApplication
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            // Your JSON string
            const string json = 
                "{'xId':'52'," +
                "  'result':{" + 
                "    'type':'Basico.Bean.MunicipioClass.TMunicipio'," +
                "    'id':1," + 
                "    'fields':{" + 
                "      'FRefCount':0," +
                "      'FId':52," + 
                "      'FNome':'Sumare'," + 
                "      'FEstado':'SP'," + 
                "      'FPais':'Brasil'" + 
                "    }" + 
                "  }" + 
                "}";

            // Parse as JObject
            JObject jObj = JObject.Parse(json);

            // Extract what you need, the "fields" property
            JToken jToken = jObj["result"]["fields"];

            // Convert as Fields class instance
            Fields fields = jToken.ToObject<Fields>();

            // Assign to Items property, which is used as ListBox's ItemsSource
            // In real application you'd probably want to have more than one item :)
            Items = new ObservableCollection<Fields>() { fields };
        }

        public ObservableCollection<Fields> Items { get; set; }
    }
}

然后，当然，你也需要Fields 类。如果属性名称匹配，您可以自动将 JSON“映射”到 C# 类。如果你想在你的类属性中使用其他名称，比如简单的Id 而不是FId，那么你需要用 JsonProperty 属性标记属性。例如[JsonProperty(PropetyName = "FId)]。

public class Fields
{
    [JsonProperty(PropertyName = "FId")]
    public int FId { get; set; }

    public string FNome { get; set; }
    public string FEstado { get; set; }
    public string FPais { get; set; }
}

运行“应用程序”会得到以下输出