adding custom item in collection view every 10 items.

theConfusedOnetheConfusedOne Member ✭✭✭
edited November 24 in Xamarin.Forms

i need to add a google ad every ten items in a collection view. but if i added an ad to the collection view datatemplate now it would show after every single post.

 <?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:vm="clr-namespace:Kula.ViewModels"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"            
         mc:Ignorable="d"
         x:Class="Kula.SocialFeed"
         BackgroundColor="White"
         Title="Social Feed Collection View"

         >
<ContentPage.BindingContext>
    <vm:SocialFeedTileViewModel/>

</ContentPage.BindingContext>
<ContentPage.Content>

        <CollectionView ItemsSource="{Binding SocialFeedTiles}">
            <CollectionView.ItemTemplate>
                <DataTemplate>

                <StackLayout Padding="0,0,0,5">
                    <Frame  Padding="0" HeightRequest="50" CornerRadius="10"    HasShadow="False"  >
                        <Grid Padding="0" ColumnSpacing="5" Margin="0,3,0,0">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width=".15*"/>
                                <ColumnDefinition Width=".75*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height=".95*"/>
                                <RowDefinition Height=".05*"/>

                            </Grid.RowDefinitions>

                            <Image Grid.Column="0" Source="{Binding ProfilePhotoUrl} " Grid.Row="0" Aspect="AspectFit"/>

                            <StackLayout VerticalOptions="Center"  Grid.Column="1" Grid.Row="0">
                                <Label Text="{Binding Username}" FontSize="10" />
                              <Label Text="{Binding FullName}" FontSize="15"  />
                            </StackLayout>
                            <Frame Grid.ColumnSpan="2"
                                   Grid.Row="1" 
                                   BackgroundColor="#FF6F00" 
                                   HasShadow="False"
                                   CornerRadius=".025" 
                                   Margin="7,.05,7,0"
                                   Padding="0">

                            </Frame>
                        </Grid>
                    </Frame>
                    <StackLayout x:Name="post" >
                        <Image Source="{Binding PostUrl}" Aspect="AspectFill" />
                    </StackLayout>
                    <Frame  Padding="0" HeightRequest="55" CornerRadius="10" HasShadow="False"  >
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width=".155*"/>
                                <ColumnDefinition Width=".155*"/>
                                <ColumnDefinition Width=".155*"/>
                                <ColumnDefinition Width=".535*"/>
                            </Grid.ColumnDefinitions>

                            <Grid Grid.Column="0" Padding="0" RowSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=".7*"/>
                                    <RowDefinition Height=".25*"/>
                                    <RowDefinition Height=".05*"/>
                                </Grid.RowDefinitions>
                                <ImageButton Grid.Row="0"  />
                                <Label  Text="likes" FontSize="Micro" Grid.Row="1" HorizontalOptions="CenterAndExpand" />
                                <BoxView  Grid.Row="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
                            </Grid>
                            <Grid Grid.Column="1" RowSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=".7*"/>
                                    <RowDefinition Height=".25*"/>
                                    <RowDefinition Height=".05*"/>
                                </Grid.RowDefinitions>
                                <ImageButton Grid.Row="0" />
                                <Label Text="comments" FontSize="Micro" Grid.Row="1" HorizontalOptions="CenterAndExpand" />
                                <BoxView Grid.Row="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />


                            </Grid>
                            <Grid Grid.Column="2" RowSpacing="0" >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=".7*"/>
                                    <RowDefinition Height=".25*"/>
                                    <RowDefinition Height=".05*"/>
                                </Grid.RowDefinitions>
                                <ImageButton Grid.Row="0" />
                                <Label Text="share" FontSize="Micro" Grid.Row="1" HorizontalOptions="CenterAndExpand" />
                                <BoxView Grid.Row="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />

                            </Grid>

                        </Grid>
                    </Frame>
                </StackLayout>


                <!--<Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding ProfilePhotoUrl}" Grid.Column="0"/>
                        <StackLayout Orientation="Vertical" Grid.Column="1">
                            <Label Text="{Binding Username}" FontSize="Title"/>
                            <Label Text="{Binding FullName}" FontSize="Subtitle"/>
                        </StackLayout>
                    </Grid>-->

                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>


</ContentPage.Content>

