本帖最后由 qiqiminmin 于 2015-12-19 22:09 编辑

这个帖子我来讨论讨论itemsControl,(￣▽￣)"，只是介绍，个人观点，个人经验，我自己很受用的。
itemsControl应用很广泛，很久以前，论坛有人还惊诧的跟我说，你怎么还用ItemsControl, 用ListView或ListBox都好一些。其实ListView和ListBox都是ItemsControl. 个人喜欢，不太喜欢ListBox和ListView的限制，所以一直用itemsControl.

想到之前有一个关于淘宝html5版本的争论，还有个帖子利用json数据说各个平台差不多都是一样的。

其实有个误区，josn数据只是数据，显示出来的效果就千差万别了，为什么？其实还是取决是显示的UI的人以及显示的平台(其实Windows 10的html5上，在svg,httpCilent等方面都有一些问题或者bug)，客户端的数据相对于服务端的数据说白了，是非常容易的,有的软件甚至不保存到本地，全部实时获取。 为什么唯独Windows Runtime平台总是觉得缺啥。应该讲是ItemsControl以及 数据的Binding上的天生不足，正因为不足所以就要引起足够的重视了。

还有之前我一个帖子有人提到，界面都是美工画好，然后程序员在VS中调位置。如果都这么做，那么json变化，UI也要变化了，其实在实际的UI编程中，都是尽量搭建一个数据可以显示的平台，要做到，最后数据自己找到自己要显示的地方。VS中编写Xaml最好只做个模板. 我在VS里编号XAML之后一般长这个样子,对，其实啥都没有。
***附件停止解析***



首先我们来假设我们的json数据叫做showCase
{
title:'所有数据';
data_body:[
{
id:'1',
show_case_title:'今日更新',
items:[
{
title:'课本1',
image:'1.jpg'
},
{
title:'课本1',
image:'1.jpg'
}
]
},
{
show_case_title:'烤鸭中心',
items:[''],}........
];

}.....


看到这里，一定要一开始就抓住Array,还有互相嵌套。在html5中，可以这样
[mw_shl_code=html,true]<div ng-repeat="n in data_body">
<div >{{n.show_case_title}}</div>
<div ng-repeat="m in n.items">
<img ng-src={{m.image}}>
<div>{{m.title}}</div>
</div>
</div>[/mw_shl_code]
简洁，方便。

但没办法，还是要在Xaml中实现。记得使用itemsCongtrol要设置 itemsSource哦， 可以binding，也可是手工设置，但是嵌套的第二个itemsControl只需Binding即可
[mw_shl_code=html,true]<ItemsControl VirtualizingStackPanel.VirtualizationMode="Recycling" x:Name="showCase">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" FromVerticalOffset="0"
FromHorizontalOffset="-100">

</EntranceThemeTransition>

</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Grid Margin="15">
<StackPanel>
<Grid Margin="0 5">
<Border BorderBrush="{StaticResource main-color}" BorderThickness="5 0 0 0"></Border>
<Viewbox VerticalAlignment="Center" Height="20" Margin="10 0 0 0" HorizontalAlignment="Left">
<TextBlock Style="{StaticResource tabText}" Text="{Binding header.title}"></TextBlock>
</Viewbox>
<Viewbox VerticalAlignment="Center" Height="20" Margin="10 0 0 0" HorizontalAlignment="Right">
<TextBlock Foreground="Gray" Text="{Binding header.indicator}"></TextBlock>
</Viewbox>
</Grid>


<ItemsControl ItemsPanel="{Binding id,Converter={StaticResource itemToTemplate},ConverterParameter=panel}" ItemTemplate="{Binding id,Converter={StaticResource itemToTemplate},ConverterParameter=data}" ItemsSource="{Binding body.items}" >

</ItemsControl>

</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
[/mw_shl_code]

也许大家就简单认为，也就是显示一些图和字啦，没什么。
问题就在这里，其实第一层Array，可能有不同的showCase, 不同的showCase会有不同的显示方法。

有竖着排列的，有一排三个的
***附件停止解析***

还有一排两个的
***附件停止解析***

这是怎么弄得？所以要熟练的绑定ItemTemplate，和ItemPanel的binding.还有最重要的一点 valueConventer.
<ItemsControl ItemsPanel="{Binding id,Converter={StaticResource itemToTemplate},ConverterParameter=panel}" ItemTemplate="{Binding id,Converter={StaticResource itemToTemplate},ConverterParameter=data}" ItemsSource="{Binding body.items}" >
</ItemsControl>

只要设置好数据中的类别,只要能区分，那么就可以通过valueConventer设置自己需要的东西了。一般长这个样子，我建议只写一个 Conventer,多次利用Parameter得到自己想要的东西就行了。
[mw_shl_code=csharp,true]public object Convert(object value, Type targetType, object parameter, string language)
{
if (parameter.ToString() == "data")
{
if (value.ToString() == "new_episode" || value.ToString() == "new_course")
{

return App.Current.Resources["todayUpdate"];
}
else
{
return App.Current.Resources["normal"];
}
}
else if (parameter.ToString() == "todayText")
{
var item = value as Item;

return string.Format("{0:0.00} M",System.Convert.ToDouble(item.audio_file_size) / 1000);
}
else if (parameter.ToString() == "panel")
{

if (value.ToString() == "new_episode" || value.ToString() == "new_course")
{

return App.Current.Resources["stackPanel"];
}
else if (value.ToString().Trim() == "1")
{
return App.Current.Resources["bigWrapPanel"];
}
else
{
return App.Current.Resources["wrapPanel"];
}

}


return App.Current.Resources["normal"];

}
[/mw_shl_code]

剩下就是写Resources，(￣▽￣)"，希望这些对一些人能有启发，我的东西并不是说该怎么做，只是个人经验而已。Xaml功能还是蛮强大的，只有不勤奋的攻城狮和有限的项目进度才是拦路虎。
大概长这个样子。我本人是非常喜欢C#和Windows平台，但自跨平台开发以来，常常觉得有时候你要付出吃奶的劲，才能做去其他平台喝口水功夫的东西。心里总有一些不舍，但也发现，目前uwp平台的上开发，阻止html5发展更加快速发展的方法，也许只有继续让平台不完善。
[mw_shl_code=html,true]<ItemsPanelTemplate x:Key="bigWrapPanel">

<toolkit:UniformGrid Columns="2"></toolkit:UniformGrid>
</ItemsPanelTemplate>

<ItemsPanelTemplate x:Key="wrapPanel">
<toolkit:UniformGrid Columns="3"></toolkit:UniformGrid>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="stackPanel">
<StackPanel>

</StackPanel>
</ItemsPanelTemplate>
[/mw_shl_code]