BlackLotus
BlackLotus

Reputation: 553

How to bind data to stacklayout in xamarin

I want create vertical ScrollView. Like this: vertical

Here is the code that i tried:

<ScrollView x:Name="newArrival" Orientation="Horizontal" HorizontalScrollBarVisibility="Always">
    <StackLayout Orientation="Horizontal">
        <Frame BackgroundColor="Black" HeightRequest="100" WidthRequest="100">
            <StackLayout>
                <Image HeightRequest="70"/>
                <Label Text="{Binding Name}" FontSize="15" HorizontalOptions="Center"/>
                <Label Text="{Binding Desc}" FontSize="13" HorizontalOptions="Center"/>
            </StackLayout>
        </Frame>
    </StackLayout>
</ScrollView>

Thanks for any helps.

Upvotes: 0

Views: 923

Answers (2)

Jozott
Jozott

Reputation: 2674

You could use a ScrollView horizontal and give a Stacklayout inside, which is also horizontal oriented. In the code-behind you could create your elements dynamically by creating a loop which run through your list with objects you want to bind. Whenever a new object comes through the loop, a new element gets created inside the Stacklayout.

Upvotes: 0

Leon Lu
Leon Lu

Reputation: 9234

Based on your Image, you just want to achieve by ScrollView, it is not reasonable if you have many Items in this view. I suggest you to achieve that by following three ways.

  1. Rotated Xamarin Forms ListView.
  2. Custom Control – Grid + Horizontal ScrollView
  3. Custom Renders – Android.RecyclerView & iOS.UICollectionView( i recommend it)

If you want to know more details about three ways, you can refer to this link. https://causerexception.com/2018/02/06/xamarin-forms-ultimate-horizontal-list-guide/

There is code of above demo.

https://github.com/DanielCauser/XamarinHorizontalList

If you have some doubts about databinding of Model-View-ViewModel (MVVM) .Please refer to this link. https://blog.xamarin.com/introduction-to-data-binding/

Upvotes: 1

Related Questions