Accessing carouselview within a listview

Question

Accessing carouselview within a listview

Navigation

#1 by (1 votes)

1

I have a ListView and inside it I have a CarouselView with the name of CarrosselDeImagens , but in the code behind I can not access the CarouselView . Type like this: CarrosselDeImagens.ItemSource = listaImagens .

How could I access the carouselview within 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>

Template:

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; } }  
}

Upload method

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;
}

xamarin xamarin-forms

asked by anonymous 29.05.2018 / 18:17

1 answer

Floating box with CSS and HTML Good practices for traffic object JSON [closed]

score 1 · Accepted Answer

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

The template 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;
        }
    }
}

In%% of% of XAML , ListView of ViewCell 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 DataTemplate in ItemsSource="{Binding Imagens}" and removed control:CarouselViewControl (you would only have access to it within the context of the item itself, not in codebehid).

Notes

I do not know if it will work well to have two components that handle the evendo of nested scrolling. This is not recommended and you may face some usability issues because of this.

You should already know that the ideal scenario for this type of implementation would be to x:Name . Do not hesitate to do so as soon as possible. You'll be able to reuse enough code, reduce rework, ease maintenance, and leave your code testable.

I hope this helps.