UWP開發---嵌套DataTemplate&模板選擇器

時間 2019-11-07

標籤 uwp 開發嵌套 datatemplate 模板選擇器简体版

原文原文鏈接

對於Json結構體items不徹底一致的狀況下，在UWP平臺是如何處理數據，並經過不一樣的模板選擇，進行顯示呢？json

【嵌套Json分析】

[結構]

　　經過抓取index的API（點擊請求API）獲取到的json，來看主頁的數據是嵌套結構的Json，而且在Recs結構體中的items具備不徹底一致性，結構以下圖：api

如上圖所示，recs有若干子項，可是展開子項的items便可發現app

還有其餘就不依依列舉圖片出來了。ide

爲了讓開發工做更加簡便，咱們能夠新建兩個類：Hanju,CommonVideo，設置好各種別的各個字段
spa

【DataTemplate嵌套】

[最低層次]

（韓劇，直播，視頻等最外層的數據）3d

韓劇模板（圖中那些轉換器，寬度沒必要在乎，後續文章會展開來說）code

 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>

韓劇模板

視頻模板orm

<DataTemplate x:Key="videoTemplate">
            <Border Margin="2" Width="{Binding ElementName=videoThumb_width,Path=Width}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="40"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding thumb}" Stretch="UniformToFill"/>
                    <TextBlock Grid.Row="2" Text="{Binding title}" 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從左往右放單個視頻）xml

<!--模板1韓劇-->
            <DataTemplate x:Key="DataTemplate1">
            <GridView IsItemClickEnabled="True" ItemClick="Hanju_ItemClick" Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='💕{0}>>'}" ItemsSource="{Binding items}" ItemTemplate="{StaticResource seriesTemplate}"/>
            </DataTemplate>
            <!--模板2明星視頻-->
            <DataTemplate x:Key="DataTemplate2">
            <GridView IsItemClickEnabled="True" ItemClick="Video_ItemClick"  Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='💕{0}>>'}" ItemsSource="{Binding items}" ItemTemplate="{StaticResource videoTemplate}"/>
            </DataTemplate>
            <!--模板3其餘視頻-->
            <DataTemplate x:Key="DataTemplate3">
            <GridView  Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='💕{0}>>'}" ItemsSource="{Binding items}" ItemTemplate="{StaticResource videoTemplate}"/>
            </DataTemplate>
            <!--模板4直播-->
            <DataTemplate x:Key="DataTemplate4">
            <GridView  Visibility="{Binding extItems,Converter={StaticResource VisibilityConverter}}" Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='💕{0}>>'}" ItemsSource="{Binding extItems}" ItemTemplate="{StaticResource liveTemplate}"/>
            </DataTemplate>
            <!--模板5熱門視頻-->
            <DataTemplate x:Key="DataTemplate5">
            <GridView Header="{Binding title,Converter={StaticResource StringFormatConverter},ConverterParameter='💕{0}>>'}" ItemsSource="{Binding items}" ItemTemplate="{StaticResource videoTemplate}"/>
            </DataTemplate>

模板合集

[最高層次]

<ListView HorizontalAlignment="Center" SelectionMode="None" ItemsSource="recs" ItemTemplateSelector="{StaticResource Selector}" x:Name="lvRecs"/>

【模板選擇器】

<Tools:MyTemplateSelector x:Key="Selector" x:Name="MyTemplateSelector" DataTemplate1="{StaticResource DataTemplate1}" DataTemplate2="{StaticResource DataTemplate2}" DataTemplate3="{StaticResource DataTemplate3}" DataTemplate4="{StaticResource DataTemplate4}" DataTemplate5="{StaticResource DataTemplate5}"/>

引入模板選擇器

注意：在前臺要引入自定義模板選擇器的命名空間

xmlns:Tools="using:韓劇TV.Tools"

而後在listview裏面加入ItemTemplateSelector="{StaticResource Selector}"

（見：2.3）

在json分析中能夠看到，每個視頻分類都有一個type字段，應該也是安卓控制模板選擇的標誌。咱們能夠根據這個type來選擇不一樣的模板進行適配items項，那麼Selector的後臺代碼以下：

namespace 韓劇TV.Tools
{
    class MyTemplateSelector:DataTemplateSelector
    {
        public DataTemplate DataTemplate1 { get; set; }
        public DataTemplate DataTemplate2 { get; set; }
        public DataTemplate DataTemplate3 { get; set; }
        public DataTemplate DataTemplate4 { get; set; }
        public DataTemplate DataTemplate5 { get; set; }
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            Recs rec = item as Recs;
            try
            {
                switch (rec.type)
                {
                    case 1:
                        return DataTemplate1;
                    case 2:
                        return DataTemplate2;
                    case 3:
                        return DataTemplate3;
                    case 4:
                        return DataTemplate4;
                    case 5:
                        return DataTemplate5;
                    default:
                        break;
                }
            }
            catch
            {
                return null;
            }
            return base.SelectTemplate(item, container);
        }
    }
}