对于Json结构体items不完全一致的情况下，在UWP平台是如何处理数据，并通过不同的模板选择，进行显示呢？

一,嵌套Json分析

 

　　1,结构

　　　　通过抓取index的API（点击请求API）获取到的json，来看主页的数据是嵌套结构的Json，并且在Recs结构体中的items具有不完全一致性，结构如下图：

 

如上图所示，recs有若干子项，但是展开子项的items即可发现

 

还有其他就不依依列举图片出来了。

为了让开发工作更加简便，我们可以新建两个类：Hanju,CommonVideo，设置好各类别的各个字段

二,DataTemplate嵌套

①首先最基本的是最低层次的（单个视频，单个韩剧）

韩剧模板（图中那些转换器，宽度不必在意，后续文章会展开来讲）

 1 <DataTemplate x:Key="seriesTemplate">
 2             <Border Margin="2" Width="{Binding ElementName=hanjuThumb_width, Path=Width}">
 3                 <Grid>
 4                     <Grid.RowDefinitions>
 5                         <RowDefinition/>
 6                         <RowDefinition Height="20"/>
 7                     </Grid.RowDefinitions>
 8                     <RelativePanel CornerRadius="10">
 9                         <Image x:Name="thumb" Source="{Binding thumb}" HorizontalAlignment="Center"  Stretch="UniformToFill"/>
10                         <Image Source="/Assets/Icons/series_preview_icon.png" Visibility="{Binding isPreview,Converter={StaticResource BoolToVisibilityConverter}}" Height="40" RelativePanel.AlignRightWithPanel="True"/>
11                         <Image Source="/Assets/Icons/new_series.png" Visibility="{Binding updateTime,Converter={StaticResource IsNewUpdateConverter}}" Height="40" RelativePanel.AlignRightWithPanel="True"/>
12                         <Image Source="/Assets/Icons/live_ing.png" Visibility="{Binding living,Converter={StaticResource SeriesLivingImgShowConverter}}" RelativePanel.AlignRightWithPanel="True" Height="30"/>
13                         <TextBlock Text="{Binding count}" Foreground="White" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True"/>
14                     <TextBlock  Text="{Binding rank}" Foreground="White" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True"/>
15                 </RelativePanel>
16                 <TextBlock Grid.Row="2" Text="{Binding name}" HorizontalAlignment="Center" TextWrapping="Wrap" Foreground="Black" FontSize="15"/>
17                 </Grid>
18             </Border>
19             </DataTemplate>

韩剧模板

 

视频模板

<DataTemplatex:Key="videoTemplate"><BorderMargin="2"Width="{BindingElementName=videoThumb_width,Path=Width}"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinitionHeight="40"/></Grid.RowDefinitions><ImageSource="{Bindingthumb}"Stretch="UniformToFill"/><TextBlockGrid.Row="2"Text="{Bindingtitle}"TextTrimming="WordEllipsis"Foreground="Black"FontSize="15"TextWrapping="Wrap"/></Grid></Border></DataTemplate>

视频模板

 

直播模板

 <DataTemplate x:Key="liveTemplate">
            <RelativePanel Width="{Binding ElementName=videoThumb_width,Path=Width}">
                <Image Source="{Binding thumb}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                <Image Source="/Assets/Icons/star_living.png" Width="50" Margin="5" RelativePanel.AlignRightWithPanel="True"/>
                <TextBlock Text="{Binding longTitle}" Foreground="White" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignBottomWithPanel="True"/>
                <TextBlock Text="{Binding online}" Foreground="White" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True"/>
            </RelativePanel>
            </DataTemplate>

直播模板

 

②其次是高一层次的模板，上述模板是下列这些的子项（整个韩剧集合，整个视频分类集合，GridView从左往右放单个视频）

<!--模板1韩剧-->
            <DataTemplate x:Key="DataTemplate1">
            <GridView IsItemClickEnabled="True" ItemClick="Hanju_ItemClick" Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='
版权声明：本文为Big-Head原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Big-Head/p/10376403.html