How to set all the item template data into a single view in Xamarin Carousel

梦想的初衷 提交于 2021-02-10 06:46:05

问题


I have tried to make all the items in the itemtemplate into a single view as like in the below image, how to achieve this by using Xamarin CarouselView, i am using like this

        carousel = new CarouselView();
            carousel.BindingContext = this;
            carousel.ItemTemplate = itemTemplate;
            carousel.SetBinding(CarouselView.ItemsSourceProperty, new Binding(nameof(this.Items), mode: BindingMode.OneWay));
   LinearItemsLayout linearItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal);
            linearItemsLayout.SnapPointsAlignment = SnapPointsAlignment.Start;
            linearItemsLayout.SnapPointsType = SnapPointsType.Mandatory;
           carousel.ItemsLayout = linearItemsLayout;


 this.Children.Add(carousel,0,1);

Expected UI


回答1:


The easiest way of doing something like that would be to use the Horizontal CollectionView

CollectionView can display its items in a horizontal list by setting its ItemsLayout property to HorizontalList:

When you check the documents it gives a similar example

<CollectionView ItemsSource="{Binding Monkeys}"
            ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid Padding="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="35" />
                <RowDefinition Height="35" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70" />
                <ColumnDefinition Width="140" />
            </Grid.ColumnDefinitions>
            <Image Grid.RowSpan="2"
                   Source="{Binding ImageUrl}"
                   Aspect="AspectFill"
                   HeightRequest="60"
                   WidthRequest="60" />
            <Label Grid.Column="1"
                   Text="{Binding Name}"
                   FontAttributes="Bold"
                   LineBreakMode="TailTruncation" />
            <Label Grid.Row="1"
                   Grid.Column="1"
                   Text="{Binding Location}"
                   LineBreakMode="TailTruncation"
                   FontAttributes="Italic"
                   VerticalOptions="End" />
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:

<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
    <LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>

This results in a single row list, which grows horizontally as new items are added:



来源:https://stackoverflow.com/questions/60051190/how-to-set-all-the-item-template-data-into-a-single-view-in-xamarin-carousel

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!