如何在Windows Phone中获取绑定到longlistselector的json链接数据? [英] How to get json links data binded to longlistselector in windows phone?
问题描述
我有三个json链接.在它们中，一个链接包含类别(MenuCategory)，即(启动器，主菜)，两个链接其中包含(MenuItem)一些数据(项目名称，价格，图片).您可以在下图中看到，起动器和Maindishes是来自一个链接的标题，而起动器和Maindishes它们下方的项目来自两个不同的链接(.../menuitems/1和../menuitems/2).如图所示，如何将这些数据放入longlistselector中.我正在将Json数据导入我的应用程序，但需要在LLS中显示它们.如何将它们结合在一起?
// http://xxxxxx.net/restaurant/category/1
// http://xxxxxx.net//restaurant/menuitems/1 //和 http://xxxxxx.net/restaurant/menuitems/2
public class MenuItem
{
public int Menuitemid { get; set; }
public int Menucategoryid { get; set; }
public string Itemname { get; set; }
public double Price { get; set; }
public string Picture { get; set; }
}
public class MenuCategory
{
public int Menucategoryid { get; set; }
public int Menuid { get; set; }
public string Categoryname { get; set; }
public string Description { get; set; }
public bool Active { get; set; }
public string Createddate { get; set; }
public object Modifieddate { get; set; }
}
public class MenuCategoryRootObject
{
public List<MenuCategory> data { get; set; }
}
要在分组模式下使用LongListSelector，您需要将数据组成的格式与应用程序中使用的格式不同.最终，您将列表控件的ItemsSource绑定到一个可以看作List<List<T>>的属性，其中外部List可以是标准List对象，内部List<T>对象应包含MenuCategory的所有属性，并且类型T应该属于与MenuItem类似的类.以下类实现应提供实现此目标的一种方法的示例. MenuItemModel可能不应从实现中的MenuItem继承，但这只是出于演示的目的:
public class MenuCategoryModel : List<MenuItemModel>
{
public MenuCategoryModel() { }
public int Menucategoryid { get; set; }
public int Menuid { get; set; }
public string Categoryname { get; set; }
public string Description { get; set; }
public bool Active { get; set; }
public string Createddate { get; set; }
public object Modifieddate { get; set; }
}
public class MenuItemModel : MenuItem { }
如果要绑定到ViewModel，它将具有单个属性，可以将其用作LongListSelector的ItemsSource，如下所示:
public class MyViewModel
{
public MyViewModel() { }
public List<MenuCategoryModel> Categories { get; set; }
}
从此处开始，您的XAML标记可能类似于以下内容:
<phone:LongListSelector ItemsSource="{Binding Categories}"
IsGroupingEnabled="True">
<phone:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Grid Background="DarkSlateGray">
<TextBlock Style="{StaticResource PhoneTextTitle3Style}"
Text="{Binding Categoryname}"
FontWeight="Bold" />
</Grid>
</DataTemplate>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="LightGray"
BorderBrush="DarkSlateGray"
BorderThickness="0 0 0 1">
<StackPanel>
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Foreground="DarkSlateGray"
Text="{Binding Itemname}" />
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Foreground="DarkSlateGray"
Text="{Binding Price, StringFormat=C}" />
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
您可以看到LongListSelector的IsGroupingEnabled设置为true，以及GroupHeaderTemplate和ItemTemplate的定义.您甚至可以启用跳转模式，以允许用户点击组标题并在它们之间跳转，但是我在这里没有演示此功能.附件是此实现在设计器中的外观的示例屏幕截图.
I have three json links. In them, one link contains category(MenuCategory) namely (starters, maindishes) and two links contain (MenuItem)some data(Itemname, Price, Picture) in it. You can see in the below image, starters and Maindishes are headers which come from one link and the items below them for starters and Maindishes comes from two different links(.../menuitems/1 and ../menuitems/2). How to get this data into longlistselector as shown in the image. I am getting the Json data into my app but i need to display them inside the LLS. How to combine them?
// http://xxxxxx.net/restaurant/category/1
//http://xxxxxx.net//restaurant/menuitems/1 // and http://xxxxxx.net/restaurant/menuitems/2
public class MenuItem
{
public int Menuitemid { get; set; }
public int Menucategoryid { get; set; }
public string Itemname { get; set; }
public double Price { get; set; }
public string Picture { get; set; }
}
public class MenuCategory
{
public int Menucategoryid { get; set; }
public int Menuid { get; set; }
public string Categoryname { get; set; }
public string Description { get; set; }
public bool Active { get; set; }
public string Createddate { get; set; }
public object Modifieddate { get; set; }
}
public class MenuCategoryRootObject
{
public List<MenuCategory> data { get; set; }
}
To use LongListSelector in grouping mode, you'll need to compose your data into a different form than it probably comes to your application. Ultimately, you will be binding your list control's ItemsSource to a property that can be seen as a List<List<T>>, where the outer List can be a standard List object, the inner List<T> objects should contain all the properties of your MenuCategory, and the type T should be of some class similar to MenuItem. The following class implementations should give an example of one way to implement this goal. The MenuItemModel should probably not inherit from MenuItem in your implementation, but this is just for the purposes of demonstration:
public class MenuCategoryModel : List<MenuItemModel>
{
public MenuCategoryModel() { }
public int Menucategoryid { get; set; }
public int Menuid { get; set; }
public string Categoryname { get; set; }
public string Description { get; set; }
public bool Active { get; set; }
public string Createddate { get; set; }
public object Modifieddate { get; set; }
}
public class MenuItemModel : MenuItem { }
If you are binding to a ViewModel, it would have a single property you could use as an ItemsSource for your LongListSelector, like so:
public class MyViewModel
{
public MyViewModel() { }
public List<MenuCategoryModel> Categories { get; set; }
}
From there, your XAML markup might look something like the following:
<phone:LongListSelector ItemsSource="{Binding Categories}"
IsGroupingEnabled="True">
<phone:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Grid Background="DarkSlateGray">
<TextBlock Style="{StaticResource PhoneTextTitle3Style}"
Text="{Binding Categoryname}"
FontWeight="Bold" />
</Grid>
</DataTemplate>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="LightGray"
BorderBrush="DarkSlateGray"
BorderThickness="0 0 0 1">
<StackPanel>
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Foreground="DarkSlateGray"
Text="{Binding Itemname}" />
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Foreground="DarkSlateGray"
Text="{Binding Price, StringFormat=C}" />
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
You can see the LongListSelector has IsGroupingEnabled set to true and definitions for GroupHeaderTemplate and ItemTemplate. You can even enable jump mode to allow users to tap the group headers and jump between them, but I have not demonstrated this capability here. Attached is a sample screenshot of what this implementation looks like in the designer.
这篇关于如何在Windows Phone中获取绑定到longlistselector的json链接数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
