Data Binding to StackLayout

nagarjunreddy

I have a Horizontal StackLayout which consists of multiple Vertical StackLayout. And each of my vertical StackLayout is consisting of two controls(namely image and a label). and I want to bind data to those controls. Is it possible without using "listview"?

AlessandroCaliaro

Yes you can, which is the problem? I think it's depend how it's your "model"

ThomasBurkhart

I think he wants the StackLayout automatically add items through a DataBinding which as far as I know is not possible.

What you could do, but has minor performance is add new Children to the stacking code.

Why don't you want to use A Listview with a CustomViewCell?

nagarjunreddy

@ThomasBurkhart does it provide horizontal list view?
Can you please provide sample code for it?

AlessandroCaliaro

Do you have a static number of vertical stacklayout or is this number variable?

ThomasBurkhart

Yes, please tell us a bit more what you want to achieve. So that we can help you.

nagarjunreddy

@AlessandroCaliaro I have single vertical satcklayout in this scenario.

@ThomasBurkhart my scenario is

I have 10 images(number of images may vary) i want to bind them to a horizontal stacklayout as I get them from API. If I use listview, those images are appearing in a vertical manner. But my requirement is horizontal stackLayout

nagarjunreddy

I have attached my code here
Please do not consider cases of letters(like A and a)

ThomasBurkhart

You could try https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView
I'm not sure if it supports horizontal scrolling. Perhaps it can be put into a horizontal ScrollView
I'm sure @DanielL can help here.

Otherwise using your approach and adding removing the vertical Stacklayouts by code should be the best approach and wrap the horizontal StakLayout in a ScrollView if you need scrolling.
If your maximum of images will not be too big this should work fine.

AlessandroCaliaro

You have to take a look if scrollview can be horizontal. Then I think you can add yours vertical stacklayout by code. I don't know if it works but you can try

ThomasBurkhart

Scollview can be scrolled horizontally

AlessandroCaliaro

thanks @ThomasBurkhart .
So, you can try to do something like this

1) create a contentpage
2) create an horizontal stacklayout
3) create a scrollview (horizontal)
4) add the horizontal stacklayout to scrollview

then I think you have a model like this

public class MyModel(){
    public string Image {get;set;}
    public string TextString {get;set;}
}

and you should have a

List<MyModel> model = ....

then you can try something like this

foreach(MyModel m in model){

    StackLayour slVertical = new StackLayout();
    slVertical.Orientation = StackOrientation.Vertical;

    Image i = new Image();
    i.BindingContext = m;
    i.SetProperty(Image.SourceProperty, "Image");

    slVertical.Children.Add(i);


    // The same for TextString

    //Then add your vertical stacklayout to horizontal stacklayout
    slHorizontal.children.Add(slVertical);


}

then

contentPage.Content = scrollview;

I don't know if it can works...

You can try

Alessandro

ps. othervise you can try @ChrisRiesgo carousel on GitHub, it could help you

Ashish_sharma

can i bind stacklayout which contain a label and image ,and labbel contai also some data which is selected by us in a listview how it is possiblw ? its should ~~~~ be same as tag-it.