0

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

as__
  • 77
  • 1
  • 10
  • Are you asking how to tell which items are the first and last when passed into the selecttemplatecore function? – Jon May 08 '15 at 16:46
  • Inside that DataTemplate SelectTemplate class, something like: // Determine which template to return; if (posttemplate != null) { return posttemplate ? BigCards : SmallCards; } return null; } is what I am looking for. But the upwritten "if" statement is not correct. – as__ May 08 '15 at 17:36
  • Since the DataTemplate can change when new items are added (the previous last item's DataTemplate changes from BigCards to SmallCards) I think you will need to add a property to your 'item' and implement a dataTrigger. See here:http://stackoverflow.com/questions/8715315/how-to-trigger-datatemplateselector-when-property-changes – Jon May 08 '15 at 19:16
  • Yes but before using dataTrigger, I just need to make sure the first and last items get proper data templates like described in the question. – as__ May 08 '15 at 20:45

1 Answers1

0

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.

as__
  • 77
  • 1
  • 10