Answers

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai

    @theConfusedOne Hi , maybe can add ad data in ViewModel ,then display ads in the collectionview according to different data types . I will check it continuely , if good solution will update here .

  • theConfusedOnetheConfusedOne Member ✭✭✭

    @JuniorJiang said:
    @theConfusedOne Hi , maybe can add ad data in ViewModel ,then display ads in the collectionview according to different data types . I will check it continuely , if good solution will update here .

    would this work because google admob requires iits own xamal i think

  • theConfusedOnetheConfusedOne Member ✭✭✭

    @JuniorJiang said:
    @theConfusedOne Hi , maybe can add ad data in ViewModel ,then display ads in the collectionview according to different data types . I will check it continuely , if good solution will update here .

    could you maybe think of another way not involving collection view that i can add an ad after every 10 posts while being able to load data incrementally and refresh the page. also maybe ass other forms of posts without a picture(like a tweet)

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai

    @theConfusedOne I know that native listview can custom cell when needed cell . However , it seems can not do this in Forms . Therefore , this maybe need custom renderer to realize it .

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/listview

  • theConfusedOnetheConfusedOne Member ✭✭✭
    edited November 26

    @JuniorJiang said:
    @theConfusedOne I know that native listview can custom cell when needed cell . However , it seems can not do this in Forms . Therefore , this maybe need custom renderer to realize it .

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/listview

    im pretty new to xamarin so im wondering should i be worried a about performance using that? like the emulator skipping frames and putting a big load on the device. instagram adds a ad every so many items somehow but i need to able to add adob xamal as well as a picture posts format and a just written text post and for every one of those items coming from the database they need to be organized by date posted

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    You want something more like a DataTemplateSelector.

    Then your Data Source can have 9 items, an ad, 9 items, ad.

    And when you find your ad items, the data template selected is an ad view, not a cell view

  • theConfusedOnetheConfusedOne Member ✭✭✭

    @AdamMeaney said:
    You want something more like a DataTemplateSelector.

    Then your Data Source can have 9 items, an ad, 9 items, ad.

    And when you find your ad items, the data template selected is an ad view, not a cell view

    would i also be able to slide in text posts because a post has two formats one with a picture one without and they will be in random orders depending on when the people posted them

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    A data template selector is just a switch statement taking an item from a list and assigning it a template.

    public class ImagePost : IPost
    {
    // Stuff
    }
    
    public class TextPost : IPost
    {
    // Stuff
    }
    
    public class AdPost : IPost
    {
    // Stuff
    }
    
        public class DataTemplateSelectors : DataTemplateSelector
        {
            public DataTemplate AdTemplate { get; }
            public DataTemplate TextTemplate { get; }
            public DataTemplate ImageTemplate { get; }
    
            public DataTemplateSelectors()
            {
                AdTemplate = new DataTemplate(typeof(Cell));
                TextTemplate = new DataTemplate(typeof(Cell));
                ImageTemplate = new DataTemplate(typeof(Cell));
            }
    
    
            protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
            {
                switch (item)
                {
                    case ImagePost image:
                    {
                        return ImageTemplate;
                    }
                    case TextPost text:
                    {
                        return TextTemplate;
                    }
                    case AdPost ad:
                    {
                        return AdTemplate;
                    }
                }
    
                return null;
            }
        }
    
        public class PostViewModel
        {
            private ObservableCollection<IPost> _Posts;
    
            public ObservableCollection<IPost> Posts
            {
                get => _Posts;
                set
                {
                    _Posts = value;
                    OnPropertyChanged();
                }
            }
        }
    
    

    If you fill that list up with the different posts, you should be good.

  • theConfusedOnetheConfusedOne Member ✭✭✭
    edited November 26

    @AdamMeaney said:
    A data template selector is just a switch statement taking an item from a list and assigning it a template.

    public class ImagePost : IPost
    {
    // Stuff
    }
    
    public class TextPost : IPost
    {
    // Stuff
    }
    
    public class AdPost : IPost
    {
    // Stuff
    }
    
        public class DataTemplateSelectors : DataTemplateSelector
        {
            public DataTemplate AdTemplate { get; }
            public DataTemplate TextTemplate { get; }
            public DataTemplate ImageTemplate { get; }
    
            public DataTemplateSelectors()
            {
                AdTemplate = new DataTemplate(typeof(Cell));
                TextTemplate = new DataTemplate(typeof(Cell));
                ImageTemplate = new DataTemplate(typeof(Cell));
            }
    
    
            protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
            {
                switch (item)
                {
                    case ImagePost image:
                    {
                        return ImageTemplate;
                    }
                    case TextPost text:
                    {
                        return TextTemplate;
                    }
                    case AdPost ad:
                    {
                        return AdTemplate;
                    }
                }
    
                return null;
            }
        }
    
        public class PostViewModel
        {
            private ObservableCollection<IPost> _Posts;
    
            public ObservableCollection<IPost> Posts
            {
                get => _Posts;
                set
                {
                    _Posts = value;
                    OnPropertyChanged();
                }
            }
        }
    
    

    If you fill that list up with the different posts, you should be good.

    so this can only be done in a custom rendered listview? and i will also be able to load data incrementally and refresh feed? if so awesome. and will adapt to how many photos in the feed

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    That code can be done in a standard listview as well. It should work for a custom listview as long as you don't weirdly break it, but I would personally recommend using a CollectionView now.

    This page shows a few properties that might be useful for the scenario you were thinking of needing a custom listview for.

    RemainingItemsThreshold and PullToRefresh are both things in there.

  • theConfusedOnetheConfusedOne Member ✭✭✭
    edited November 26

    @AdamMeaney said:
    That code can be done in a standard listview as well. It should work for a custom listview as long as you don't weirdly break it, but I would personally recommend using a CollectionView now.

    This page shows a few properties that might be useful for the scenario you were thinking of needing a custom listview for.

    RemainingItemsThreshold and PullToRefresh are both things in there.

    wait so the code you showed were you can choose between ad text and photo post can be done in a collection view? cause that would be awesome if it did. with the early feedback i assumed using a collection view for this application was impossible. but i dont use c# to make graphics much other then basic bindings so in your example would adTemplate,textTemplate,Imagetemplate be xamal files that i make? and if not how do i choose the look of the cells. because from my knowledge admob has to have the admob xamal i think. because i got the node js backend set up to deliver the posts as objects. the reason im being so picky is i wanna release this app and want to make it small and fast as possible

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    Yes, my DataTemplateSelector works for CollectionViews.

    Your DataTemplates can be their own Xaml classes that are for ViewCell classes you define in their own files, DataTemplates you load from the App.xaml, or anywhere else you can get it from, as long as you can make the template.

    Some people make them public properties that you can assign from XAML so you can just create the whole selector in xaml, aside from that switch statement.

    If you open the link I sent, there is an example of a DatatTemplateSelector that is much more XAML based in the section on DataTemplateSelectors.

  • theConfusedOnetheConfusedOne Member ✭✭✭

    @AdamMeaney said:
    Yes, my DataTemplateSelector works for CollectionViews.

    Your DataTemplates can be their own Xaml classes that are for ViewCell classes you define in their own files, DataTemplates you load from the App.xaml, or anywhere else you can get it from, as long as you can make the template.

    Some people make them public properties that you can assign from XAML so you can just create the whole selector in xaml, aside from that switch statement.

    If you open the link I sent, there is an example of a DatatTemplateSelector that is much more XAML based in the section on DataTemplateSelectors.

    im having some trouble implementing it due to be being a beginner. can you show a full example if its not too much work. with xamal and the binding classes.

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    The link I posted earlier has source code you can download to take a look at if you are struggling.

    In particular, the xaml here, along with the associated ViewModels and other code files, should be helpful.

  • theConfusedOnetheConfusedOne Member ✭✭✭
    edited December 3

    @AdamMeaney said:
    The link I posted earlier has source code you can download to take a look at if you are struggling.

    In particular, the xaml here, along with the associated ViewModels and other code files, should be helpful.

    im trying but i am getting alot of errors trying to figure it out in your example it inherits from datatemplateselector where is that or is that a feature in a package it says it does not exist any help would be awesome
    also is IPost an empty class or has something in it also in//stuff what would go there

  • theConfusedOnetheConfusedOne Member ✭✭✭
    edited December 3

    also the view model they show vs you show are very different and im having a difficult time implementing it still. any help would be awesome. also you say fill that list with posts what list im not sure where IPosts came from or how to put them in Posts_ . is there a github you took that exact example from that would be cool.

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    DataTemplateSelector is a Xamarin Forms class. If you don't have access to it, you are probably in the wrong csrpoj, as you need one with the Forms package installed.

    If you are in a csproj with Forms, as it looks like you are, all you should need is a using for Xamarin.Forms. It has been in Forms a good while, so if you have CollectionViews you have Selectors.

    IPost was just a convenience interface for a list of posts. I assumed all the posts had similar properties and you wanted to use them in a list together, but it could just be a list of objects for all the code cares.

    My PostViewModel is just an example class with the bare minimum.

    If you post some of what your VM is I could help correct it.

Sign In or Register to comment.