Access carouselview inside a listview

Question

I have a ListView and within it I have a CarouselView by the name of CarrosselDeImagens, but in code Behind I can’t access the CarouselView. Kind of: CarrosselDeImagens.ItemSource = listaImagens.

How could I access carouselview inside a listview?

Code XAML:

<ListView x:Name="LstClassificados" HasUnevenRows="true" SeparatorVisibility="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <ContentView BackgroundColor="White">
                        <Frame BorderColor="#49c1ff" 
                               Margin="10" 
                               CornerRadius="10">
                            <StackLayout>
                                <Label Text="{Binding titulo}"
                                       FontSize="Medium"
                                       FontAttributes="Bold"
                                       VerticalTextAlignment="Center" 
                                       HorizontalTextAlignment="Center" 
                                       HorizontalOptions="Center" />

                                <control:CarouselViewControl Grid.Column="0"
                                                             Grid.Row="1"
                                                             x:Name="CarrosselDeImagens"                                                                         
                                                             ShowIndicators="True" 
                                                             Orientation="Horizontal" 
                                                             WidthRequest="300" 
                                                             HeightRequest="300">

                                    <control:CarouselViewControl.ItemTemplate>
                                        <DataTemplate>
                                            <Image Source="{Binding .}" />
                                        </DataTemplate>
                                    </control:CarouselViewControl.ItemTemplate>
                                </control:CarouselViewControl>
                            </StackLayout>
                        </Frame>
                    </ContentView>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Model:

public class Classificado
{
    public int IdClassificado { get; set; }
    public string id { get; set; }
    public string titulo { get; set; }
    public string texto { get; set; }
    public string contato_email { get; set; }
    public string contato_tel { get; set; }
    public string contato_hora { get; set; }
    public string pago { get; set; }
    public string categ { get; set; }
    public string subcateg { get; set; }

    private string _img_link1;
    public string img_link1 { get { return "http://" + _img_link1; } set { _img_link1 = value; } }

    private string _img_link2;
    public string img_link2 { get { return "http://" + _img_link2; } set { _img_link2 = value; } }

    private string _img_link3;
    public string img_link3 { get { return "http://" + _img_link3; } set { _img_link3 = value; } }

    private string _img_link4;
    public string img_link4 { get { return "http://" + _img_link4; } set { _img_link4 = value; } }

    private string _img_link5;
    public string img_link5 { get { return "http://" + _img_link5; } set { _img_link5 = value; } }

    private string _img_link6;
    public string img_link6 { get { return "http://" + _img_link6; } set { _img_link6 = value; } }  
}

Method of loading

private void CarregarCarrossel()
{
    var linkImagens = new List<string>
    {
        linkImagem.img_link1,
        linkImagem.img_link2,
        linkImagem.img_link3,
        linkImagem.img_link4,
        linkImagem.img_link5,
        linkImagem.img_link6
    };

    List<string> imagens = new List<string>();

    foreach (var link in linkImagens)
    {
        string flag = "http://";

        if (link != flag)
            imagens.Add(link);
    }

    CarrosselDeImagens.ItemsSource = imagens;
}

Answer 1

To make your code work, I’ve included a new property Imagens in the model of Classificado to provide the collection that the Carousel needs as ItemsSource.

The model would look like this:

public class Classificado
{
    /* Suas outras propriedades */

    public IEnumerable<string> Imagens 
    {
        get
        {
            var ret = new List<string>();

            if(!string.IsNullOrWhiteSpace(img_link1))
                ret.Add(img_link1);

            if(!string.IsNullOrWhiteSpace(img_link2))
                ret.Add(img_link2);

            if(!string.IsNullOrWhiteSpace(img_link3))
                ret.Add(img_link3);

            if(!string.IsNullOrWhiteSpace(img_link4))
                ret.Add(img_link4);

            if(!string.IsNullOrWhiteSpace(img_link5))
                ret.Add(img_link5);

            if(!string.IsNullOrWhiteSpace(img_link6))
                ret.Add(img_link6);

            return ret;
        }
    }
}

Already in the XAML of ListView, the ViewCell of DataTemplate would look like this:

<ViewCell>
    <ContentView BackgroundColor="White">
        <Frame BorderColor="#49c1ff" 
               Margin="10" 
               CornerRadius="10">
            <StackLayout>
                <Label Text="{Binding titulo}"
                       FontSize="Medium"
                       FontAttributes="Bold"
                       VerticalTextAlignment="Center" 
                       HorizontalTextAlignment="Center" 
                       HorizontalOptions="Center" />

                <control:CarouselViewControl Grid.Column="0"
                                             Grid.Row="1"
                                             ShowIndicators="True" 
                                             Orientation="Horizontal" 
                                             WidthRequest="300" 
                                             ItemsSource="{Binding Imagens}"
                                             HeightRequest="300">

                    <control:CarouselViewControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding .}" />
                        </DataTemplate>
                    </control:CarouselViewControl.ItemTemplate>
                </control:CarouselViewControl>
            </StackLayout>
        </Frame>
    </ContentView>
</ViewCell>

Note that I only added the statement of ItemsSource="{Binding Imagens}" in the control:CarouselViewControl and removed the x:Name (you would only have access to it within the context of the item itself, not in codebehid).

Notes

I don’t know if it will work well to have two components that deal with the nested scroll evendo. This is not recommended and you may be facing some usability issues because of this.

You should already know that the ideal scenario of this type of implementation would be to apply the MVVM. Do not hesitate to do so as soon as possible. You’ll be able to repurpose a lot of code, reduce rework, facilitate maintenance, and leave your code testable.

I hope this helps.