Need help implementing DataTemplate Selector [WP8.1] [WindowsPhone]

Question

I have made a simple RSS Feed app using AppStudio, and as the title suggests, I need some help on implementing DataTemplateSelector.

I want the first and the last items of the feed to use "BigCards" item template, while the others to have the "SmallCards" item template.

Here is the code for the item template styling:

 <!-- BigCards Item --> <DataTemplate x:Key="BigCards"> <Grid Style="{StaticResource BoxGrid}" Margin="0,0,0,10" Height="380"> <Rectangle Width="900"/> <Grid Style="{StaticResource BoxGrid}"> <Grid.RowDefinitions> <RowDefinition Height="280"/> <RowDefinition Height="220"/> </Grid.RowDefinitions> <Image Grid.Row="0" Source="{Binding ImageUrl}" Stretch="UniformToFill" Margin="0,4,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Grid Grid.Row="1" Height="220" Margin="10,10,10,10"> <Grid Height="210"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Style="{StaticResource BoxTitleStyle}" Text="{Binding Title}" MaxLines="2"/> </Grid> </Grid> </Grid> </Grid> </DataTemplate> <!-- SmallCards Item --> <DataTemplate x:Key="SmallCards"> <Grid Height="120" Margin="0,0,0,10" Style="{StaticResource BoxGrid}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="{Binding ImageUrl}" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Grid Grid.Column="1"> <Rectangle Width="900" Height="0"/> <Grid Margin="16,5,16,5"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Style="{StaticResource BoxTitleStyle}" Text="{Binding Title}" MaxLines="2"/> <TextBlock Grid.Row="1" Margin="0,5,0,0" Style="{StaticResource BoxSubtitleStyle}" Text="{Binding Summary}"/> </Grid> </Grid> </Grid> 

Here is some code behind Mainpage.xaml.cs which is needed as a trigger between these item templates:

  //Listim dinamik i artikujve public abstract class TemplateSelector : ContentControl { public abstract DataTemplate SelectTemplate(object item, DependencyObject container); protected override void OnContentChanged(object oldContent, object newContent) { base.OnContentChanged(oldContent, newContent); ContentTemplate = SelectTemplate(newContent, this); } } //endof Abstract Class public class ArticleTemplateSelector : TemplateSelector { public DataTemplate BigCards { get; set; } public DataTemplate SmallCards { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { // Determine which template to return; return null; } } 

I would really appreciate if someone could help me on what I should insert in the DataTemplate SelectTemplate class so the first and the last item on my RSS Feed will use BigCards template, while the others will use SmallCards...?

Here is the Main Page xaml which as for the moment uses the BigCards template:

 <Hub x:Name="Container" Grid.Row="1" Margin="0,28,0,0" Background="{StaticResource AppBackground}" DataContext="{Binding}" SectionsInViewChanged="OnSectionsInViewChanged"> <HubSection x:Name="LajmetSection" Padding="0,-30,20,0" Width="400" DataContext="{Binding MainViewModel.LajmetModel}" d:DataContext="{d:DesignData Source=/Assets/Data/LajmetDataSource.json, Type=vm:LajmetViewModel, IsDesignTimeCreatable=true}" ContentTemplate="{StaticResource BigCards}" IsHeaderInteractive="{Binding HasMoreItems}" /> </Hub> 

Regards

Answer 1

I solved it in a different way. I modified the RSS page of my website in a way which would assign a static author for every 10th post. In my case I assigned every 10th post to "X" author. Then I implemented this simple statement

if (RssSchema.Author==X) use BigCards; else use SmallCards;

which does the job quite nicely. If anyone needs help feel free to contact me.